【 introduction 】

MVC is a software architecture pattern or MVC framework; It consists of Model, View and Controller. The purpose of this pattern is to achieve a dynamic programming, which can simplify the modification and extension of subsequent programs.

MVC three objects

Each module can be written as M, V and C objects

  • M (Model: Data Model) : is responsible for operating all data
  • V (View) : responsible for all UI interfaces
  • C (Controller) : Responsible for others

Requirement: to achieve a number of addition, subtraction, multiplication and division; As is shown in

Use MVC to implement this requirement (using pseudocode, just understand the idea)

  1. The M object operates on all data

Everything related to the data goes into the M object

const m = {
	dataData: {n}create(){},
    delete(){},
    update(data){
    	Object.assign(m.data,data)// Replace old data with new data
        eventBus.trigger('m:update')//eventBus start m: Update the event to refresh the interface
    },
    get(){}}Copy the code
  1. The V object is responsible for all the UI interfaces

All the views are in v,


const v = {
	el: Stores pages that need to be rendered,html:'Put the HTML content here'.init(container){
    	v.el = $(container)
    },
    render(n){refresh page}}Copy the code
  1. C objects are responsible for the rest

Other operations are put in C


const c = {
	init(container){
            v.init()
            v.render()
            c.autoBindEvents()
            eventBus.on('m:update'.() = >{v.render()},// When eventBus triggers m:update, refresh the view
        },
        eventsEvents: {},// Events are stored as hash tables, involving table driven programming
        add(){+ concrete implementation},minus(){-concrete implementation},mul(){* concrete implementation},div(){/ concrete implementation},autoBindEvents(){automatic binding event}}Copy the code

What apis does EventBus have

Simply put, it is an event-driven message service bus

  1. api

The EventBus basic API has on, trigger, and OFF methods.

For communication between modules, view component level, parent-child component, and sibling component communication can all be handled using eventBus

/ / EventBus. J code
class EventBus{
    constructor(){
        this._eventBus =$(window)}on(eventName, fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._trigger.tiggger(eventName,data)
    }
    off(eventName, fn){
        return this._eventBus.off(eventName,fn)
    }
}
export default EventBus


/ / new. Js code
import EventBus from 'EventBus.js'
const e =new EventBus()
e.on()
e.trigger()
e.off()
Copy the code

Table driven programming

Table driver is a programming pattern that looks up information from a hash table rather than using logical statements (if… else… Switch, which reduces repetitive code, puts important information into tables, and then uses tables to program, has more stable complexity than logical statements.)

For example,

bindEvents(){
    v.el.on('click'.'#add1'.() = >{
    m.data.n +=1
    v.render(m.data.n)
    })
    v.el.on('click'.'#minus1'.() = >{
    m.data.n-=1
    v.render(m.data.n)
    })
    v.el.on('click'.'#mul2'.() = >{
        m.data.n*=2
        v.render(m.data.n)
    })
    v.el.on('click'.'#divide2'.() = >{
        m.data.n/=2
        v.render(m.data.n)
    })
}
Copy the code

The above code is very similar, and each bound event is not very clearly expressed, using the table driver as follows

events:{
        'click_#add1': 'add'.'click_#minus1': 'minus'.'click_#mul2': 'mul'.'click_#divide2': 'div',},add() {
        m.update({n: m.data.n+1})},minus() {
        m.update({n:m.data.n -=1})},mul(){
        m.update({n:m.data.n *=2})},div() {
        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);
            console.log(part1);
            const part2 = key.slice(spaceIndex+1)
            console.log(part2);
            console.log(value);
            v.el.on(part1,part2,value)
        }
    }
Copy the code

This makes the code much clearer

Table driven programming is described in Code:

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.

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

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

Understanding modularity

How do I understand modularity?

1, after the code modularization, whether the integrity of the code or the later code maintenance has become clear and simple.

2, business modularization can make the business process more clear, easy to carry out the work, between each business module responsible for their module business, also avoid some unnecessary trouble, make the work efficiency will be higher.

3. Modularity is an efficient idea in my opinion, which provides a direction for code optimization and code reconstruction in the programming process.