《JavaScript设计模式 张》整理

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

1、建立型设计模式

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

1）简单工厂

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

两种实现方式，第一种是经过类实例化对象建立，第二种是建立一个新对象而后包装加强其属性和功能。

demo代码。

 

2）工厂方法

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

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

demo代码。

 

3）抽象工厂

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

用它做为父类来建立一些子类。

demo代码。

 

4）建造者

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

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

demo代码。

 

5）原型模式

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

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

demo代码。

 

6）单例模式

只容许实例化一次的对象类。有时咱们也用一个对象来规划一个命名空间，层次分明的管理对象上的属性和方法。

demo代码。

 

2、结构型设计模式

1）外观模式

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

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

demo代码。

 

2）适配器模式

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

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

dmeo代码。

 

3）代理模式

因为一个对象不能直接引用另外一个对象，因此须要代理对象在这两个对象之间起到中介的做用。

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

 

4）装饰者模式

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

demo代码。

 

5）桥接模式

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

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

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

demo代码。

 

6）组合模式

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

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

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

demo代码。

 

7）享元模式

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

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

demo代码。

 

3、行为型设计模式

1）模版方法模式

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

提示框归一化。

 

2）观察者模式

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

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

demo代码。

 

3）状态模式

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

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

demo代码。

 

4）策略模式

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

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

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

 

5）职责链模式

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

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

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

 

6）命令模式

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

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

demo代码。

 

7）访问者模式

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

 

8）中介者模式

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

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

 

9）备忘录模式

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

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

 

10）迭代器模式

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

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

demo代码。

 

4、技巧型设计模式

1）委托模式

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

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

demo代码。

 

2）节流模式

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

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

 

3）简单模版模式

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

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

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

demo代码。

 

4）惰性模式

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

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

demo代码。

 

5）参与者模式

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

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

demo代码。

 

6）等待者模式

经过对多个异步进程监听，来触发将来发生的动做。

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

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

demo代码。

 

5、架构型设计模式

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层规范格式，建立视图，便可完成一个复杂的页面开发。