阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 章分而治之——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
      目录
      本文目录
      目录