前端VUE的开发模式

注意&＃xff1a; 开发模式≠ 设计模式

开发模式&＃xff0c;就是一个开发项目的方式或者标准。

比较常见的三种开发模式&＃xff1a;MVC、MVP、MVVM

• MVC

MVC全名是Model View Controller&＃xff0c;是模型(model)&＃xff0d;视图(view)&＃xff0d;控制器(controller)的缩写&＃xff0c;一种软件设计典范&＃xff0c;用一种业务逻辑&＃xff08;C&＃xff09;、数据&＃xff08;M&＃xff09;、界面显示&＃xff08;V&＃xff09;分离的方法组织代码&＃xff0c;将业务逻辑聚集到一个部件里面&＃xff0c;在改进和个性化定制界面及用户交互的同时&＃xff0c;不需要重新编写业务逻辑。

1. 用户可以向 View 发送指令&＃xff08;DOM 事件&＃xff09;&＃xff0c;再由 View 直接要求 Model 改变状态。

2. 用户也可以直接向 Controller 发送指令&＃xff08;改变 URL 触发 hashChange 事件&＃xff09;&＃xff0c;再由Controller 发送给 View。

3. Controller 非常薄&＃xff0c;只起到路由的作用&＃xff0c;而 View 非常厚&＃xff0c;业务逻辑都部署在 View。

优点 ----- 高内聚 低耦合

耦合性低&＃xff0c;重用性高&＃xff0c;部署快&＃xff0c;可维护性高&＃xff0c;有利于软件工程化管理

缺点

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

• MVP

MVP是Model-View-Presenter简称&＃xff0c;MVP是从经典的模式MVC演变而来&＃xff0c;它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理&＃xff0c;Model提供数据&＃xff0c;View负责显示&＃xff1a;

1. 各部分之间的通信&＃xff0c;都是双向的。

2. View 与 Model 不发生联系&＃xff0c;都通过 Presenter 传递。可以将一个Presenter用于多个视图&＃xff0c;而不需要改变Presenter的逻辑。这个特性非常的有用&＃xff0c;因为视图的变化总是比模型的变化频繁。

3. View 非常薄&＃xff0c;不部署任何业务逻辑&＃xff0c;称为"被动视图"&＃xff08;Passive View&＃xff09;&＃xff0c;即没有任何主动性&＃xff0c;而 Presenter非常厚&＃xff0c;所有逻辑都部署在那里。

缺点

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

• MV VM

  • M&＃xff1a;&＃xff08;model&＃xff09;普通的Javascript数据对象

  • V&＃xff1a;&＃xff08;view&＃xff09;前端展示页面

  • VM&＃xff1a;&＃xff08;ViewModel&＃xff09;用于双向绑定数据与页面&＃xff0c;对于我们的课程来说&＃xff0c;就是vue的实例

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

vue使用MVVM响应式编程模型&＃xff0c;避免直接操作DOM , 降低DOM操作的复杂性。

优点

• 低耦合。视图&＃xff08;View&＃xff09;可以独立于Model变化和修改&＃xff0c;一个ViewModel可以绑定到不同的View上&＃xff0c;当View变化的时候Model可以不变&＃xff0c;当Model变化的时候View也可以不变。

• 可重用性。你可以把一些视图逻辑放在一个ViewModel里面&＃xff0c;让很多view重用这段视图逻辑。

• 可测试。界面素来是比较难于测试的&＃xff0c;而现在测试可以针对ViewModel来写。