摘要

适读人群 ：适合初中级Web前端开发人员阅读。
腾讯前端Alloy Team团队出品，资深前端工程师曾探力作
全面涵盖专门针对JavaScript的16个设计模式
深入剖析面向对象设计原则、编程技巧及代码重构
设计模式是软件设计中经过了大量实际项目验证的可复用的优秀解决方案，它有助于程序员写出可复用和可维护性高的程序。许多优秀的JavaScript开源框架都运用了不少设计模式，越来越多的程序员从设计模式中获益，也许是改善了自己编写的某个软件，也许是更好地理解了面向对象的编程思想。无论如何，系统地学习设计模式都会令你受益匪浅。

JavaScript设计模式与开发实践 内容简介

《JavaScript设计模式与开发实践》在尊重《设计模式》原意的同时，针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式，讲解了JavaScript面向对象和函数式编程方面的基础知识，介绍了面向对象的设计原则及其在设计模式中的体现，还分享了面向对象编程技巧和日常开发中的代码重构。《JavaScript设计模式与开发实践》将教会你如何把经典的设计模式应用到JavaScript语言中，编写出优美高效、结构化和可维护的代码。

JavaScript设计模式与开发实践 目录

第一部分　基础知识

第1章　面向对象的JavaScript

1.1 动态类型语言和鸭子类型

1.2 多态

1.3 封装

1.4 原型模式和基于原型继承的JavaScript对象系统

第2章　this、call和apply

2.1 this

2.2 call和apply

第3章　闭包和高阶函数

3.1 闭包

3.2 高阶函数

3.3 小结

第二部分 设计模式

第4章　单例模式

4.1 实现单例模式

4.2 透明的单例模式

4.3 用代理实现单例模式

4.4 JavaScript中的单例模式

4.5 惰性单例

4.6 通用的惰性单例

4.7 小结

第5章　策略模式

5.1 使用策略模式计算奖金

5.2 JavaScript 版本的策略模式

5.3 多态在策略模式中的体现

5.4 使用策略模式实现缓动动画

5.5 更广义的"算法"

5.6 表单校验

5.7 策略模式的优缺点

5.8 一等函数对象与策略模式

5.9 小结

第6章　代理模式

6.1 第一个例子--小明追MM的故事

6.2 保护代理和虚拟代理

6.3 虚拟代理实现图片预加载

6.4 代理的意义

6.5 代理和本体接口的一致性

6.6 虚拟代理合并HTTP 请求

6.7 虚拟代理在惰性加载中的应用

6.8 缓存代理

6.9 用高阶函数动态创建代理

6.10 其他代理模式

6.11 小结

第7章　迭代器模式

7.1 jQuery 中的迭代器

7.2 实现自己的迭代器

7.3 内部迭代器和外部迭代器

7.4 迭代类数组对象和字面量对象

7.5 倒序迭代器

7.6 中止迭代器

7.7 迭代器模式的应用举例

7.8 小结

第8章　发布-订阅模式

8.1 现实中的发布-订阅模式

8.2 发布-订阅模式的作用

8.3 DOM 事件

8.4 自定义事件

8.5 发布-订阅模式的通用实现

8.6 取消订阅的事件

8.7 真实的例子--网站登录

8.8 全局的发布-订阅对象

8.9 模块间通信

8.10 必须先订阅再发布吗

8.11 全局事件的命名冲突

8.12 JavaScript实现发布-订阅模式的便利性

8.13 小结

第9章　命令模式

9.1 命令模式的用途

9.2 命令模式的例子--菜单程序

9.3 JavaScript中的命令模式

9.4 撤销命令

9.5 撤消和重做

9.6 命令队列

9.7 宏命令

9.8 智能命令与傻瓜命令

9.9 小结

第10章　组合模式

10.1 回顾宏命令

10.2 组合模式的用途

10.3 请求在树中传递的过程

10.4 更强大的宏命令

10.5 抽象类在组合模式中的作用

10.6 透明性带来的安全问题

10.7 组合模式的例子--扫描文件夹

10.8 一些值得注意的地方

10.9 引用父对象

10.10 何时使用组合模式

10.11 小结

第11章　模板方法模式

11.1 模板方法模式的定义和组成

11.2 第一个例子--Coffee or Tea

11.3 抽象类

11.4 模板方法模式的使用场景

11.5 钩子方法

11.6 好莱坞原则

11.7 真的需要"继承"吗

11.8 小结

第12章　享元模式

12.1 初识享元模式

12.2 内部状态与外部状态

12.3 享元模式的通用结构

12.4 文件上传的例子

12.5 享元模式的适用性

12.6 再谈内部状态和外部状态

12.7 对象池

12.8 小结

第13章　职责链模式

13.1 现实中的职责链模式

13.2 实际开发中的职责链模式

13.3 用职责链模式重构代码

13.4 灵活可拆分的职责链节点

13.5 异步的职责链

13.6 职责链模式的优缺点

13.7 用AOP 实现职责链

13.8 用职责链模式获取文件上传对象

13.9 小结

第14章　中介者模式

14.1 现实中的中介者

14.2 中介者模式的例子--泡泡堂游戏

14.3 中介者模式的例子--购买商品

14.4 小结

第15章　装饰者模式

15.1 模拟传统面向对象语言的装饰者模式

15.2 装饰者也是包装器

