最近学些了mvc，这里简单做一下总结 MVC包括三类对象，将他们分离以提高灵活性和复用性。
模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。
视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。
控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。
M数据 获取数据n；对数据暴露出增删改查四个API，用于后期操作数据。
const m = {
data: {
n: parseInt(localStorage.getItem('n'))
},//获取数据
create() {},//增
delete() {},//删
update(data) {
Object.assign(m.data, data)
eventBus.trigger('m:updated')
localStorage.setItem('n', m.data.n)
},//改
get() {}
}//查
}
V视图
const v = {
el: null,//接受一个容器
html: `//生成HTML
<div>
<div class="output">
<span id="number">{{n}}</span>
</div>
<div class="actions">
<button id="add1">+1</button>
<button id="minus1">-1</button>
<button id="mul2">*2</button>
<button id="divide2">÷2</button>
</div>
</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)
}//通过if else判断容器的后代是否存在进行增删，最后渲染到页面
}
C控制器 C里面主要是放一些事件的操作，如：click、on等等；这里面又设计到EventBus、表驱动编程等等。
const c = {
//初始化容器
init(container) {
v.init(container)
v.render(m.data.n) // view = render(data)
c.autoBindEvents()//自动绑定事件
eventBus.on('m:updated', () => {
console.log('here')
v.render(m.data.n)
})//监听数据的变化，重新渲染到页面
},
//事件太多，通过哈希表来一一列出，也正是我们所说的表驱动编程
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)
const part2 = key.slice(spaceIndex + 1)
v.el.on(part1, part2, value)
}
}
}
export default c
上面就是我们把index.html、css、js通过MVC进行改写，让代码由面条式变成了万金油（也就是模块化）；下面我们来说说C里面涉及到EventBus、表驱动编程。
EventBus 一种设计模式或框架，主要用于组件/对象间通信的优化简化。
二. eventBus （一）API
on off emit (trigger) （二）使用方法
1.绑定事件 eventBus.on()
eventBus.on("eventName",callback)
//参数依次为 事件名，回调函数名
2.触发事件 eventBus.emit()
eventBus.emit("eventName",[...args])
//参数依次为 事件名 参数数组
3.解绑事件 eventBus.off()
eventBus.off("eventName",callback)
//参数依次为 事件名，回调函数名
三. 表驱动编程 （一）定义：
表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力。
（二）表编程的优点
提高了程序的可读性。一个消息如何处理，只要看一下驱动表就知道，非常明显。 减少了重复代码。 降低了复杂度。 程序有一个明显的主干。 降低了复杂度。
四、什么是模块化 什么是模块化？ 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。 让开发者便于维护,同时也让逻辑相同的部分可复用 模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、 api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。
