JavaScript 设计模式

🌙

手机阅读

本文目录结构

JavaScript 设计模式

编辑推荐

专业讲解全面 Web 前端设计模式书

阿里巴巴、百度前端高级工程师鼎力推荐

Web 前端界以一种讲故事方式讲解每一种模式，让每位读者都能读懂。

书中案例都是实际工作中的真实案例，让读者身临其境。

全面涵盖专门针对 JavaScript 的 36 个设计模式，帮助读者尽快提高开发效率

深入剖析面向对象的设计原则及代码重构，帮助读者快速融入团队项目开发中

《JavaScript 设计模式》通过职场主人公“小铭”实战历练，介绍了他从菜鸟到高级程序员的蜕变过程，值得每一个程序员借鉴和学习！

各种设计模式的原则和准确定义、应用方法实践

内容简介

《JavaScript 设计模式》共分六篇四十章，首先讨论了几种函数的编写方式，体会 JavaScript 在编程中的灵活性；然后讲解了面向对象编程的知识，其中讨论了类的创建、数据的封装以及类之间的继承；最后探讨了各种模式的技术，如简单工厂模式，包括工厂方法模式、抽象工厂模式、建造者模式、原型模式、单例模式，以及外观模式，包括适配器模式。本书还讲解了几种适配器、代理模式、装饰者模式和 MVC 模式，讨论了如何实现对数据、视图、控制器的分离。在讲解 MVP 模式时，讨论了如何解决数据与视图之间的耦合，并实现了一个模板生成器；讲解 MVVM 模式时，讨论了双向绑定对 MVC 的模式演化。本书几乎包含了关于 JavaScript 设计模式的全部知识，是进行 JavaScript 高效编程必备的学习手册。

《JavaScript 设计模式》适合 JavaScript 初学者、前端设计者、JavaScript 程序员学习，也可以作为大专院校相关专业师生的学习用书，以及培训学校的教材。

作者简介

张容铭，百度资深高级 web 前端研发工程师，长期工作在 web 前端一线上，现研发与维护百度图片搜索业务，曾主导百度新首页项目改版等。喜欢钢琴，素描，而又常带着他的单反各地旅行。

精彩书评

★认识张容铭是在 2012 年年底的时候，那时张容铭来公司实习，大家都觉得这小伙子实力不俗。而且很爱钻研。在得知容铭利用业余时间完成了本书的创作，作为他的朋友，真替他感到高兴！短短几年，进步如此迅速，在前端实战开发方面有着这么多的积累，有时也会让我自愧不如。

在 Web 应用日益丰富的今天，越来越多的 JavaScript 被运用在我们的网页中。随着用户体验日益受到重视，前端的可维护性、前端性能对用户体验的影响开始备受关注，因此如何编写高效的可维护的代码，成为众多互联网公司争相研究的对象。

本书通过对话的方式详细地介绍了各种设计模式的原则和准确定义、应用方法和实践，全方位比较各种同类模式之间的异同，详细讲解不同模式的使用方法。

“极具趣味，容易理解，但讲解又极为严谨和透彻”是本书的写作风格和最大特点。希望大家在学到知识的同时，能够感受到作者的风趣幽默。

最后，希望本书能够帮助业界同仁打造出更为卓越的 Web 产品。

——阿里巴巴集团（淘宝）高级 Web 前端研发工程师王鹏飞

★在百度工作的时间里，和张容铭共事过一段时光，在相处的过程中就发现张容铭对设计模式的研究和应用有很大的热情，投入精力很多，且在应用上有很好的理解和收获。本书可以说是张容铭多年来积累的技术经验的总结，涵盖了绝大多数设计模式；叙述方面采用新人与导师对话的方式，风趣幽默、通俗易懂，非常适合 JavaScript 初学者和前段开发工程师学习。

——百度高级前端研发工程师杨坤

第一篇面向对象编程

第 1 章灵活的语言——JavaScript2

1.1 入职第一天 2
1.2 函数的另一种形式 2
1.3 用对象收编变量 3
1.4 对象的另一种形式 4
1.5 真假对象 4
1.6 类也可以 5
1.7 一个检测类 5
1.8 方法还可以这样用 6
1.9 函数的祖先 7
1.10 可以链式添加吗 8
1.11 换一种方式使用方法 9
下章剧透 10
忆之获 10
我问你答 10

第 2 章写的都是看到的——面向

