MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个 基本部分：数据模型（Model）、视图（View）、和控制器（Controller）。MVC不是一种技 术，而是一种理念。
MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并使软件某一部 分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。
数据模型（Model）：模型持有所有的数据、状态和程序逻辑。用于封装与应用程序的业务逻辑相 关的数据以及对数据的处理方法。
视图（View）：负责界面的布局和显示。处理控制器里的HTML资料并且将它们插入DOM中。能 够实现数据有目的的显示。访问它监视的数据模型（Model）。
控制器（Controller）：负责模型和界面之间的交互。定义用户界面对用户输入的响应方式，起到 不同层面间的组织作用，用于控制应用程序的流程和处理事件并做出响应。“事件”包括用户的行为和数据Model上的改变。
/** 模拟 Model, View, Controller */
/** Model 负责存放数据资料 */
const Model = {
data: {
数据源
},
create: {
增加数据
},
delete: {
删除数据
},
update(data) {
Object.assign(m.data, data) //用新数据替换旧数据
eventBus.trigger('m:update') //eventBus触发'm:update'信息，通知View刷新界面
},
get: {
获取数据
}
}
/** View 负责将资料输出给用户*/
const View = {
el: 要刷新的元素，
html： '要显示在页面上的内容'
init() {
v.el: 需要刷新的元素
}，
render() {
刷新页面
}
}
/** Controller 作为连接 M 和 V 的桥梁 */
const Controller = {
init() {
v.init() //初始化View
v.render() //第一次渲染页面
c.autoBindEvents() //自动的事件绑定
eventBus.on('m:update', () => {
v.render()
} //当enentsBus触发'm:update'是View刷新
}，
events: {
事件以哈希表的方式记录存储
},
method() {
data = 新数据
m.update(data)
},
autoBindEvents() {
自动绑定事件
}
}
EventBus
事件总线是一种设计模式，可以用于简化不同组件之间的通信。它也可以被认为是发布/订阅。组 件可以监听事件总线来知道什么时候做它们做的事情。 基本API有on（监听事件）、trigger（emit）（触发事件）、off（取消监听）方法。
//EventBus.js
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 //new.js
import EventBus from 'EventBus.js'
const e = new EventBus()
e.on()
e.trigger()
e.off()
表驱动编程
表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句来把它们找出来的方法。事实上， 凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更 为容易和直白。但随着逻辑链的越来越复杂，查表法也就愈发显得更具吸引力。 表驱动编程的意义在于逻辑与数据的分离。 优点： • 提高了程序的可读性。 • 减少了重复代码。 • 可扩展性。 • 程序有一个明显的主干。 • 降低了复杂度。 用一个例子展示，今天是几号
const day = new Date().getDay()
let day_zh;
if (day === 0) {
day_zh = '1号'
} else if (day === 1) {
day_zh = '2号'
}
...
else {
day_zh = '31号'
}
// 或者 用 switch case switch(day) {
case 0:
day_zh = '1号'
break;
case 1:
day_zh = '2号'
break;...
}
实现同样功能的一种更简单、更容易修改的方法是把这些数据存到一张表里面。
const mouth = ['1号', '2号',..., '31号']
const day = new Date().getDay()
const day_zh = mouth[day]
模块化编程
模块化编程（modular programming）是一种软件设计技术，它将软件分解为若干独立 的、可 替换的、具有预定功能的模块，每个模块实现一个功能，各模块通过接口（输入输出 部分）组合 在一起，形成最终程序。 模块化编程具有易设计、 易实现、易测试、易维护、可重用的优点。
