《JavaScript设计模式》初次笔记——wsdchong

《JavaScript设计模式》初次笔记

前言

设计模式一直久仰大名，但是没有去花时间去了解，于是今天特意花时间去看《JavaScript设计模式》（2013年6月出版）和w3cschool上的设计模式。然后做了一些笔记。

以《JavaScript设计模式》为目录，以w3cschool上的设计模式为补充。

讲的内容有三：设计模式、JavaScript设计模式、其他（模块化的JavaScript设计模式、jQuery设计模式、jQuery插件设计模式）。

学习目的：尝试性地了解JavaScript设计模式，方便看源码。

阅读感受，《JavaScript设计模式》讲除开头部分其他部分太官方和书面了，一点也不利于理解。连打个比方都不会。而且顺序也不合理，至少我没get到。不过w3cschool上的设计模式超出我的预期，总结得比《JavaScript设计模式》好。不过《JavaScript设计模式》的目录我还是比较能接受的。

设计模式

设计模式是解决软件设计中常见问题的可复用方案。不管是探索任何编程语言，这都是通用的。推荐设计模式的原因有二，一是设计模式是前人总结的经验，借助这些经验，我们可以解决棘手的问题和优化代码。二是设计模式还是我们用来描述解决方案的常用词汇，我们用设计模式的词汇去描述解决方案的时候会比描述语法更简单。

前置知识：JavaScript、闭包、原型继承等。

设计模式的原由

设计模式来源于土木工程师亚历山大的早期作品，总结他解决设计问题方面的经验，在1977年发表了《建筑设计语言》的文章。

之后软件工程师把亚历山大编写的建筑设计原则纳入设计模式的文档，成为开发人员改进编程技巧的语言。在1995年GoF出版《设计模式：可复用面向对象软件的基础》。

GoF发表的著作大大推进了设计模式概念在编程领域的发展，它描述了许多开发技术和误区，并列举了23面向对象设计中最常用的经典设计模式。

模式

模式是一种可复用的解决方案，设计模式有三大好处：模式是已经验证的解决方案，模式很容易被复用，模式复用表达力。

学习设计模式是需要先了解原始模型proto-pattern。原始模型是一种没有经过模式测试的设计模式，是值得在社区分享的特殊解决方案，不过产生时间短，还没有机会对其进行严格的审查。（设计模式需要经过严格的审查）

模式具有三法则：适合、实用、适用；

设计模式的结构、编写设计模式文件不细叙述了。（毕竟目前我只是想用模式，还不想去设计。）

反模式：如果认为模式代表最佳实践，那么反模式就代表教训。反模式是一种值得记录的不良设计。

设计模式类别

23种设计模式：大体分为三类

创建型模式，专注于处理对象创建机制。共五种：Prototype（原始模型模式），Singleton（单例模式），Factory（工厂模式）， Builder（建造模式）， Factory Method（工厂方法模式）。

结构型模式，与对象组合有关，用于找出在不同对象之间建立关系的简单方法。共七种：Facade（门面模式），Adapter（适配器模式），Decorator（装饰模式）， Flyweight（享元模式）， Proxy（代理模式）， Bridge（桥梁模式）， Composite（合成模式）。

行为型模式，专注于改善或简化系统中不同对象之间的通信。共十一种： Visitor（访问者模式），Iterator（迭代子模式）， Mediator（调停者模式），Observer（观察者模式），Command（命令模式）， Interpreter（解释器模式）， Memento（备忘录模式）， State（状态模式）， Strategy（策略模式），Template Method（模板方法模式）， Chain Of Responsibleity（责任链模式）

JavaScript设计模式

创建型模式，四种。Constructor（构造器）模式、Prototype（原始模型模式），Singleton（单例模式），Factory（工厂模式）

结构型模式，三种。Facade（外观模式），Decorator（装饰模式）， Flyweight（享元模式）。

行为型模式，三种。Mediator（中介者模式），Observer（观察者模式）、Command（命令模式）。

组件的模式，三种。Module、Revealing Module、Mixin。

MV模式，三种。MVC、MVP、MVVM

补充：后端架构模式，六种。业务代表模式、组合实体模式、数据访问对象模式、前端控制器模式、拦截过滤器模式、服务定位模式。

我觉得设计模式应该从定义、优点、缺点、适用场景这四个角度来讲。书本上的讲法太死板了，读得迷迷糊糊。（用途和实现我就没细说了）

创建型模式

Prototype模式：基于现有对象模板，通过克隆方式创建对象的模式。

优点：没看懂；性能提高，逃避构造函数的约束

