【JS】开发模式

开发模式

开发模式，就是一个开发项目的方式或者标准。
比较常见的三种开发模式：MVC、MVP、MVVM

• 这三者的相同部分是MV(Model-View)。
• 不同部分是C(Controller)、P(Presenter)、VM(View-Model)
• 模型(Model)层 ：数据保存
• 用于封装应用程序的业务逻辑相关的数据以及对数据处理的方法
• 视图(View)层：用户界面
• 作为视图层，负责数据的展示

MVC

前言：上个世纪70年代,一位叫Trygve Reenskaug的工程师为Smalltalk（一种编程语言）设计了MVC（Model-View-Controller）这种架构模式，极大地降低了GUI应用程序的管理难度，而后被大量用于构建桌面和服务器端应用程序。

• 一种软件设计典范，将MVC三者分离的方法组织代码
• MVC 全称是：Model View Controller
• MV(Model-View)：数据+视图
• 控制器(Controller)：业务逻辑
  

1. 用户可以向 View 发送指令（dom事件），再由 View 直接要求 Model 改变状态
2. 用户也可以直接向 Controller 发送指令（改变 url 触发 hashChange 事件），再由 Controller 发送给 View
3. Controller 非常薄，只起路由的作用，而 View 非常厚，业务逻辑都部署在 View

优点：

• 将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
• 耦合性低，重用性高，部署快，可维护性高，有利于软件工程化管理

缺点：

• 由于模型model和视图view要严格的分离，给前端程序带来了很大的困难，每次操作需要彻底的测试

MVP

前言：MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出

• MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向
• MVP 全称是：Model-View-Presenter
• MV(Model-View)：数据+视图
• Controller/Presenter：处理逻辑

1. View与Presenter、Presenter与Model的通信，都是双向的
2. View 与 Model 不发生联系，都通过 Presenter 传递。可以将 Presenter 用于多个视图，而不需要改变 Presenter 的逻辑。这个特征非常有用，因为视图的变化总是比模型的变化频繁
3. View 非常薄，不部署任何业务逻辑，称为“被动视图”（passive view），即没有任何主动性，而 Presenter 非常厚，所以逻辑部署在那里

缺点：

• 由于对视图的渲染放在了Presenter中，所以视图和Presenter的交互会过于频繁。一旦视图需要变更，那么Presenter也需要变了。

MVVM

前言：MVVM（Model-View-ViewModel）最早由微软提出。ViewModel指 “Model of View”——视图的模型。这个概念曾在一段时间内被前端圈热炒，以至于很多初学者拿jQuery和Vue做对比…

• MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
• 唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
• 这种模式下，页面输入改变数据，数据改变影响页面数据展示与渲染

---

• MVVM 全称是：Model-View-ViewModel
• MV (Model-View)：数据+视图
• VM (ViewModel)：用于双向绑定数据与页面，可以看做是 vue 的实例
• vue 就是使用MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

优点：

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

其他资料

点击跳转：设计模式