电子工业出版社-网上书店

单页的Web应用程序（SPA）是网络软件发展的下一阶段，SPA能够使浏览器应用像原生桌面应用一样流畅易用。开发SPA需要新的开发理念，并掌握那些支持更复杂应用的新技术。幸运的是，学习如何创建SPA并不需要十分丰富的经验！本书能够帮助开发者从传统的网页应用开发过渡到SPA的开发。本书首先介绍了SPA模式，及建立创建链接页面的标准方法。然后简单介绍了模块化JavaScript编程，包括AMD和模块加载器。本书将指导读者学习SPA架构的各个方面，包括MV*框架、单元测试、路由、布局管理、数据访问、发布/订阅、性能和安全性。配套的示例很容易上手，且可被应用于读者自己的库或框架中。

第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 岁的时候1 ，其仍是IT 世界里使用最广泛的技术。Web 以某种形式运行于各种操作系统、硬件平台及绝大部分的移动设备之上。让这一切成为可能的软件就是万能的Web 浏览器。
传统上，Web 浏览器是简单的中间人角色。其从服务器端获取数据，展示数据，再将数据发回服务器端，然后又获取更多的数据并展示。而今天的Web 浏览器，虽仍坚守初心，但其复杂程度已远非当年可预见。
当年简陋的浏览器已经发展成为各式各样应用程序的运行时成熟环境。无须安装，就能随处访问、运行这些应用程序。这就是开发者的“屠龙技”。部署四处运行且即时更新的代码库——这种魅力实在是难以抗拒。还没有其他任何一种技术能够做到如此得意。
站在Web 平台成功之巅的是无处不在的JavaScript——一门10 天内发明出来的语言，它大概是目前世界上使用最广泛的编程语言了。开发者们已经接纳了JavaScript，它帮我们打开了崭新应用类型的大门，之前做梦都想不到这一切会发生在Web 浏览器中。
这些新型应用程序，我们通常称之为单页面应用程序（SPA），几乎完全在浏览器中运行，其引入了一套全新的规则、模式及问题。Web 的广泛吸引力带来了层出不穷的JavaScript 和CSS 框架；框架如此之多，以至于要做出合适的挑选犹如大海捞针。
亲爱的读者，这就是本书如此重要的原因。
在过去的4 年里，我作为一名开发者在Telerik 工作，我积极倡导对Kendo UI JavaScript 库的关注。我看到过太多的JavaScript 框架起起灭灭。当某个流行框架的炒作达到临界状态时，下一个“大事件” 1 就随之而来，只留下那些在所谓“时髦”框架之上实际构建解决方案的开发者们仍在收拾残局。这让我总想知道它何时能够消停下来，这样我们就能够专注于“正确之道”，以构建新一代的富客户端应用程序。
残酷的现实却是：做任何事情都不存在所谓的“正确之道”。唯一的办法就是为你的项目和技能栈而战。这是让你更具生产力并最终成功的唯一姿势。
为了在SPA 开发世界里杀出一条路，理解SPA 概念之下的基本原理是很有必要的。掌握一门框架还远远不够，因为这样的话，最终仍会让你感到贫瘠和匮乏。深度理解成功SPA 构筑之法的核心概念，使你得以从容决策，在借助JavaScript 框架完成了80% 功能之后，懂得如何构建剩下的20%。
本书就是你的指导手册——不管你是专家还是新人。在读它的时候，我发现自己在恶补过往不求甚解的基础，并对之前感觉甚好而实际上只是部分理解（甚至理解错误）的术语有了新认识。这些认识和解释埋藏在理论结合实践的字里行间，并在讨论SPA 框架的时候教你如何构建SPA、正面处理现实世界需求。
那些我通常持怀疑态度的书籍，都试图解释跟SPA 一样大的概念，但是这部书籍的亮点却在于——另辟蹊径设法将复杂主题化解为易于理解与消化的部分。
我毫无保留地倾力推荐这本书——每一页，每一句。
Burke Holland
Telerik 开发者关系主管


前言
我经历过的许多项目，都需要花费一年甚至更多的时间来持续构建。当然，之后还有各种更新和意想不到的事情在等着我们处理。由于这些类型的项目耗时长久，而在这期间，技术的发展突飞猛进；因此，在我准备开始下一个项目的时候，却发现不得不重新评估我的技术栈，因为事物的变化早已今非昔比。
当我和团队在准备最近一次的SPA 项目时，我萌生了编写这本书的想法。我的主管允许我们探研项目需要的“最佳”技术栈。因此，我们开始评估各种解决方案并创建小型概念验证应用程序。
结束评估工作之后，我对在海量信息中筛选出方向感到心有余悸。对于那些构建SPA 应用的新手而言，我的艰辛历程同样也是他们要面对的困难。
因此我打算写一本书，不仅会总结构建SPA 所需知识点，还将介绍构建SPA相关的一些第三方库或框架。此外，我希望这本书的内容简单直接并容易消化，同时还能够提供足够的技术细节，争取让读者在读完内容之后，具备实际构建SPA 应用的能力。
感谢你跟我一起出发。我希望你最终能够发现这本书是一部不可或缺的SPA 开发指南。