缺点：没看懂；逃避构造函数的约束。

适用场景：资源优化场景；类初始化需要消耗许多资源，new产生一个对象需要非常繁琐的数据准备；

在实际项目中，原型模式很少单独出现，一般和工厂模式一起出现，通过clone的方法创建一个对象，然后由工厂方法提供给调用者。

与通过对一个类进行实例化来构造新对象不同的是，原型模式是通过拷贝一个现有对象生成新对象的。

Factory模式：可以在不对客户端暴露创建逻辑的情况下创建对象，通过一个共同接口来指向新创建的对象。

优点：不需要管对象是怎么构成的，只需要通过接口便可创建出对象。

缺点：每次增加一个产品时，都需要增加一个具体类和对象实现工厂，使得系统中的类的个数倍增，增加了复杂性。

适用场景：spring就用到工厂设计模式。

Singleton模式：类的实例化次数只能一次。

优点：在内存中只要一个实例，减少内存开销，避免资源多重占用；

缺点：没有接口、不能继承，一个类只需要关系内部逻辑，不用关系怎么实例。

适用场景：一个全局使用的类频繁地创建与销毁。

Constructor模式：奇奇怪怪的模式，在23中设计模式中就没提到，应该是JavaScript所特有的。书面解释是在内存已分配给对象的情况下，初始化新创建对象的特殊方法。mmp，什么意思。意淫式描述，就自己懂，别人都看不懂。

在这里优缺点我就不讲了，不懂。但是一些相关的说明可以写。

JavaScript不支持类的概念，但支持与对象一起用的constructor函数。通过在构造器前面加new关键字，就可以实例化一个新对象。

在构造器内，关键字this引用新创建的对象。

结构式模式

Facade模式：隐藏系统的复杂性，并向客户端提供一个客户端可以访问系统的接口。提供可用性。

优点：易于使用，实现该模式占用空间小。

缺点：改东西麻烦，继承重写都不合适。

适用场景：客户端不需要知道系统内部的复杂联系，整个系统只需提供一个"接待员"即可。去医院看病，可能要去挂号、门诊、划价、取药，让患者或患者家属觉得很复杂，如果有提供接待人员，只让接待人员来处理，就很方便。

Decorator模式：允许向一个现有的对象添加新的功能，同时又不改变其结构。它是作为现有的类的一个包装。

适用场景：扩展一个类的功能；动态增加功能，动态撤销。

Flyweight模式：重用现有的同类对象。用于减少创建对象的数量，以减少内存占用和提高性能。

适用场景：用于优化重复、缓慢及数据共享效率低的代码。

行为式模式

Command模式：一种数据驱动的设计模式。将一个请求封装成一个对象，从而使得开发者可以用不同的请求对客户进行参数化。

适用场景：GUI；CMD；

Observer模式：当一个对象被修改时，自动通知它的依赖对象。

懂好像是懂了，但优缺点是啥呀。

Mediator模式：用一个中介对象来封装一系列的对象交互，中介者不需要显式地互相引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。

适用场景：MVC框架，C就是M和V的中介者。

模块化的模式

Module模式：一种为类提供私有和公有封装的方法，在JavaScript中用于模拟类，使得一个单独的对象拥有公有/私有方法和变量，从而屏蔽来自全局作用域的特殊部分。

Module模式使用闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式，防止其泄漏至全局作用域，并与别的开发人员的接口冲突。

优点：封装不变部分，扩展可变部分；提供公共代码，便于维护。

缺点：每一个不同的实现都需要一个子类来实现，导致类的个数增加。

Revealing Module模式：对Module模式的改进，能在私有范围内简单定义所有的函数和变量，并返回一个匿名对象，它拥有指向私有函数的指针。

Mixin模式：在JavaScript中，继承Mixin看作为一种通过扩展收集功能的方式。使对象通过较低复杂性借用功能，非常适合JavaScript的对象原型。

MV架构模式

MVC模式：架构设计模式，通过关注点分离改进应用程序的组织。它强调业务数据Model与视图View分离，第三个组件Controller管理逻辑和用户输入。

在1979年设计出来，在1995年被深入阐述。

MVC实际上是Observer模式、Strategy模式和Composite模式的变体。它

是实现方式中也可以使用Factory模式和Template模式。

MVP模式：MVP是MVC的一种衍生模式，1990年被创造出来。跟适合Web框架。Presenter表示表示器，是一个包含用于View的用户界面业务逻辑的组件。

