浅析MVC

MVC模式（Model–view–controller）是一种设计模式（或者软件架构），把系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

MVC 三个对象分别做什么

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

const m = {
    data: {}
}

const v = {
    el: null,
    // 初始化html
    html: `html代码`
    ,
    init(container) {
        v.el = $(container)
    },
    render(n) { }
}

const c = {
    init(container) {}
    }, 
    events: {事件}, 
    autoBindEvents() {逻辑}
    }

}

EventBus 有哪些 API，是做什么用的

EventBus能够简化各组件间的通信，让我们的代码书写变得简单，能有效的分离事件发送方和接收方(也就是解耦的意思)，能避免复杂和容易出错的依赖性和生命周期问题。\

EventBus 有哪些 API

• on : 监听事件
• trigger(emit) : 触发事件
• off : 取消监听

eventBus{
    on{监听函数},
    trigger{触发函数},
    off{取消监听}
}

表驱动编程是做什么的

表驱动方法编程（Table-Driven Methods）是一种编程模式,在JS中，表就是指的哈希表结构，使用表驱动编程，能使重复冗余的代码变的稳定简洁。

不使用表驱动方法写法：

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

对比之后发现,未使用表驱动的代码重复性极高,而下面的代码将数据和逻辑分离,更加清晰简洁.

我是如何理解模块化的

1.将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。
2.模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这就是模块化。
3.模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。