关于本书
本书引导你如何创建单页面应用程序。不仅介绍SPA 构建所需的框架和技术，同时还介绍单元测试、客户端开发与构建任务的自动化。
由于SPA 构建的过程细节决定着技术栈的选择，因此本书会使用当今主流的JavaScript 框架来比较多种方式。为什么会存在这么多框架呢？原因之一就是应用构建没有标准方式。通过比较不同框架，可以更好地决定哪种方案更适合你的项目。
本书中的每章都包含了一个完整可行的应用示例。我尽量保持内容的有趣和简单。我并不喜欢那种用一页页源代码填充了半本书的大型示例，这让人读起来太费力了。因此，我决定为每章创建独立的项目。与此同时，尽可能保持每个示例短小精悍，紧扣当前章节的概念主题并不失趣味性。
路线图
第1 部分：基础知识
第1 章介绍SPA 整体概念。一开始你将了解到重要概念及SPA 应用与传统Web 应用间的差异。我会给出一个清晰简明的定义，并简要说明SPA 的各个部分是如何结合起来的。
第2 章会继续深入一层，介绍JavaScript框架的一个“流派”——MV*框架，同时介绍它们在单页面应用程序创建中的作用。本章还会探讨框架之间的共性以及差异性。章末示例使用三种MV* 框架来分别创建，让你在实践中感受不同的构建风格。
在第3 章中，你将了解模块化编程。这里会通过示例直观了解应该在SPA 中使用模块的原因。我们还将分解模块模式的语法，并一步步解释它。本章最后介绍模块加载及AMD 模块的内容。
第2 部分：核心概念
第4 章快速介绍客户端路由的知识点。你将了解路由的运行机制，以及各种框架如何处理路由。本章也会介绍客户端路由影响应用程序状态的方式。
第5 章介绍SPA 的布局设计与视图合成。一开始先了解简单设计，然后借助复杂路由逐步深入到复杂设计。此外，我们还将涉及高级的布局主题，如嵌套视图与并列视图。
第6 章讨论模块间通信。如果创建的模块不能相互通信，那还有什么意义呢？！在本章中，你不仅会看到模块间通信的不同方式，也将了解模块化应用设计之道。
第7章将阐述SPA环境中的服务器端处理。尽管客户端仍是我们关注的焦点，但也应该了解SPA 中的服务器端通信，以及如何处理服务器端调用的返回结果。本章会讨论通过回调函数与Promise 方式处理返回结果。你还将看到MV* 框架如何帮助我们完成这些任务。本章最后将简短介绍REST 及SPA应用程序如何调用RESTful 服务。
第8 章是一个关于JavaScript应用程序单元测试的概览，特别针对SPA 应用。如果你从未接触过客户端单元测试，也不用太过担心。在这里我们将放缓脚步、降低难度，一步步了解相关的基础知识。
最后是第9 章，在这里会讨论客户端任务自动化在开发和构建过程中带给我们的帮助。同时从整体上了解针对各种场景的最常用任务类型，并在本章最后的示例项目中实践这些任务。
附录是章节的补充。附录A 解析第2 章示例项目（三个版本）的完整源代码。附录B 和附录C 对第7 章做补充。附录B 的内容为XMLHttpRequest API 概览，附录C 是该章示例项目服务器端调用部分的总结。尽管第7 章的内容组织也考虑到让你能够使用自己的服务器端语言，但附录C 仍额外包含了一个Spring MVC 代码指南，这些代码包含在下载源文件里。附录D是关于Node.js 和Gulp.js 安装的简单指南，这些内容是实践第9 章代码所需的。
阅读对象
本书假设你至少具备JavaScript、HTML 和CSS 方面的基本知识。如果你有一定的Web 开发经验，那也是很有帮助的，但这不是必需的。然而，这本书的目标人群是那些在SPA 方面欠缺经验甚至根本没经验的开发者，以及在构建SPA 过程中未使用过本书所涵盖技术的开发者。
代码约定与下载
程序清单中的源代码，以及在正文中为了区别于普通文字的代码，都以等宽字体方式呈现。程序清单中还包含代码注解，以突出重点概念。
本书示例源代码可以通过出版社网站下载：https://www.manning.com/books/spadesign-and-architecture。
软硬件要求
如果你使用最新的Mac OS X 或Windows，以及现代浏览器（如Firefox、Safari或Chrome），应该可以正常运行书中示例。对于特定软件要求，可以在相关章节或附录中找到答案。
由于大多数示例都动态获取HTML 文件，如果你在本地（而非服务器）运行书中示例，可能需要在浏览器中设定某些权限。请参考下载源文件里的项目readme.txt 文档以获取具体信息。
如果你想运行第7 章示例，则需要用到Web 服务器及服务器端语言。每位开发者都有自己的技术栈，因此你可以决定你自己的技术路线。我使用的是Java 和Spring MVC，并在书中提供了一个对应的简短设置指南。如果你使用不同的软件，书中也从概念上描述了服务器端调用及相关对象，以便你能够通过你自己的技术栈重建示例应用。

前端/Web开发

译者介绍：卢俊祥，书迷；关注Web 技术趋势，热衷App 开发、Web 开发、数据分析、架构设计以及各类编程语言；陈氏太极拳五十六式爱好者；佛禅人生，缘散缘聚。

Web应用发展的下一个热点是单页面Web应用程序，其将原生桌面应用的流畅体验带到了浏览器。如果你打算从传统Web应用跨越到SPA却又无从下手，那么这本书正是为你准备的。本书讲述SPA应用程序构建所需的设计与开发技术。书中首先介绍SPA模型，并阐述SPA标准构建方式。随着内容的展开，作者通过具体的SPA构建知识点引导你前进，涵盖MV*框架、单元测试、路由、布局管理、数据访问、发布/订阅模式以及客户端任务自动化等内容。书中示例丰富易懂，并可结合各种第三方库或框架来创建。内容包括：__eol__?	模块化JavaScript实践__eol__?	理解MV*框架__eol__?	布局管理__eol__?	客户端任务自动化__eol__?	SPA应用程序测试

本书配套资源下载

对不起，暂无音视频资源！

SPA设计与架构：理解单页面Web应用