深度理解SPA构筑之法 突破JavaScript最后一块坚冰 通行大规模应用世界

译者序
当第一次使用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，并在书中提供了一个对应的简短设置指南。如果你使用不同的软件，书中也从概念上描述了服务器端调用及相关对象，以便你能够通过你自己的技术栈重建示例应用。