对象编程 11
2.1 两种编程风格——面向过程与
面向对象 11
2.2 包装明星——封装 12
2.3 传宗接代——继承 19
2.4 老师不止一位——多继承 27
2.5 多种调用方式——多态 29
下章剧透 30
忆之获 31
我问你答 31

第二篇创建型设计模式

第 3 章神奇的魔术师——简单工厂模式 34

3.1 工作中的第一次需求 34
3.2 如果类太多，那么提供一个 35
3.3 一个对象有时也可代替许多类 37
3.4 你的理解决定你选择的方式 38
下章剧透 39
忆之获 39
我问你答 39

第 4 章给我一张名片——工厂方法模式 40

4.1 广告展现 40
4.2 方案的抉择 41
4.3 安全模式类 42
4.4 安全的工厂方法 43
下章剧透 44
忆之获 44
我问你答 44

第 5 章出现的都是幻觉——抽象

工厂模式 45
5.1 带头模范——抽象类 45
5.2 幽灵工厂——抽象工厂模式 46
5.3 抽象与实现 47
下章剧透 49
忆之获 49
我问你答 49

第 6 章分即是合——建造者模式 50

6.1 发布简历 50
6.2 创建对象的另一种形式 50
6.3 创建一位应聘者 52
下章剧透 53
忆之获 53
我问你答 54

第 7 章语言之魂——原型模式 55

7.1 语言中的原型 55
7.2 创建一个焦点图 55
7.3 最优的解决方案 56
7.4 原型的拓展 58
7.5 原型继承 58
下章剧透 59
忆之获 60
我问你答 60

第 8 章一个人的寂寞——单例模式 61

8.1 滑动特效 61
8.2 命名空间的管理员 62
8.3 模块分明 63
8.4 创建一个小型代码库 63
8.5 无法修改的静态变量 64
8.6 惰性单例 65
下章剧透 65
忆之获 66
我问你答 66

第三篇结构型设计模式

第 9 章套餐服务——外观模式 68

9.1 添加一个点击事件 68
9.2 兼容方式 69
9.3 除此之外 70
9.4 小型代码库 70
下章剧透 71
忆之获 71
我问你答 72

第 10 章水管弯弯——适配器模式 73

10.1 引入 jQuery73
10.2 生活中的适配器 73
10.3jQuery 适配器 74
10.4 适配异类框架 74
10.5 参数适配器 75
10.6 数据适配 76
10.7 服务器端数据适配 77
下章剧透 77
忆之获 77
我问你答 78

第 11 章牛郎织女——代理模式 79

11.1 无法获取图片上传模块数据 79
11.2 一切只因跨域 79
11.3 站长统计 80
11.4JSONP81
11.5 代理模板 81
下章剧透 83
忆之获 83
我问你答 84

第 12 章房子装修——装饰者模式 85

12.1 为输入框的新需求 85
12.2 装饰已有的功能对象 86
12.3 为输入框添砖加瓦 86
下章剧透 87
忆之获 87
我问你答 88

第 13 章城市间的公路——桥接模式 89

13.1 添加事件交互 89
13.2 提取共同点 90
13.3 事件与业务逻辑之间的桥梁 90
13.4 多元化对象 91
下章剧透 93
忆之获 93
我问你答 93

第 14 章超值午餐——组合模式 94

14.1 新闻模块十万火急 94
14.2 餐厅里的套餐业务 95
14.3 每个成员要有祖先 95
14.4 组合要有容器类 96
14.5 创建一个新闻类 97
14.6 把新闻模块创建出来 99
14.7 表单中的应用 100
下章剧透 101
忆之获 101
我问你答 102

第 15 章城市公交车——享元模式 103

15.1 翻页需求 103
15.2 冗余的结构 104
15.3 享元对象 104
15.4 实现需求 105
15.5 享元动作 106
下章剧透 108
忆之获 108
我问你答 108

第四篇行为型设计模式

第 16 章照猫画虎——模板方法模式 110

16.1 提示框归一化 110
16.2 美味的蛋糕 111
16.3 创建基本提示框 111
16.4 模板的原型方法 112
16.5 根据模板创建类 113
16.6 继承类也可作为模板类 113
16.7 创建一个提示框 114
16.8 创建多类导航 114
16.9 创建导航更容易 116
下章剧透 116
忆之获 116
我问你答 117

第 17 章通信卫星——观察者模式 118

17.1 团队开发的坎坷 118
17.2 卫星的故事 118
17.3 创建一个观察者 119
17.4 拉出来溜溜 121
17.5 使用前的思考 121
17.6 大显身手 121
17.7 对象间解耦 123
17.8 课堂演练 124
下章剧透 125
忆之获 125
我问你答 125

