JavaScript设计模式

一、创建型设计模式

1.简单工厂模式

2.工厂方法模式

3.抽象工厂模式

4.建造者模式

5.原型模式

6.单例模式

二、结构型设计模式

1.外观模式

2.适配器模式

3.代理模式

4.装饰者模式

5.桥接模式

6.组合模式

7.享元模式

三、行为型设计模式

1.模板方法模式

2.观察者模式

3.状态模式

4.策略模式

5.职责链模式

6.命令模式

7.访问者模式

8.中介者模式

9.备忘录模式

10.迭代器模式

11.解释器模式

四、技巧性设计模式

1.链模式

2.委托模式

3.数据访问对象模式

4.节流模式

5.简单模板模式

6.惰性模式

7.参与者模式

8.等待者模式

五、架构型设计模式

1.同步模块模式

SMD (Synchronous Module Definition)

2.异步模块模式

AMD (Asynchronous Module Definition)

3.Widge模式

模块化开发，页面粒度化，一个组件对应一个文件，包括创建视图，添加相应功能

4.MVC模式

Model-View-Controller

模型层-视图层-业务逻辑层

应用场景：侧边导航栏

模型层：从服务器端获得响应式数据

视图层：容器模板，图标模板

业务逻辑层：获取视图元素，为元素绑定事件交互，添加动画特效

5.MVP模式

Model-View-Presenter

模型层-视图层-管理层

特点：View层不直接引用Model层的数据，通过Presenter实现数据访问,M层-V层完全解耦，修改互不影响，管理层决定视图层的页面创建

应用场景：侧边导航栏添加新消息提醒

模型层：从服务器端获得响应式数据

视图层：容器模板，图标模板

管理层：获取视图元素，为元素绑定事件交互，添加动画特效

6.MVVM模式

Model-View-ViewModel

模型层-视图层-视图模型层

特点：V层元素会被VM层监听

MVVM模式是由MVC、MVP模式演变而来，MVVM模式是对视图模型层（ViewModel）的高度抽象。