《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书《JavaScript设计模式》，这本书中描述了更多的设计模式。

一、创建型设计模式

包括简单工厂、工厂方法、抽象工厂、建造者、原型和单例模式。

1）简单工厂

又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。

两种实现方式，第一种是通过类实例化对象创建，第二种是创建一个新对象然后包装增强其属性和功能。

demo代码。

2）工厂方法

通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。

将工厂方法看作是一个实例化对象的工厂类。

demo代码。

3）抽象工厂

通过对类的工厂抽象使其业务用于对产品类簇的创建，而不负责创建某一类产品的实例。

用它作为父类来创建一些子类。

demo代码。

4）建造者

将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。

它更关心的是创建这个对象的整个过程，甚至于创建对象的各个细节。

demo代码。

5）原型模式

用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。

原型模式就是将可复用的、可共享的、耗时大的从基类中提取出来，放在其原型中，子类通过组合继承或寄生继承将方法和属性继承下来。

demo代码。

6）单例模式

只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条的管理对象上的属性和方法。

demo代码。

二、结构型设计模式

1）外观模式

为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。

在JS中有时也会用于对底层结构兼容性做统一封装来简化用户使用。

demo代码。

2）适配器模式

将一个类（对象）的接口（方法或属性）转化成另外一个接口，满足用户需求，使类（对象）之间接口的不兼容问题通过适配器解决。

适配异类框架，参数适配器，适配数据。

dmeo代码。

3）代理模式

由于一个对象不能直接引用另一个对象，所以需要代理对象在这两个对象之间起到中介的作用。

站长统计、JSONP、代理模版。

4）装饰者模式

在不改变原对象的基础上，通过对其进行包装拓展（添加属性或方法）使原有对象能够满足更复杂的需求。

demo代码。

5）桥接模式

在系统沿着多个纬度变化的同时，不增加其复杂度并已达到解耦。

提取共同点，事件与业务逻辑之间的桥梁，多元化对象。

将实现层（如元素的绑定事件）与抽象层（如修饰页面UI逻辑）解耦分离，使两部分可以独立变化。

demo代码。

6）组合模式

又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。

组合模式使得用户对单个对象和组合对象的使用具有一致性。

组合对象类通过继承同一个父类使其具有统一的方法，此时单体成员和组合成员行为表现就比较一致。

demo代码。

7）享元模式

运用共享技术有效的支持大量的细粒度对象，避免对象间拥有相同内容造成多余的开销。

享元对象，享元动作。将共有的方法和数据提取，以提高页面效率。

demo代码。

三、行为型设计模式

1）模版方法模式

父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的结构算法的同时可重新定义算法中某些步骤的实现。

提示框归一化。

2）观察者模式

又被称作发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。

最大的作用是解决类或对象之间的耦合，解决两个相互依赖的对象，使其依赖于观察者的消息机制。

demo代码。

3）状态模式

当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象。

状态模式既是解决程序中臃肿的分支判断语句问题，将每个分支转化为一种状态独立出来，方便每种状态的管理又不至于每次执行时遍历所有分支。

demo代码。

4）策略模式

将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定的独立性，不会随客户端变化而变化。

策略模式使得算法脱离于模块逻辑而独立管理，使我们专心研发算法，而不必受模块逻辑所约束。

对分支语句的优化目前有3种，工厂方法、状态模式与策略模式。

5）职责链模式

解决请求的发送者与请求的接收者之间的耦合，通过职责链上的多个对象分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。

分解需求，把每件事情分解成一个模块对象处理，需求分解成相互独立的部分，分工合作只做自己份内的事情，无关的事情传到下一个对象中，直到完成。

请求模块==》响应数据适配模块==》创建组件模块==》单元测试

6）命令模式

将创建模块的逻辑封装在一个对象里，这个对象提供一个参数化的请求接口，通过调用这个接口并传递参数实现对象内部的一些方法。

封装功能，提供简单而高效的API，解决命令的发起者和命令的执行者之间的耦合。

demo代码。

7）访问者模式

针对于对象结构中的元素，定义在不改变对象的前提下访问结构中元素的新方法。

8）中介者模式

通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。

观察者模式中的订阅者是相互的，而中介者模式订阅者是单向的，消息统一由中介者对象发布，所有的订阅者间接的被中介者管理。

9）备忘录模式

在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便日后对象使用，或者对象恢复恢复到以前的某个状态。

缓存数据，MVC中的M部分，很多时候都会缓存一些数据。

10）迭代器模式

在不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素。

迭代器是优化循环语句的一种可行方案，使得程序清晰易读，解决了对象的使用者与对象内部结构之间的耦合。

demo代码。

四、技巧型设计模式

1）委托模式

多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。

委托父元素、预言未来、数据分发。

demo代码。

2）节流模式

对重复的业务进行节流控制，执行最后一次操作并取消其他操作，以提高性能。

节流器、图片延迟加载、统计打包。

3）简单模版模式

通过格式化字符串拼凑出视图，避免创造视图时大量节点操作。

用正则匹配方式去格式化字符串性能要远高于拼接视图执行性能。

包括三部分：字符串模版库，格式化方法，字符串拼接操作。

demo代码。

4）惰性模式

减少每次代码执行时的重复性分支判断，通过对对象重定义来屏蔽原对象中的分支判断。

惰性模式分为两种：第一种文件加载后立即执行对象方法来重定义，第二种是当第一次使用方法对象时来重定义。

demo代码。

5）参与者模式

在特定的作用域中执行给定的函数，并将参数原封不动地传递。

参与者模式是两种技术的结晶，函数绑定和函数柯里化。

demo代码。

6）等待者模式

通过对多个异步进程监听，来触发未来发生的动作。

等待者模式意在处理耗时比较长的操作，定时器操作、异步操作等。

在耗时操作内埋入监听者对象，在某个时刻改变监听者对象的状态，当所有监听者对象都是已完成的时候，执行完成回调，如果有一个是中断，就执行中断回调。

demo代码。

五、架构型设计模式

1）同步模块

请求发出后，无论模块是否存在，立即执行后续的逻辑，实现模块开发中对模块的立即使用。

demo代码。

2）异步模块

AMD，请求发出后，继续其他业务逻辑，直到模块加载完成后执行后续的逻辑，实现模块开发中对模块加载完成后的引用。

3）MVC

用一种将业务逻辑、数据、视图分离的方式组织架构代码。

在视图层创建界面的时候，会用到模型层内的数据，使这两层耦合在一起。降低了视图创建的灵活性和复用性。

demo代码。

4）MVP

View层不直接引用Model层的数据，而是通过Presenter层实现对Model层的数据访问。

所有层次的交互都发生在Presenter层中，解决View层和Model层之间的耦合。

但视图层还不够独立，创建怎样的视图由Presenter控制。

demo代码。

5）MVVM

为View层量身订做一套ViewMode层，并在ViewMode中创建属性和方法，为View层绑定Model层的数据，并实现交互。

一个ViewMode可以对应多个View层或Model层，ViewMode中的代码变得高度复用。

View层的独立开发，可以使那些不懂JS的人，只需了解HTML内容并按照View层规范格式，创建视图，即可完成一个复杂的页面开发。

demo代码。