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章分而治之——Widget模式268

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