设计模式

MVP设计模式

　　传统的前端开发用的是MVP设计模式，代码分为三部分，即数据层（Model）、呈现层/控制层（Presenter）、视图层（View）

　　

 　　例如下方的一个jQuery的案例

　　

　　这里的M层比较弱，因为没有用ajax获取远程数据

　　V层可以理解成HTML结构，用来负责页面的显示内容

　　P层理解成jQuery代码，用来响应图层的指令，处理业务逻辑，是三层中最核心的一层，而业务逻辑也是View和Model的中转站（参考最开始的示意图）

　　但是这种设计模式的问题在，大多时候的代码都是在操作DOM

 

MVVM设计模式

　　Vue框架用的就是MVVM设计模式，如下图

　　

　　其中的M层负责存储数据，视图层V负责显示数据，中间的ViewModel层为Vue自带的一层

　　编写代码时，重点在于模型层Model和视图层View，只要固定写好View层，通过M层数据的改变，VM层自动改变，而不需要关注VM具体是如何实现的（实际上是用了ES5里的Object.defindeProperties和虚拟DOM）

　　这种设计模式的重点就在模型层Model