浅析 MVC

MVC 三个对象分别做什么，给出伪代码示例

• M：Model 数据模型，负责操作所有数据
• V：View 视图，负责所有UI界面
• C：Controller 控制器，负责其他

const eventBus = $(window)

// 数据相关都放到m
const m = {
    data:{
        n: parseInt(localStorage.getItem('n'))
    },
    create() {},
    delete() {},
    update(data) {
        Object.assign(m.data, data)
        eventBus.trigger('m:updated')
    }，
    get() {}
}

// 视图相关都放到v
const v = {
    el: null,
    html:`<div ...>`,
    init(container){
        v.el = $(container)
    },
    render(n){
        if (v.el.children.length !== 0) v.el.empty()
        $(v.html.replace('{{n}}', n)).appendTo(v.el)
    }
}

// 其他都放c
const c = {
    init(container){
      v.init(container)
      v.render(m.data.n)
      c.autoBindEvents()
      eventBus.on('m:updated', ()=>{
          v.render(m.data.n)
      })
    },
    events : {
        'click #add1': 'add',
        'click #minus1': 'minus',
    },
    add(){
        // m.data.n +=1;
        // v.render(m.data.n)
        m.update({n: m.data.n +1})
    },
    minus(){
        thism.data.n -=1;
        // v.render(m.data.n)
        m.update({n: m.data.n -1})
    },
    autoBindEvents(){
        for(let key in c.events){
            c.el.on(xx,xx,xx)
        }
    }  
        
}

EventBus 有哪些API，是做什么用的，伪代码示例

const eventBus = $(window); //$({}) 就是个空对象，不需要获取元素，获取的是元素的两个api on 监听事件 off 取消监听事件 trigger 触发事件

在一个地方监听它的事件，在一个地方触发它的事件，就可以实现通信；

eventBus.on(types, selector, data, fn)

eventBus.trigger(type, data)

表驱动编程是做什么的

• 自动绑定事件
• 把一堆的事件绑定，变成一个hash表，实现自动绑定

const c = {
  
    events : {
        'click #add1': 'add',
        'click #minus1': 'minus',
    },
    add(){
        m.data.n +=1;
    },
    minus(){
        thism.data.n -=1;
    },
    autoBindEvents(){
        for(let key in c.events){
            c.el.on(xx,xx,xx)
        }
    }  
        
}

我是如何理解模块化的

• 形成一套固定的模板，不需要程序员从头写代码，可以实现工作中大部分的需求，快速开发变成可能，
• 代价是代码有时候用不到那么多，会浪费，或者要求非常高的情况下，模块化会成为束缚