MVVM模式：一种基于MVC和MVP的架构模式，利用声明式数据绑定来实现把View工作从其他层分离。有助于同一个代码库中UI和开发工作的同时进行。2005年被发布。

优点：并行开发更容易；减少代码背后所需业务逻辑量；单元测试更容易；

缺点：对于简单UI，有些大材小用；数据绑定是声明式的，比命令式代码更难调试；在大型应用程序中，预先设计大量VM可能很困难。

补充

下面这六个模式，我以前用过，没想到这也是模式。

业务代表模式：用于对表示层和业务层的解耦；

数据访问对象模式：POJO、接口、接口实现类

前端控制器模式：控制器、调度器、视图

组合实体模式、拦截过滤器模式、服务定位器模式：略

其他

模块化的JavaScript设计模式

好烦，这本书讲的这部分内容，没法记笔记，也许我层次没达到，反正我是没看懂的。

AMD和CommonJS模块。

我打算参考《前端技术架构与工程》的第四章。在这里还是以设计模式为主，剩下的部分暂时不作过多深入。

jQuery中的设计模式

可惜这本书是2013年出版的，那时候流行的是jQuery，如果晚几年可能就会介绍React的设计模式。不过这里的 jQuery也可以借鉴，可是这里也过于书面了。

Composite模式、Adapter模式、Facade模式、Observer模式、Iterator模式、延迟初始化、Proxy模式、Builder模式；

jQuery插件设计模式

模式、Lightweight Start模式、完整的widget factory、嵌套命名空间插件模式、自定义事件插件模式（使用widget factory）、使用DOM to Object Bridge模式的原型继承、jQuery UI Widget Factory Bridge模式等；

全局选项和单词调用可重写选项、高可配和高可变的插件模式、插件超越模式；

命名空间模式、基础、高级；

总结

今天算是顺了一遍设计模式。《JavaScript设计模式》的前面一部分还好，后面的部分简直扎心，领悟不到，还好有w3cschool，可以看懂一些设计模式。不过还是很有帮助的。也算是揭开了设计模式的面纱，之前只是简单了解。

之前的23种设计模式我是听说过，创建型模式、结构型模式、行为模式有过大致了解。这次看了这本书和w3cschool，还补充了组件化模式、框架模式、数据访问模式。突然发现原来之前也用过模式，只是没像现在一样去定义。

我觉得学习设计模式最重要的是理解思想，只要领悟了宗旨，才能万变不离其宗。

设计模式的思想

我阅读之后的感受是，设计模式就是一种思想，提高可复用性和维护性，使开发高效，开发成本降低，危险降低。

博客园上的设计模式的理论思想 讲的不错。

同时学习设计模式必须学以致用，如果不用的话，不用深入。

设计模式的内容

范围	创建型	结构型	行为型
类	Factory Method（工厂方法）	Adapter(类) （适配器）	Interpreter（解释器） Template Method（模版方法）
对象	Abstract Factory（抽象工厂） Builder（建造者） Prototype（原型） Singleton（单例）	Bridge（桥接） Composite（组合） Decorator（装饰者） Façade（外观） Flyweight（享元） Proxy（代理）	Chain of Responsibility（职责链） Command（命令） Iterator（迭代器） Mediator（中介者） Memento（备忘录） Observer（观察者） State（状体） Strategy（策略） Visitor（访问者）

在CSDN上看到的这篇创建型模式、结构型模式和行为型模式之间的关系很不错。

1、创建型模式
软件设计的过程是循序渐进的，一步一步来的。在软件设计中对象的创建和对象的使用是分开的，因为对象的创建会消耗掉系统的很多资源，所以单独对对象的创建进行研究，从而能够高效地创建对象就是创建型模式要探讨的问题。这里就提供了多种创建型模式进行选择使用。
2、结构型模式
在解决了对象的创建问题之后，对象的组成以及对象之间的依赖关系就成了开发人员关注的焦点，因为如何设计对象的结构、继承和依赖关系会影响到后续程序的维护性、代码的健壮性、耦合性等。所以也有多种结构型模式可供开发人员选择使用。
3、行为型模式
在对象的结构和对象的创建问题都解决了之后，就剩下对象的行为问题了，如果对象的行为设计的好，那么对象的行为就会更清晰，它们之间的协作效率就会提高。

此外组件化、框架模块、架构模块都是根据设计模式使开发可复用和可维护。一切为了提高开发效率，便于维护。

以上就是我的初次笔记，设计模式没讲得通俗易懂，不过以后不断学习不断理解，再写自己的心得。

更新地址：GitHub

更多内容请关注：CSDN、GitHub、掘金