Example Description MVC,MVP,MVVM Architecture

Very early to know that there are three concepts, but has been not clear how it is, in the online search, are generalities, no specific examples, novice is not understand, until the article, I have a clearer understanding of these three architectures.

Look at these three architectures from a simple example.

Note that C,P,VM in MVC,MVP,MVVM, the controller refers to the following.

Requirements are as follows

The interface shows 100, and two buttons, one point and 1, the other one minus 1.

Admittedly, such a simple demand, do not need to use what architecture to complete, but if it is complex needs, to be long-winded to say, so only to take the simple example, the actual development, you in the completion of a demand, it is necessary to weigh whether to use the architecture, if so, with what structure (not limited to these three), What design patterns are used in the architecture and so on. Through my practice, it is found that even if the architecture changes, view can be completely unchanged, so first show the code of the View layer.

HTML section

<spanID= "text">100</span><ButtonID= "Upbtn">Up</Button><ButtonID= "Downbtn">Down</Button>

JS section

function $ (ID) {  return  document.queryselector (' #${id} ');} function View (Controller) {  = $ (' upbtn ');   = $ (' downbtn ');   = $ (' text ');    This function (model) {    = model.getvalue ();  }   = controller.up;   = Controller.down;}

The Render method is the core, the method name cannot be changed (depends on the Render method later), which implements the presentation logic of the data, then the binding of some click events

MVC

Model Layer

function Model () {  = +;    This function () {    + = 1;  }  ;  This function () {    -= 1;  }  ;  This function () {    return  value;  };}

Save the data, and provide access to modify the data method, if only this, then when the model changes, the view is not known, so need to let the model to notify view, my data changed, you have to update. How do you do it? Take advantage of the observer pattern. In the model, add an array of views, to save the model corresponding to the view, when modifying the data, iterating over the array of the view, call each of the Render method, the parameters are self.

The modified model

functionModel () {Let value= 100; Const Self= This; Const Views= [];  This. Up =function() {Value+ = 1;  };  This. Down =function() {Value-= 1;  };  This. GetValue =function() {    returnvalue;  };  This. Broadcast =function() {Views.foreach (view=View.render (self));  };  This. Subscribe =function(CB) {Views.push (CB); }}

Look closely at the modified model, although the method of notification (broadcast) is added, but the method of modifying the data (up and down) does not notify the view. This work is done by the controller, and the view is also registered with the model, which is the controller.

Controller layer

functionController () {Let view=NULL; Let model=NULL;  This. Up =function() {    //Modifying Datamodel.up (); //Notification ViewModel.broadcast ();  };  This. Down =function() {Model.down ();  Model.broadcast (); }   This. init =function() {View=NewView ( This); Model=NewModel (); //to register the view in modelmodel.subscribe (view); }}

As you can see, the controller passes himself to view to create the view, save the reference, create the model, and then register the view with the model. At the same time realize, change the data, notify the view of the work.

Please be sure to understand MVC, the MVP,MVVM are only slightly modified.

Mvp

In MVC, the change of data, the notification view, is done by the controller, the registration view, and the notification view, the implementation of both methods is the model, since the model is responsible for data processing, the two work is actually not related to the change, Transferring them all to the controller not only allows the model layer to focus on data processing, but also allows multiple views to share a controller

Model Layer

function Model () {  = +;    This function () {    + = 1;  }  ;  This function () {    -= 1;  }  ;  This function () {    return  value;  };}

The model layer is smaller, delete the registration, notification method, only save data and provide access, modify the data method

Controller layer

functionController () { let views= []; Let model=NULL; functionBroadcast () {Views.foreach (view=View.render (model)); }   This. Up =function() {model.up ();  Broadcast ();  };  This. Down =function() {Model.down ();  Broadcast (); }   This. init =function() {Views.push (NewView ( This)); Model=NewModel (); }}

Controller, added the broadcast method, the implementation and invocation of the method are in the controller, in addition, if you want to share a controller with multiple views, if the multiple views are the same model, the above code can be competent, If the multiple views are different model, it is necessary to achieve a good view and model of the corresponding relationship (to use map to store the corresponding relationship, an array can not be done).

MVVM

As you can see, the model also has an up method in the MVP, and the controller has an up method, just adding a call to the broadcast method. Is it a little repetitive? Integrating these two similar approaches into Controller,model is only responsible for preserving the data and not implementing the logic of modifying the data, which is MVVM, which greatly streamlines the model

Model Layer

function Model () {  = +;    This function () {    return  value;  };    This function (v) {    = v;  }}

In fact, without functions, simply using a variable, it is also possible, but in order to view the layer is not changed, the view layer depends on the model of the GetValue method, so here still use the function to implement the model

Controller layer

functionController () { let views= []; Let model=NULL; functionBroadcast () {Views.foreach (view=View.render (model)); }   This. Up =function() {Model.setvalue (Model.getvalue ()+ 1);  Broadcast ();  };  This. Down =function() {Model.setvalue (Model.getvalue ()-1);  Broadcast (); }   This. init =function() {Views.push (NewView ( This)); Model=NewModel (); }}

The cost of streamlining the model is that the controller does more, implements the logic to modify the data, and notifies the view. If you use frames, react, or Vue, this section of the Notification View framework will help you implement the logic of data modification.

At this point, three architectures are all finished, if wrong, welcome to discuss.

The code can be downloaded on GitHub and requires a node environment.

Reference: http://www.cnblogs.com/zhouyangla/p/6936455.html

Example Description MVC,MVP,MVVM Architecture