1. What are the three objects of MVC? What do you do separately?

• M: The Model (data Model) is responsible for manipulating all data

The following pseudocode is used as an example:

Const m = {data:{data source}, create(){add}, delete(){delete}, update(data){object.assign (m.data, Eventbus.trigger ('m:update') // eventBus triggers the 'M :update' message to inform the View to refresh the page}, get(){check}}Copy the code

• V: View, which is responsible for all the UI

The following pseudocode is used as an example:

Const v = {el: null, // render element HTML: 'code to display content', init(container){v.l = $(container)}, render(){render content}}Copy the code

• C: Controller, which is responsible for everything except M and V

The following pseudocode is used as an example:

Const c = {v.init(container){// Initialize View // View = render(data) v.ender (m.data.n) // first render c.autobindevents () // EventBus. On ('m:updated',()=>{// eventBus triggers' M :update', View rerenders, As / / v.r ender (m. ata. N)})}, events: {/ / hash table records / / as / / 'click # add1' : 'add', / / 'click # minus1' : 'minus,}, the add () {/ / as / / m.u pdate ({n: m. ata. N + 1})}, minus () {/ / as / / m.u pdate ({n: M.data.n-1})}, autoBindEvents(){ For (let key in c.vents) {// const value = c[c.vents [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

2. What apis does EventBus have and what does it do?

• The basic API of EventBus includes on, trigger, and off methods.
• For communication between modules, view component level, parent-child component, sibling component communication can be handled by EventBus

//EventBus.js
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
import EventBus from 'EventBus.js'
const e =new EventBus()
e.on()
e.trigger()
e.off()
Copy the code

3. What is table driven programming?

• Table driven is a programming pattern that looks up information from tables (hash tables) rather than using logical statements (if… The else… Switch, which reduces repetitive code, only puts important information in tables, and then uses tables to program, has a more stable complexity than logical statements.
• The following code has a very similar problem

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

• After table driver programming, the code does not repeat the part of the extraction into the hash table, the code is much simpler

events:{
    'click #aa1':'add',
    'click #minus1':'minus',
    'click #mul2':'mul',
    'click #divide2':'div'
},
add(){
    m.update( data: {n:m.data.n +1})
},
minus(){
    m.update( data:{n:m.data.n -1})
},
mul(){
    m.update( data: {n:m.data.n *2})
},
div(){
    m.update(data: {n:m.data.n /2})
}

Copy the code

4. How do I understand modularity

• My own understanding of modularity, in its simplest terms, is that the internal data and implementation of a block are private, only exposing interfaces (methods) to communicate with other external modules, which makes each module independent. If something goes wrong in one module, it won’t affect other modules, so you can focus less on the impact of the current module on other modules in modular programming.

Benefits of modularity

1. Avoid variable contamination and naming conflicts
2. Improve code reuse
3. Improve maintainability
4. Dependency management