第 18 章超级玛丽——状态模式 126

18.1 最美图片 126
18.2 分支判断的思考 126
18.3 状态对象的实现 127
18.4 状态对象演练 127
18.5 超级玛丽 128
18.6 状态的优化 129
18.7 两种使用方式 130
下章剧透 131
忆之获 131
我问你答 131

第 19 章活诸葛——策略模式 132

19.1 商品促销 132
19.2 活诸葛 132
19.3 策略对象 133
19.4 诸葛奇谋 133
19.5 缓冲函数 134
19.6 表单验证 134
19.7 算法拓展 135
19.8 算法调用 135
下章剧透 136
忆之获 136
我问你答 137

第 20 章有序车站——职责链模式 138

20.1“半成品”需求 138
20.2 分解需求 139
20.3 第一站——请求模块 139
20.4 下一站——响应数据适配模块 140
20.5 终点站——创建组件模块 141
20.6 站点检测——单元测试 141
20.7 方案确定 142
下章剧透 142
忆之获 143
我问你答 143

第 21 章命令模式 144

21.1 自由化创建视图 144
21.2 命令对象 145
21.3 视图创建 145
21.4 视图展示 146
21.5 命令接口 147
21.6 大功告成 147
21.7 绘图命令 148
21.8 写一条命令 150
下章剧透 150
忆之获 151
我问你答 151

第 22 章驻华大使——访问者模式 152

22.1 设置样式 152
22.2 自娱自乐的 IE152
22.3 访问操作元素 153
22.4 事件自定义数据 153
22.5 原生对象构造器 154
22.6 对象访问器 154
22.7 操作类数组 155
下章剧透 156
忆之获 156
我问你答 156

第 23 章媒婆——中介者模式 157

23.1 导航设置层 157
23.2 创建中介者对象 158
23.3 试试看，可否一用 159
23.4 攻克需求 159
23.5 订阅消息 160
23.6 发布消息 161
下章剧透 162
忆之获 162
我问你答 162

第 24 章做好笔录——备忘录模式 163

24.1 新闻展示 163
24.2 缓存数据 164
24.3 新闻缓存器 164
24.4 工作中的备忘录 166
下章剧透 166
忆之获 166
我问你答 166

第 25 章点钞机——迭代器模式 167

25.1 简化循环遍历 167
25.2 迭代器 167
25.3 实现迭代器 168
25.4 小试牛刀 170
25.5 数组迭代器 171
25.6 对象迭代器 171
25.7 试用迭代器 172
25.8 同步变量迭代器 172
25.9 分支循环嵌套问题 174
25.10 解决方案 176
下章剧透 177
忆之获 177
我问你答 177

第 26 章语言翻译——解释器模式 178

26.1 统计元素路径 178
26.2 描述文法 179
26.3 解释器 179
26.4 同级兄弟元素遍历 180
26.5 遍历文档树 180
26.6 小试牛刀 181
下章剧透 182
忆之获 182
我问你答 182

第五篇技巧型设计模式

第 27 章永无尽头——链模式 184

27.1 深究 jQuery184
27.2 原型式继承 184
27.3 找位助手 185
27.4 获取元素 185
27.5 一个大问题 186
27.6 覆盖获取 187
27.7 方法丢失 187
27.8 对比 jQuery188
27.9 丰富元素获取 189
27.10 数组与对象 190
27.11 方法拓展 191
27.12 添加方法 192
27.13 大功告成 195
下章剧透 196
忆之获 196
我问你答 196

第 28 章未来预言家——委托模式 197

28.1 点击日历交互 197
28.2 委托父元素 197
28.3 预言未来 198
28.4 内存外泄 199
28.5 数据分发 200
下章剧透 201
忆之获 201
我问你答 201

第 29 章数据管理器——数据访问

对象模式 202
29.1 用户引导 202
29.2 数据访问对象类 203
29.3 数据操作状态 203
29.4 增添数据 204
29.5 查找数据 205
29.6 删除数据 206
29.7 检验 DAO207
29.8MongoDB208
29.9 在 nodejs 中写入配置项 208
29.10 连接 MongoDB208
29.11 操作集合 209
29.12 插入操作 209
29.13 删除操作 210
29.14 更新操作 211
29.15 查找操作 211
29.16 操作其他集合 212
下章剧透 212
忆之获 212
我问你答 213

第 30 章执行控制——节流模式 214

