What is the MVC

MVC is a software architecture pattern that divides a software system into three basic parts: Model, View and Controller.

M-model (Data Model)

Responsible for handling all data

// The following is an example
const m = {
   data:{data required by the program},create(){add data},delete(){delete data},get(){get data},update(){Modify data}}Copy the code

V-view

Responsible for all UI interfaces

// The following is an example
const View={
    el: The element to refresh, HTML:'Refresh content to display on the page'
    init(){v.l: Initialize the element to be refreshed},render(){refresh page}}Copy the code

C-controller (Controller)

Responsible for selecting “data in data Layer” according to user input instructions from “view layer” and performing corresponding operations (binding events, etc.) to produce final results

// The following is an example
const Controller={
    init(){
        v.init()
        v.render()// Render the page for the first time
        c.autoBindEvents()// Automatic event binding
        eventBus.on('m:update'.() = >{v.render()}// View refreshes when enentsBus triggers 'm:update'},events:{events are stored as hash table records},method(){data= new data m.update(data)},autoBindEvents(){automatic binding event}}Copy the code

The role of the EventBus

The three LAYERS of MVC mentioned above are closely linked but independent of each other, and changes within each layer do not affect the other layers. When layer to layer communication is needed, EventBus is needed. EventBus is mainly used for listening and communication between components.

  • EventBusThe commonly usedAPI
// on(listening event)
const eventBus = $(window)
evnetBus.on("Listening event".() = > {})

// trigger events
const eventBus = $(window)
eventBus.trigger("Event")

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

About table driver 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)

  • In order toif-elseAs an example
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
  • Convert to table driver
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

Modular programming

According to Wikipedia, modular programming is the software design technique of separating the functions of a computer program into independent, mutually changing “modules”, each containing everything necessary to perform a unique aspect of the intended function. A module interface expresses elements provided and required by the module.

In simple terms, modularization is to extract relatively independent code from a large section of code into a small module, each module is relatively independent, to achieve the corresponding function, more concise and beautiful, but also convenient maintenance.

This article references excerpts:

  1. MVC– Wikipedia
  2. Brief analysis of MVC– Ou Daxiong
  3. Analyses the MVC – Zeroy
  4. Brief analysis, what is MVC? — Ebullion thirteen
  5. Csy has no nickname
  6. Table driver programming — Social book