1. MVC
MVC 是由三个单词 model、view、controller 的首字母所组成的，分别对应模型、视图和控制器。
模型上有着页面的所有数据、状态和程序逻辑，有一个或多个视图监听模型，当模型上的数据发生变化时，模型就通知有关的视图。
视图负责页面的布局和显示，当模型的数据发生变化时，视图就刷新对应的页面。
控制器负责模型和视图之间的交互。控制器定义用户界面对用户输入的响应方式，并处理用户的行为和数据模型的改变。
下面举个简单的例子，我们在页面上放一个数据，点击按钮就加一。
const m = {
data:{
n: 获取当前n的值或赋初始值为100
},
create(){增加数据},
delete() {删除数据},
update(data) {更新n的值到页面上},
get() {获取数据}
}
const v = {
el: 要更新的元素,
html: `要写入的html`,
init(){初始化页面},
render(){渲染页面}
}
const c = {
init(){调用v中的init和render，然后绑定自身的函数，完成所有初始化},
events(){使n加一}
}
上面就是一个简单的 MVC 设计模式。我们把模型相关的数据和函数都放在 m 里面，把视图相关的数据和函数都放在 v 里面，将剩余的数据和函数放在 c 里面。
2. EventBus
EventBus 是一个空对象，它里面有 on、triggern 等函数。on 函数可以用来监听事件，而 trigger 函数可以用来触发事件。如果我们在一个地方监听事件，在另外一个地方触发事件，则这两个事件就可以进行通信。
//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
//main.js
import EventBus from 'EventBus.js'
const e = new EventBus()
e.on()
e.trigger()
e.off()
如上面代码所示，在 EventBus 中我们将它的属性绑定到原型链上，方便其他人的调用。同时我们通过引入的方式来调用 EventBus 上的函数。
3. 表驱动编程
当我们在写代码的过程中写出大量类似但又不重复的代码时，我们可以通过使用哈希表的方式来对代码进行改写。
将这些重复代码中不重复的部分抽离出来，写成一个哈希表，再通过遍历的方式对对应的函数进行赋值，这样就能减少代码量，并且以后需要增加更多类似的代码时也更加方便。
4. 个人对模块化的理解
模块化在写代码中是很有必要的。
如果当前的项目的代码量不多，可能你感觉模块化也没什么必要。但是当代码里多了起来，模块化的重要性就凸显出来了。
你的项目中可能会出现大量重复或类似的代码，这个时候就应该将这些类似的代码使用表驱动编程抽离出来封装成模块，这样下次我们需要调用时也更加方便，同时项目的文件也会更加有条理性而不是一个 JS 文件搞定全部。
与当前项目的主逻辑不相关的数据和函数也可以抽离成模块，让每个模块的职能更加明确。
模块化还有一个好处是如果某部分的代码需要重构，你可以直接在模块中进行并且不影响到其他模块。这样你甚至可以每个模块用不同的框架去构建。
当模块化与 MVC 设计模式结合起来时，MVC 就成了中间层，M、V、C 分别对应一部分模块，三者又构成整个项目。
