本文已参与「新人创作礼」活动，一起开启掘金创作之路
前言
在面试和复习过程中总结的一些前端知识点，记录下来，风格较简洁，尽量涵盖内容要点和简单例子。本文是前端面试系列第十篇：设计模式，持续更新...
一、常用的设计模式
- 策略模式：把内部逻辑复杂的功能梳理成一条条的策略，避免写一堆 if 和 else，方便组合和复用。
- 发布-订阅模式：一个模块发布消息，其它模块订阅消息进行相应的回调处理，适用于各个模块相对独立的情况。
- 装饰器模式： 是为了给一个函数赋能，增强它的某种能力，例如 react 高阶组件就是装饰器模式，它传入一个组件，对它进行加工后返回一个新的组件。
- 适配器模式：相当于电脑转接头，比如，一个组件是纯展示的，但是它的数据来自不同的渠道，数据格式不同，这时可以写一个适配器，把不同的数据格式转换成统一的数据格式传给展示组件。
- 单例模式：即一个类只有一个实例，比如登陆弹框，无论我们点击多少次登陆按钮，界面上始终只会显示一个登陆弹框，无法再创建第二个。
二、MVC
MVC，MVP 和 MVVM 都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。
Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。View作为视图层，主要负责数据的展示。Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。
三、MVP
MVP（Model-View-Presenter） 是 MVC 模式的改良，和 MVC 的相同之处在于：Controller/Presenter 负责业务逻辑，Model 管理数据，View 负责显示。
与 MVC 相比，MVP 模式通过解耦 View 和 Model，完全分离视图和模型使职责划分更加清晰；由于 View 不依赖 Model，可以将 View 抽离出来做成组件，它只需要提供一系列接口提供给上层操作。
四、MVVM
告别了操作 DOM 的思维，换上了数据驱动页面的思想，无论 React 还是 Vue 还是最新的 Angular 都是这种模式。
实现方式通过数据劫持+发布订阅模式，真正实现其实靠的也是 ES5 中提供的 Object.defineProperty。
View 和 Model 同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责。
