浅析 MVC

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

• M：数据模型(Model)

const m={
    data:{},//数据源
    create:{},
    delete:{},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发事件
    },
    get:{}
}

• V:视图(View)

const v={
    el:null，
    html：``
    init(container){
        v.el:$(container)
    }，
    render(){//刷新页面
    }
}

• C:控制器(Controller)

const c={
    init(){
        v.init()//初始化View
        v.render()
        c.autoBindEvents()
        eventBus.on('m:update',()=>{v.render()}//
    }，
    events:{},
    method(){},
    autoBindEvents(){}
}

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

EventBus.on()//监听事件
EventBus.trigger()//触发事件
EventBus.off()//取消监听

用于模块间的通讯， view组件层面，父子组件、兄弟组件通信都可以使EventBus处理

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

表驱动编程是做什么的（可以自己查查资料）

表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。
可以减少重复代码,如以下代码重复率高：

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)
  })
}

我们可以改写为：

events: {
  'click #add1' : '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})
}

我是如何理解模块化的

我理解的模块化是每个模块都是是独立的文件，例如完成一个简易的计算器功能，我们可以分成好几个部分分别进行操作，这个程序文件内部的所有变量，使用export default xxx输出就可以让其他文件获取。这样做的好处就是不会使代码过于冗杂，重复多次的代码也可以总结起来放在一起，这种分模块管理，也更加便于修改和优化。