1.MVC的基础理念

MVC是一种设计模式的理念，意在对代码结构进行优化，减少重复代码，防止写出面条式代码。
MVC大体分为三个部分：

M-Model(数据类型)

负责操作所有数据，需要把所有操作数据的代码都归类在Model下面：
Model = { date:{需要用到的数据}, create():{增加数据}, delete():{删除数据}, update():{更新数据}, get():{获取数据} }

V-View(视图)

负责所有UI界面:
View = { el:null,//视图容器 html:`......`//视图模板 init(){初始化视图}， render(){渲染页面} }

C-Controller(控制器)

负责其他所有内容:(下面主要是用户操作的控制和页面渲染的控制)
Controller = { init(){ v.init() //View初始化 v.render() //渲染页面 c.autoBindEvents() //绑定自动事件 eventBus.on('m:update',()=>{v.render()})//当eventBus触发时就重新渲染页面 }, events:{以哈希表形式存储事件}, method(){ date = 操作改变之后的新数据 m.update(date) }, autoBindEvents(){自动绑定功能} }

2.EventBus

EventBus被称为事件总线，主要用于组件之间的监听和通信。
比方说M数据类型里面的内容更新了，只需要使用tigger()方法在更新时输出一个信号，C里面的on()方法就可以收到这个信号，对视图进行渲染或操作。
const eventBus = **_$_**(**_window_**) //引入EventBus
eventBus.trigger('m:updated') //触发tigger时发出信号m:updated
eventBus.on('m:update',()=>{v.render(m.date.n)}) //on事件监听到m:updated之后就会获取到更新之后
的数据重新渲染页面

3.表驱动编程

表驱动编程就是就是把关键信息整理为一个表，而不是使用逻辑语句，逻辑语句在逻辑简单时会写的比较简单易懂，但是当逻辑复杂时，就会显得非常臃肿，会有大量重复代码
如下列代码中，代码重复度较高
bindEvents(){ v.el.on('click','#add1',()=>{ m.date.n += 1 v.render(m.date.n) }) v.el.on('click','#add1',()=>{ m.date.n -= 1 v.render(m.date.n) }) v.el.on('click','#add1',()=>{ m.date.n *= 1 v.render(m.date.n) }) v.el.on('click','#add1',()=>{ m.date.n /= 1 v.render(m.date.n) }) }
只需要把关键的内容提取出来，做成一个哈希表，就可以让数据和逻辑更清晰，且不显得臃肿
events:{ 'click #add1' : 'add', 'click #minus1' : 'minus', 'click #mul2' : 'mul', 'click #divide2' : 'div' }, add(){ m.update(date:(n:m.date.n +1)) }, minus(){ m.update(date:(n:m.date.n -1)) }, mul(){ m.update(date:(n:m.date.n *2)) }, div(){ m.update(date:(n:m.date.n /2)) }

4.模块化

模块化就是把所有所有内容分为不同的块，各自只需要负责处理自身模块的代码就行了，主体只需要引入对应模块的JS文件。
模块化的好处有很多，首先因为分为不同的块，所以相互之间是独立的，不用担心影响到其他模块，就算是不同模块使用不同技术也是可以的。而且这样文件就比较简洁，修改时只需要在目录里面找到对应模块的文件进去修改就行了，既整洁又方便，所有代码都应该进行模块化处理。

前端知识总结

浅析MVC