第1 部分 基础知识 1
1　单页面应用程序介绍 3
1．1 SPA 简述 4
1．1．1 无须刷新浏览器 7
1．1．2 表现逻辑位于客户端 7
1．1．3 服务器端事务处理 7
1．2 更进一步 8
1．2．1 以Shell 页面开始 8
1．2．2 从传统页面到视图 9
1．2．3 视图的产生 10
1．2．4 实现无刷新的视图切换 11
1．2．5 贯穿动态更新过程的流畅性 12
1．3 SPA 应用相较传统Web 应用的优势 12
1．4 温故知新 13
1．5 优秀SPA 应用的构成 15
1．5．1 组织项目 15
1．5．2 创建可维护的松耦合UI 17
1．5．3 使用JavaScript 模块 18
1．5．4 执行SPA 导航 19
1．5．5 创建视图组成与布局 19
1．5．6 模块通信 20
1．5．7 与服务器端通信 20
1．5．8 执行单元测试 20
1．5．9 客户端自动化技术 20
1．6 小结 21
2　MV* 框架介绍 ．22
2．1 MV* 概念 24
2．1．1 传统UI 设计模式 25
2．1．2 MV* 和浏览器环境 27
2．2 MV* 基础概念 28
2．2．1 框架 29
2．2．2 我们的MV* 项目 30
2．2．3 模型 32
2．2．4 绑定 36
2．2．5 模板 40
2．2．6 视图 44
2．3 为什么要用MV* 框架 44
2．3．1 关注分离 ． 45
2．3．2 简化日常任务 46
2．3．3 提升生产率 47
2．3．4 标准化 47
2．3．5 可扩展性 48
2．4 框架选择 48
2．5 挑战环节 50
2．6 小结 50
3　JavaScript 模块化 52
3．1 模块概念 53
3．1．1 模块模式概念 53
3．1．2 模块结构 54
3．1．3 揭示模式 55
3．2 模块化编程的意义 56
3．2．1 避免命名冲突 56
3．2．2 保护代码完整性 65
3．2．3 隐藏复杂性 67
3．2．4 降低代码改变带来的冲击 68
3．2．5 代码组织 68
3．2．6 模块模式的不足 69
3．3 模块模式剖析 69
3．3．1 可访问性控制 69
3．3．2 创建公有API 70
3．3．3 允许全局导入 73
3．3．4 创建模块的命名空间 73
3．4 模块加载及依赖管理 74
3．4．1 脚本加载器 74
3．4．2 异步模块定义――AMD 75
3．4．3 通过RequireJS 实践AMD 76
3．5 挑战环节 81
3．6 小结 81
第2 部分　核心概念 83
4　单页面导航 85
4．1 客户端路由器概念 86
4．1．1 传统导航 86
4．1．2 SPA 导航 86
4．2 路由及其配置 88
4．2．1 路由语法 90
4．2．2 路由配置项 90
4．2．3 路由参数 91
4．2．4 缺省路由 93
4．3 客户端路由器的工作机制 93
4．3．1 片段标识符方式 94
4．3．2 HTML5 历史API 方式 95
4．3．3 使用HTML5 历史API 方式 97
4．4 综合实作：实现SPA 路由 98
4．4．1 教员列表（缺省路由） 99
4．4．2 主要联系人路由 101
4．4．3 教员授课时间（参数化路由） 102
4．5 挑战环节 104
4．6 小结 105
5　视图合成与布局 106
5．1 项目介绍 107
5．2 布局设计概念 108
5．2．1 视图 108
5．2．2 Region 109
5．2．3 视图合成 110
5．2．4 嵌套视图 111
5．2．5 路由 112
5．3 高级合成与布局的可选方案 113
5．3．1 优点 113
5．3．2 缺点 114
5．4 设计应用程序 114
5．4．1 设计基本布局 115
5．4．2 设计基本内容 117
5．4．3 在复杂设计中应用视图管理 122
5．4．4 通过自身状态创建嵌套视图 125
5．5 挑战环节 127
5．6 小结 128
6　模块间交互 129
6．1 模块概念回顾 131
6．1．1 用模块封装代码 131
6．1．2 API 提供对内部功能的访问控制 133
6．1．3 SRP――以单一目的作为设计出发点 134
6．1．4 代码重用――控制项目规模 135
6．2 模块间交互方式 136
6．2．1 通过依赖进行模块间交互 136
6．2．2 依赖方式的优缺点 138
6．2．3 通过发布/ 订阅模式进行模块间交互 138
6．2．4 发布/ 订阅模式优缺点 141
6．3 示例项目细节 142
6．3．1 搜索功能 144
6．3．2 显示产品信息 150
6．4 挑战环节 ．． 155
6．5 小结 ． 155
7　与服务器端通信 156
7．1 示例项目新要求 157
7．2 与服务器端通信综述 158
7．2．1 选择数据类型 158
7．2．2 HTTP 请求方法 159
7．2．3 数据转换 160
7．3 使用MV* 框架 161
7．3．1 请求生成 162
7．3．2 通过回调函数处理结果 165
7．3．3 通过Promise 处理结果 166
7．3．4 Promise 错误处理 170
7．4 RESTful Web 服务调用 172
7．4．1 什么是REST 172
7．4．2 REST 原则 172
7．4．3 MV* 框架的RESTful 支持 174
7．5 示例项目细节 174
7．5．1 配置REST 调用174
7．5．2 添加产品到购物车 177
7．5．3 查看购物车 179
7．5．4 修改购物车 181
7．5．5 从购物车中移除产品 183
7．6 挑战环节 184
7．7 小结 184
8　单元测试 186
8．1 示例项目说明 187
8．2 什么是单元测试 187
8．2．1 单元测试的好处188
8．2．2 构建更好的单元测试 189
8．3 传统的单元测试 192
8．3．1 QUnit 起步 193
8．3．2 创建第一个单元测试 196
8．3．3 测试由MV* 对象创建的代码 200
8．3．4 测试对DOM 所做的改变 205
8．3．5 混合使用其他测试框架206
8．4 挑战环节 208
8．5 小结 208
9　客户端任务自动化 209
9．1 Task Runner 的常见用途 210
9．1．1 即时刷新浏览器 210
9．1．2 自动化JavaScript 和CSS 的预处理过程 211
9．1．3 自动化Linter 代码分析 211
9．1．4 持续单元测试 211
9．1．5 文件串接 212
9．1．6 代码压缩 212
9．1．7 持续集成 212
9．2 Task Runner 选择 212
9．3 本章示例项目 213
9．3．1 Gulp．js 介绍 214
9．3．2 创建第一个任务 215
9．3．3 创建代码分析任务 216
9．3．4 创建浏览器刷新任务 218
9．3．5 自动化单元测试220
9．3．6 创建构建过程 222
9．4 挑战环节 227
9．5 小结 227
A　员工通讯录示例说明 229
B　XMLHttpRequest API 259
C　第7 章内容的服务器端设置与总结 266
D　安装Node．js 与Gulp．js 277

