Model, View, Controller Design Pattern

The Model View Controller or MVC design pattern is a way of organising code that allows for separation of concerns and can make adding additional features and functionality easier. Writing code in a design pattern can be quite tricky, especially if you're trying to migrate existing code to fit into a design pattern. It's also important to keep in mind that just because a design pattern exists it doesn't mean it should be used, or that it will give your code any benefit. Design patterns should be used when and where they make sense to be used and not just everywhere.

The MVC pattern has three separate components, the model, view, and controller component. The model is in charge of storing the data of the application, the view is in charge of displaying the interface to the user and the controller acts a middle man between these two components. The controller will contain events that the view will trigger and within these events, it will communicate with the model. For example, imagine we have an input box and a button in the view, when you click the button a method in the controller is triggered that takes the input text and sends it to the model, the model then saves this text to the internal data model.

Using the MVC pattern the view code will be dependent on the controller, as it needs to call methods within the controller, and the controller will be dependent on the model as it needs to access the data within the model. However, the model will not be dependent on either the view or controller. This means the model is completely reusable or replaceable within the codebase, as it isn't dependent on either of the other two modules.

-- image

Let's look at an example. In an HTML page or the view, you may have two elements, a button, and an input text box. Below shows a basic input text box and a button defined in HTML. The text box has an id of 'inputText' which we will use later to grab the text value. The button has a click handler that calls a function called 'submitText' in a 'controller' object.

<div>
    <input type='text' id='inputTxt' />
    <button onclick='controller.submitText()'>Submit</button>
</div>

We can also define a model object within JavaScript. Our model object is just a simple array of objects that each contain an 'id' and a 'text' field. The id field can be used to identify different items and the text field will be the content of the item.

var model = [
    {id: 0, text: 'Hello world'},
    {id: 1, text: 'Goodbye world'}
]

Now we can define a controller object and declare the submit handler function for our button. This submit handler function simply grabs the text value from the input field, calculates a new id value by adding 1 to the maximum existing id in the model, and then pushes a new item to our model object.

var controller = {
    submitText: function(){
        var input = document.getElementById('inputTxt');
        var text = input.value;
        var maxId = Math.max(...model.map(i => i.id));
        model.push({id: maxId+1, text: text});
    }
}

The MVC design pattern can be used to separate concerns in code. The example shown on this page shows the view and controller are coupled but the model object is completely uncoupled and can, therefore, be replaced or reused. Above is a very simple code sample to show how the MVC works and how it can be used. Obviously, with a more complicated code base, the code to maintain the MVC pattern can become more complicated and have more lines per module. For example, your controller could have more functions, your view could have more elements, or your model could contain more items, arrays or a more complex data model.

This post was originally published on https://acroynon.com