浅析前端开发中的 MVC/MVP/MVVM 模式

浅析前端开发中的 MVC/MVP/MVVM 模式

学习笔记

原文链接：https://juejin.im/post/593021272f301e0058273468
js 设计模式

在原文的基础上，做了一些记录

MVC

描述：Model&View 使用了观察者的设计模式；View&Controller 使用的是策略模式。

优缺点：MVC模式的业务逻辑主要集中在Controller，而前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿。而且MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller的复用性成了问题。

MVP

描述： 优化MVC存在的弊端，即MVC 的升级版。

1.MVC中V可以访问M，但在MVP中V不直接使用M
2.与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰

优缺点：Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难。而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，它不得不过多关注特定的视图，一旦视图需求发生改变，Presenter也需要改动。

MVVM

描述：MVVM把View和Model的同步逻辑自动化了。

与MVP不同，没有了View为Presenter提供的接口，之前由Presenter负责的View和Model之间的数据同步交给了ViewModel中的数据绑定进行处理，当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新。

优缺点：因为在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性。

作者：扎克悟空
链接：https://juejin.im/post/593021272f301e0058273468
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。