MVC concepts that must be mastered

The concept of MVC

MVC is Model, View, Controller.

M (model)

One or more view listening models are used to encapsulate data related to the application’s business logic and how the data is processed. The model notifies the views concerned whenever the model’s data changes.

const m = {
   dataData: {},create(){add data},delete(){delete data},get(){get data},update(){Modify data}}Copy the code

V (view)

It’s mostly what you can see on the page. As the data in the current model changes, the view is given an opportunity to refresh itself accordingly.

const v = {
 el: page elementhtml:{display page contents},init(){v.el ... Element initialization},render(){re-render}}Copy the code

C (constroller)

C(Contorller) mainly defines the response mode of user interface to user input, and is used to process user behavior and data model changes.

const c = {
  init(){initialize},BindEvents(){bind event}}Copy the code

EventBus

EventBus can communicate between objects and automatically listen for events to make changes when data or features change.

add(){
  data+=1;
  render(data);
},
minus(){
  data-=1;
  render(data);
},
multiply(){
  data*=2;
  render(data);
},
divide(){
  data/=2;
  render(data);
},
Copy the code

The above code is the operation of addition, subtraction, multiplication and division. After the data data changes, render the data data, call the render function render();

Render () is called once whenever data is updated.

The question is: Is there a way to simplify? How about calling the render() function automatically whenever data changes?

Presentation:

const eventbus=$({});  // Create an eventBus using the jQuery library.
 
let xx = {
  data: {n:100,}}updata(data){
  Object.assign(xx.data,data);  // Batch assignment
 
  eventbus.trigger('updataed:xx.data');  // Trigger an event named 'updataed:xx.data'
}
 
/* Call the jquer-wrapped event listener */
eventbus.on('updataed:xx.data'.() = >{
  render(xx.data);
})
 
/* Improved addition, subtraction, multiplication, and division functions */
 
add(){
  updata({n:xx.data.n+1});
},
minus(){
  updata({n:xx.data.n-1});
},
multiply(){
  updata({n:xx.data.n*2});
},
divide(){
  updata({n:xx.data.n/2});
Copy the code

Eventbus.trigger (‘updataed:xx.data’) whenever updata() is called

Trigger, and then the event listener fires, automatically calling the render() function to render.

EventBus的API

On (listening)

const eventBus = $(window)
evnetBus.on("Listening event".() = > {})
Copy the code

This trigger triggers events.

const eventBus = $(window)
eventBus.trigger("Event")
Copy the code

Off (Cancel listening)

const eventBus = $(window)
eventBus.off("Listening event")
Copy the code

Table driven programming

Table driven programming is a pattern of programming that looks up information from a hash table rather than using the logical statement if… else.. The reason is that when the logic is simple, it’s easy to use logic statements and the code is short, but when the logic is complex, the logic statements are cumbersome and the code is long, so you should use table-driven programming.

Table driven programming allows you to reduce code duplication, put only the important information in tables, and then program with tables.

Example:

Let’s say you want to optimize a piece of code, and this is what it looks like before optimization, stinky and hard.

howManyDays(year, month){
    if(month === 1 ||
        month === 3 ||
        month === 5 ||
        month === 7 ||
        month === 8 ||
        month === 10 ||
        month === 12) {return 31
    }else if(month === 2) {return isLeapYear(year) ? 29 : 28
    }else{
        return 30}}Copy the code

We optimized it in a table-driven way:

howManyDays(year, month){
    const table = {
        1: 31.3: 31.5: 31.7: 31.8: 31.10: 31.12:31.4: 30.6:30.9: 30.11: 30.2: isLeapYear(year) ? 29 : 28
    }
    return table[month]
}
Copy the code

modular

MVC itself is a modularity, we package some scattered code into blocks. And this module can be reused, so that it can reduce code coupling, reduce repeated code, improve code reuse, and in the project structure more clear, easy to maintain.

MVC concepts that must be mastered