Reference article: efe.baidu.com/blog/mvc-de… Early warning: This blog is a collection of ideas

One: What is MVC

The MVC pattern means that software can be divided into three parts. M(Model) layer: data is saved, model sends new data to View, and users get feedback V(View) layer: user interface. The View sends instructions to the Controller C(Controller) layer: business logic. After the Controller completes the business logic, it asks the Model to change state. All communication is one-way. The communication between layers is shown in the figure:

The Model layer encapsulates the data associated with the application’s business logic and how it is processed. Here, we encapsulate the numerical variables needed in Model, and define add, sub, and getVal to manipulate the numerical methods.

var myapp = {}; // Create the application object myapp.model =function() { var val = 0; // This. Add = thisfunction(v) {
      if (val < 100) val += v;
    };

    this.sub = function(v) {
      if (val > 0) val -= v;
    };

    this.getVal = function() {
      return val;
    };

};
Copy the code

View, as the View layer, is mainly responsible for the display of data.

myapp.View = function() {/* View element */ var$num = $('#num'),
  $incBtn = $('#increase'),
  $decBtn = $('#decrease'); /* Render data */ this.render =function(model) {
    $num.text(model.getVal() + 'rmb');
  };

};
Copy the code

2. What apis does EventBus have? What is it used for

When an event is executed, eventBus triggers M :updated Eventbus.trigger ('m:updated'EventBus listens to m:updated, when m:updated executes something eventbus. on('m:updated',()=>{
     v.render(m.data.n)
 })
Copy the code

Three: what does table driver programming do

Table-driven Methods is a programming pattern that can be used to make code more straightforward by eliminating frequent if else or switch case logical structure code.

c = {
    events:{
        'click #add1':'add'.'click #minus1':'minus'.'click #mul2':'mul'.'click #divide2':'div'
    },
    autoBindEvents() {for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0, spaceIndex)
            const part2 = key.slice(spaceIndex + 1)
            v.el.on(part1,part2,value)
        }
    }
}
Copy the code

Four: How do I understand modularity

So this is a module that I copied from somebody else and it’s a file that implements a particular function, and with a module, it makes it easier for us to use somebody else’s code, and load whatever functionality we want. Module development needs to follow a certain set of rules, and everything goes wrong

To package a complex program into several blocks (files) according to certain rules (specifications) and combine them. The implementation of a module’s internal data is private, exposing only interfaces (methods) to communicate with other external modules. This is modularity. Modularization can reduce code coupling, reduce duplicate code, improve code reuse, and make the project structure clearer and easier to maintain.

From my own understanding, I think modularization is to separate functions by modules, each doing their own work, we match each other, but do not interfere with each other, so that the work efficiency will be higher, and the code will make people feel neat and easy to understand.

MVVM

React One-way data flow: Data flows from bottom to top,