15.3 回到JavaScript 的装饰者

15.4 装饰函数

15.5 用AOP 装饰函数

15.6 AOP 的应用实例

15.7 装饰者模式和代理模式

15.8 小结

第16章　状态模式

16.1 初识状态模式

16.2 状态模式的定义

16.3 状态模式的通用结构

16.4 缺少抽象类的变通方式

16.5 另一个状态模式示例--文件上传

16.6 状态模式的优缺点

16.7 状态模式中的性能优化点

16.8 状态模式和策略模式的关系

16.9 JavaScript版本的状态机

16.10 表驱动的有限状态机

16.11 实际项目中的其他状态机

16.12 小结

第17章　适配器模式

17.1 现实中的适配器

17.2 适配器模式的应用

17.3 小结

第三部分 设计原则和编程技巧

第18章　单一职责原则

18.1 设计模式中的SRP原则

18.2 何时应该分离职责

18.3 违反SRP原则

18.4 SRP 原则的优缺点

第19章　最少知识原则

19.1 减少对象之间的联系

19.2 设计模式中的LKP原则

19.3 封装在LKP 原则中的体现

第20章　开放-封闭原则

20.1 扩展window.onload函数

20.2 开放和封闭

20.3 用对象的多态性消除条件分支

20.4 找出变化的地方

20.5 设计模式中的开放-封闭原则

20.6 开放-封闭原则的相对性

20.7 接受第一次愚弄

第21章　接口和面向接口编程

21.1 回到Java的抽象类

21.2 interface

21.3 JavaScript 语言是否需要抽象类和interface

21.4 用鸭子类型进行接口检查

21.5 用TypeScript 编写基于interface的命令模式

第22章　代码重构

22.1 提炼函数

22.2 合并重复的条件片段

22.3 把条件分支语句提炼成函数

22.4 合理使用循环

22.5 提前让函数退出代替嵌套条件分支

22.6 传递对象参数代替过长的参数列表

22.7 尽量减少参数数量

22.8 少用三目运算符

22.9 合理使用链式调用

22.10 分解大型类

22.11 用return退出多重循环

参考文献

JavaScript设计模式与开发实践 精彩文摘

JavaScript没有提供传统面向对象语言中的类式继承，而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript也没有在语言层面提供对抽象类和接口的支持。正因为存在这些跟传统面向对象语言不一致的地方，我们在用设计模式编写代码的时候，更要跟传统面向对象语言加以区别。所以在正式学习设计模式之前，我们有必要先了解一些JavaScript在面向对象方面的知识。

1.1　动态类型语言和鸭子类型

编程语言按照数据类型大体可以分为两类，一类是静态类型语言，另一类是动态类型语言。

静态类型语言在编译时便已确定变量的类型，而动态类型语言的变量类型要到程序运行的时候，待变量被赋予某个值之后，才会具有某种类型。

静态类型语言的优点首先是在编译时就能发现类型不匹配的错误，编辑器可以帮助我们提前避免程序在运行期间有可能发生的一些错误。其次，如果在程序中明确地规定了数据类型，编译器还可以针对这些信息对程序进行一些优化工作，提高程序执行速度。

静态类型语言的缺点首先是迫使程序员依照强契约来编写程序，为每个变量规定数据类型，归根结底只是辅助我们编写可靠性高程序的一种手段，而不是编写程序的目的，毕竟大部分人编写程序的目的是为了完成需求交付生产。其次，类型的声明也会增加更多的代码，在程序编写过程中，这些细节会让程序员的精力从思考业务逻辑上分散开来。

动态类型语言的优点是编写的代码数量更少，看起来也更加简洁，程序员可以把精力更多地放在业务逻辑上面。虽然不区分类型在某些情况下会让程序变得难以理解，但整体而言，代码量越少，越专注于逻辑表达，对阅读程序是越有帮助的。

动态类型语言的缺点是无法保证变量的类型，从而在程序的运行期有可能发生跟类型相关的错误。这好像在商店买了一包牛肉辣条，但是要真正吃到嘴里才知道是不是牛肉味。

在JavaScript中，当我们对一个变量赋值时，显然不需要考虑它的类型，因此，JavaScript是一门典型的动态类型语言。

动态类型语言对变量类型的宽容给实际编码带来了很大的灵活性。由于无需进行类型检测，我们可以尝试调用任何对象的任意方法，而无需去考虑它原本是否被设计为拥有该方法。

这一切都建立在鸭子类型（duck typing）的概念上，鸭子类型的通俗说法是：“如果它走起路来像鸭子，叫起来也是鸭子，那么它就是鸭子。”

我们可以通过一个小故事来更深刻地了解鸭子类型。

从前在JavaScript王国里，有一个国王，他觉得世界上最美妙的声音就是鸭子的叫声，于是国王召集大臣，要组建一个1000只鸭子组成的合唱团。大臣们找遍了全国，终于找到999只鸭子，但是始终还差一只，最后大臣发现有一只非常特别的鸡，它的叫声跟鸭子一模一样，于是这只鸡就成为了合唱团的最后一员。

这个故事告诉我们，国王要听的只是鸭子的叫声，这个声音的主人到底是鸡还是鸭并不重要。鸭子类型指导我们只关注对象的行为，而不关注对象本身，也就是关注HAS-A, 而不是IS-A。