一、MVC 、MVP、MVVM
MVC是一种编程概念，标准讲法是一种架构设计模式。它来源于后端，即前端借鉴后端的概念去组织或者设计前端的代码，导入模块化编程思想。
MVC拆解如下：
- Model（数据模型） - 数据保存（数据相关都放到 m）
- View（视图） - 用户界面（视图相关都放到 v-->view）
- Controller（控制器） - 业务逻辑（其他都放到 c）
各个部分的伪代码实现：
Model
Model = {
data:{程序需要操作的数据或信息},
create:{增数据},
delete:{删数据},
update(data){
Object.assign(m.data,data)//使用新数据替换旧数据
eventBus.trigger("m.update")//eventBus触发"m:update"信息,通知View刷新
},
get:{获取数据}
}
View
View = {
el:需要刷新的元素,
html:`<div>显示在页面上的内容</div>`
init(){
v.el:需要刷新的元素
}
render(){渲染页面}
}
Controller
Controller = {
init(){
v.init()//view初始化
v.render()//第一次渲染
c.autoBindEvent()//自动事件绑定
eventBus.on("m:update",()=>{v.render()})//当eventBus触发"m:update"时View刷新
},
events:{事件以哈希表方式记录},
method(){
data = 改变后的新数据
m.update(data)
},
autoBindEvents(){自动绑定事件}
}EventBus
MVC各个部分之间的通信：M->V->C->M之间单向通信
- view传送指令到control
- control完成业务逻辑后，要求Model改变状态
- Model将新的数据发送到view，用户得到反馈。
MVP
MVP模式将controller改名为presenter，同时改变了通信方向。代码大部分分布在presenter上。
moder和view之间不再通信，通过presenter进行双向通信。
- M -> P-> V
- M < P < V
MVVM
MVVM模式将presenter改名为viewmodel,基本上与MVP没有区别。 MVVM的特点是采用了双向绑定：View的变动，自动反映在viewmodel，反之亦然。V和M之间双向通信。 Angular和Ember都采用这种模式。
二、关于EventBus
eventBus主要用于对象间通信。它使得M和V，C互相不知道对方的细节，但是却可以调用对方的功能。即满足最小知识原则。
import $ from 'jquery'
class EventBus {
constructor() {
this._eventBus = $(window)//为了获取一个对象object，里面有on方法用来监听事件，获取trigger方法来触发事件，实现组件之间的通信。
}
on(eventName, fn) {//绑定事件
return this._eventBus.on(eventName, fn)
}
trigger(eventName, data) {//trigger方法来触发事件
return this._eventBus.trigger(eventName, data)
}
off(eventName, fn) {//事件解除绑定
return this._eventBus.off(eventName, fn)
}
}
export default EventBus
三、表驱动编程
表驱动编程，将数据部分就和代码部分分离了，尽量减少if else语句，函数主体只是去表中查找然后输出结果。 避免了代码量线性增长，保证代码结构的复杂度可控。
events: {
"click #add1": "add",
"click #minus1": "minus",
"click #mul2": "mul",
"click #divide2": "div",
}, //把一堆的事件绑定，变成一个Hash table
四、如何理解模块化
模块化就是代码重构，用尽可能加简洁明了的代码，实现同样的功能。
第一层：单个项目的代码分类。
把一个项目上的代码按照数据、视图、控制进行分类，分别归入M,V,C。
第二层：将通用代码模块化，便于复用于多个项目。
把M,V,C中的代码分别进行重构，把通用的代码存入M.js、V.js、C.js，用export/import导出导入功能导入相应的项目中。
例如新建Model.js
class Model{数据部分的通用代码}
export default Model;
导出
import Model from "./base/Model.js";
导入
代码模块化提高了代码的可复用性和可移植性，便于代码管理和代码的重构，提高了工作效率。