　　译者序

　　当第一次使用Gmail 时，我被它那流畅的原生桌面般体验迷倒，赞叹天底下居然有如此令人惊艳的Web 应用。之后，SPA 的概念逐渐盛行，越来越多关于SPA的介绍、实践分享进入开发者的眼帘。然而，在现实开发世界里，我发现很多开发者对SPA 开发技术的整体概念是模糊的，往往以为只需靠Ajax 技术，就能很好地实现SPA。

　　在我大致浏览了本书的内容后，立刻感受到这是一本非常不错的SPA 开发书籍。事实上，这本书在Amazon 网站中获得了非常不错的读者评价。在翻译过程中，我自己也强化了不少SPA 开发概念，并受益匪浅。

　　Web 前端开发技术可谓是当今变化最为频繁的软件开发技术，新的开发理念、新的框架层出不穷，同时ES 6 在语法上带来了诸多变化，这些都迫使我们不断去适应新趋势的发展。但本书着力于SPA 开发技术的基本原理。掌握了这些基础知识，就能够做到相当程度的以不变应万变，这也是本书吸引我的地方。

　　岁月如梭，能够沉浸在技术创造的乐趣中是一件让我无限期待的事情。编写出优美的代码，构建出极致的应用，是每个热爱创造的开发者共同的追求目标。真心期待本书能够带给你不一样的收获。