30.1 返回顶部 214
30.2 节流器 214
30.3 优化浮层 216
30.4 创建浮层类 216
30.5 添加节流器 217
30.6 图片的延迟加载 218
30.7 延迟加载图片类 218
30.8 获取容器内的图片 219
30.9 加载图片 220
30.10 筛选需加载的图片 220
30.11 获取纵坐标 221
30.12 节流器优化加载 221
30.13 大功告成 222
30.14 统计打包 222
30.15 组装统计 222
下章剧透 224
忆之获 224
我问你答 224

第 31 章卡片拼图——简单模板模式 225

31.1 展示模板 225
31.2 实现方案 225
31.3 创建文字列表视图 226
31.4 新方案 227
31.5 再次优化 228
31.6 模板生成器 228
31.7 最佳方案 229
下章剧透 229
忆之获 230
我问你答 230

第 32 章机器学习——惰性模式 231

32.1 对事件的思考 231
32.2 机器学习 232
32.3 加载即执行 232
32.4 惰性执行 233
32.5 创建 XHR 对象 233
32.6 第一种方案 234
32.7 第二种方案 235
下章剧透 235
忆之获 235
我问你答 235

第 33 章异国战场——参与者模式 236

33.1 传递数据 236
33.2 函数绑定 237
33.3 应用于事件 238
33.4 原生 bind 方法 239
33.5 函数柯里化 239
33.6 重构 bind240
33.7 兼容版本 241
下章剧透 242
忆之获 242
我问你答 243

第 34 章入场仪式——等待者模式 244

34.1 接口拆分 244
34.2 入场仪式 244
34.3 等待者对象 245
34.4 监控对象 246
34.5 完善接口方法 247
34.6 学以致用 248
34.7 异步方法 248
34.8 结果如何 249
34.9 框架中的等待者 250
34.10 封装异步请求 250
34.11 轮询 251
下章剧透 251
忆之获 251
我问你答 252

第六篇架构型设计模式

第 35 章死心眼——同步模块模式 254

35.1 排队开发 254
35.2 模块化开发 255
35.3 模块管理器与创建方法 255
35.4 创建模块 256
35.5 模块调用方法 258
35.6 调用模块 259
下章剧透 259
忆之获 260
我问你答 260

第 36 章大心脏——异步模块模式 261

36.1 异步加载文件中的模块 261
36.2 异步模块 262
36.3 闭包环境 262
36.4 创建与调度模块 263
36.5 加载模块 264
36.6 设置模块 265
36.7 学以致用 266
36.8 实现交互 267
下章剧透 267
忆之获 267
我问你答 267

37.1 视图模块化 268
37.2 模板引擎 269
37.3 实现原理 269
37.4 模板引擎模块 269
37.5 处理数据 270
37.6 获取模板 270
37.7 处理模板 271
37.8 编译执行 272
37.9 几种模板 273
37.10 实现组件 274
下章剧透 274
忆之获 275
我问你答 275

第 38 章三人行——MVC 模式 276

38.1 小白的顾虑 276
38.2 一个传说——MVC276
38.3 数据层 277
38.4 视图层 278
38.5 控制器 279
38.6 侧边导航栏 279
38.7 侧边导航栏数据模型层 280
38.8 侧边导航栏视图层 281
38.9 侧边导航栏控制器层 282
38.10 执行控制器 284
38.11 增加一个模块 284
下章剧透 285
忆之获 285
我问你答 286

第 39 章三军统帅——MVP 模式 287

39.1 数据模型层与视图层联姻的代价 287
39.2MVP 模式 287
39.3 数据层的填补 288
39.4 视图层的大刀阔斧 289
39.5 模板创建的分层处理 289
39.6 处理一个元素 291
39.7 改头换面的管理器 292
39.8 一个案例 293
39.9 用数据装扮导航 293
39.10 千呼万唤始出来的导航 294
39.11 模块开发中的应用 294
39.12MVP 构造函数 295
39.13 增添管理器 295
39.14 增加一个模块 295
下章剧透 297
忆之获 297
我问你答 297

第 40 章视图的逆袭——MVVM 模式 298

40.1 视图层的思考 298
40.2 滚动条与进度条 299
40.3 组件的探讨 299
40.4 视图模型层 299
40.5 创建进度条 300
40.6 创建滑动条 301
40.7 让滑动条动起来 302
40.8 为组件点睛 303
40.9 寻找我的组件 303
40.10 展现组件 304
下章剧透 304
忆之获 304
我问你答 305
附录 A307