A MVC

  • define

MVC full name Model View Controller, is Model (Model)- View (View)- Controller (Controller) abbreviation. The purpose of using MVC is to separate the M and V implementation code so that the same program can use different representations. Among them, the definition of View is relatively clear, is the user interface.

Model M encapsulates data related to the application’s business logic and how it is processed, and one or more views listen to this model. The model notifies the views concerned whenever the model’s data changes

View V is its on-screen representation, representing the current state of the Model. As the model’s data changes, the view gets the opportunity to refresh itself accordingly

Controller C defines the way the user interface responds to user input, acts as an organization between different layers, and is used to control the flow of the application. It deals with user behavior and changes in the data model.

Through the following little chestnut let’s briefly look at the MVC data layer code in M

const m = {
  data: {
    n: parseInt(localStorage.getItem("n"))},create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data); 
    eventBus.trigger("m:updated");
    localStorage.setItem('n', m.data.n);
  },
  get(){}};Copy the code

The view layer is placed in V

const v = {
  el: null.// Render HTML for the first time
  html: ` 
      
 
       
 
        {{n}} 
       
 
       
 
         
         
         
         
       
 
      
 '.init(container) {
    v.el = $(container);
    v.render();
    console.log(v.render())
  },
  render(n) {
    if(v.el.children.length ! = =0) v.el.empty();
    console.log(n)
    $(v.html.replace("{{n}}", n)).appendTo(v.el); }};Copy the code

Other to C

const c = {
  init(container) {
    v.init(container);
    v.render(m.data.n); //view=render(data)  
    c.autoBindEvents();
    eventBus.on("m:updated".() = > {
      v.render(m.data.n);
    });
  },
  events: {
    "click #add1": "add"."click #subtract1": "subtract"."click #multiply1": "multiply"."click #divide1": "divide",},add() {
    m.update({ n: m.data.n + 1 });
  },
  subtract() {
    console.log("here");
    m.update({ n: m.data.n - 1 });
  },
  multiply() {
    console.log("here");
    m.update({ n: m.data.n * 2 });
  },
  divide() {
    m.update({ n: m.data.n / 2 });
  },
  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

EventBus

There are three main apis:

  • onUsed to listen on objects.
  • triggerUsed to trigger objects.
  • offUsed to cancel object listening.

Example:

const eventBus = $(window) 
const m = {
  data: {... },update(data) {
    eventBus.trigger('m:updated')}}const v = {
  render(data){... Update data}}const c = {
  eventBus.on('m:updated'.() = > {
    v.render(m.data.n)
  })
}
Copy the code

Table driven programming

Table-driven methods are methods that allow you to look up information in a table without having to use logical statements (if or case) to find it. In fact, any information can be selected by the table. In simple cases, logical statements tend to be simpler and more straightforward. But as logical chains become more complex, tables become more attractive.

The meaning of table driven programming lies in the separation of logic and data. (Similar to event delegation)

For example, if – else

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '????? '}}// If you want to add a new noun translation, you need to add an if-else logic, for example:
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // Add a new noun translation here
        return 'four'
    } else {
        return '????? '}}Copy the code

Table driven by:

function translate(term) {
    let terms = {
        '1': '一'.'2': '二'.'3': '三'
    }
    return terms[term];
}

// If you want to add a new noun translation, just add a new entry to terms without modifying the entire logic
function translate(term) {
    let terms = {
        '1': '一'.'2': '二'.'3': '三'
        '4': 'four'   // Add a new noun translation
    }
    return terms[term];
}
Copy the code

How do I understand modularity

Take a bunch of complex code, encapsulate it into different modules with different functions, and separate it out. Reduce code coupling degree, each module has better independence. Doing so can solve the problem of global variable contamination in the project, make development more efficient, and facilitate code reuse and maintenance.