前端面试题之框架题

1、如何理解MVC、MVP、MVVM模式？

MVC（Model、view、Controller）

• 视图（View）：用户界面。
• 控制器（Controller）：业务逻辑
• 模型（Model）：数据保存

M是指业务数据, V是指用户界面, C则是控制器. 在具体的业务场景中, C作为M和V之间的连接, 负责获取输入的业务数据, 然后将处理后的数据输出到界面上做相应展示, 另外, 在数据有所更新时, C还需要及时提交相应更新到界面展示. 在上述过程中, 因为M和V之间是完全隔离的, 所以在业务场景切换时, 通常只需要替换相应的C, 复用已有的M和V便可快速搭建新的业务场景. MVC因其复用性, 大大提高了开发效率, 现已被广泛应用在各端开发中。可以看下图加深理解：

MVC的缺点在于并没有区分业务逻辑和业务展示, 这对单元测试很不友好。

MVP（model、view、presenter）

针对以上缺点做了优化, 它将业务逻辑和业务展示也做了一层隔离, 对应的就变成了MVCP。

M和V功能不变, 原来的C现在只负责布局, 而所有的业务逻辑全都转移到了P层。P层处理完了业务逻辑，如果要更改view的显示，那么可以通过回调来实现，这样可以减轻耦合，同时可以单独测试P层的业务逻辑。可以看下图加深理解：

MVP的变种及定义比较多，但是最终广为人知的是Martin Fowler 的发表的关于Presentation Model描述，也就是下面将要介绍的MVP。具体看下面这篇文章：Martin Fowler 发表的 Presentation Model 文章

MVP从视图层中分离了行为（事件响应）和状态（属性，用于数据展示），它创建了一个视图的抽象，也就是presenter层，而视图就是P层的『渲染』结果。P层中包含所有的视图渲染需要的动态信息，包括视图的内容（text、color）、组件是否启用（enable），除此之外还会将一些方法暴露给视图用于某些事件的响应。

MVVM(Model-View-ViewModel)

• View：界面
• Model：数据模型
• ViewModel：作为桥梁负责沟通 View 和 Model
• 

优点：

• 分离视图 (View) 和模型 (Model)，降低代码耦合，提高视图或逻辑的重用性
• 自动更新 DOM，避免了对 DOM 的频繁操作
• 提高可测试性

缺点：

• Bug 难以调试