　　同时，林长瑞、吴桐、朱建宝、周荣华、吴胜华、叶铭辉、李禧强、姚建峰、郑秀玲亦不同程度地参与了本书的翻译工作。

　　感谢我的妻子和娃，你们给了我很大的支持，小宝贝还给我带来了许许多多的乐趣。同时还要感谢本书的策划编辑张春雨，在你的鼓励下，我的翻译过程充满愉悦。

　　卢俊祥

　　2016 年10 月

　　序

　　1991 年的时候，Tim Berners-Lee 推出了全球首个网站，这个网站运行在一个他命名为“WorldWideWeb”的程序上。两年后，他发布了WorldWideWeb 的源代码，世界从此发生了天翻地覆的变化。迄今仍可在info.cern.ch 浏览人类历史上的第一个

　　Web 页面。

　　自1991 年起，Web 得到了空前的发展。在它24 岁的时候，其仍是IT 世界里使用最广泛的技术。Web 以某种形式运行于各种操作系统、硬件平台及绝大部分的移动设备之上。让这一切成为可能的软件就是万能的Web 浏览器。

　　传统上，Web 浏览器是简单的中间人角色。其从服务器端获取数据，展示数据，再将数据发回服务器端，然后又获取更多的数据并展示。而今天的Web 浏览器，虽仍坚守初心，但其复杂程度已远非当年可预见。

　　当年简陋的浏览器已经发展成为各式各样应用程序的运行时成熟环境。无须安装，就能随处访问、运行这些应用程序。这就是开发者的“屠龙技”。部署四处运行且即时更新的代码库——这种魅力实在是难以抗拒。还没有其他任何一种技术能够做到如此得意。

　　站在Web 平台成功之巅的是无处不在的JavaScript——一门10 天内发明出来的语言，它大概是目前世界上使用最广泛的编程语言了。开发者们已经接纳了JavaScript，它帮我们打开了崭新应用类型的大门，之前做梦都想不到这一切会发生在Web 浏览器中。

　　这些新型应用程序，我们通常称之为单页面应用程序（SPA），几乎完全在浏览器中运行，其引入了一套全新的规则、模式及问题。Web 的广泛吸引力带来了层出不穷的JavaScript 和CSS 框架；框架如此之多，以至于要做出合适的挑选犹如大海捞针。

　　亲爱的读者，这就是本书如此重要的原因。

　　在过去的4 年里，我作为一名开发者在Telerik 工作，我积极倡导对Kendo UIJavaScript 库的关注。我看到过太多的JavaScript 框架起起灭灭。当某个流行框架的炒作达到临界状态时，下一个“大事件” 就随之而来，只留下那些在所谓“时髦”框架之上实际构建解决方案的开发者们仍在收拾残局。这让我总想知道它何时能够消停下来，这样我们就能够专注于“正确之道”，以构建新一代的富客户端应用程序。

　　残酷的现实却是：做任何事情都不存在所谓的“正确之道”。唯一的办法就是为你的项目和技能栈而战。这是让你更具生产力并最终成功的唯一姿势。

　　为了在SPA 开发世界里杀出一条路，理解SPA 概念之下的基本原理是很有必要的。掌握一门框架还远远不够，因为这样的话，最终仍会让你感到贫瘠和匮乏。深度理解成功SPA 构筑之法的核心概念，使你得以从容决策，在借助JavaScript 框架完成了80% 功能之后，懂得如何构建剩下的20%。

　　本书就是你的指导手册——不管你是专家还是新人。在读它的时候，我发现自己在恶补过往不求甚解的基础，并对之前感觉甚好而实际上只是部分理解（甚至理解错误）的术语有了新认识。这些认识和解释埋藏在理论结合实践的字里行间，并在讨论SPA 框架的时候教你如何构建SPA、正面处理现实世界需求。

　　那些我通常持怀疑态度的书籍，都试图解释跟SPA 一样大的概念，但是这部书籍的亮点却在于——另辟蹊径设法将复杂主题化解为易于理解与消化的部分。

　　我毫无保留地倾力推荐这本书——每一页，每一句。

　　Burke Holland

　　Telerik 开发者关系主管