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

编辑推荐

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

　　√模块化JavaScript实践

　　√理解MV*框架

　　√布局管理

　　√客户端任务自动化

　　√SPA应用程序测试

内容简介

　　SPA开发技术的运用是当今Web开发领域的热门趋势，但真正全面掌握该技术的开发者并不多。《SPA设计与架构：理解单页面Web应用》详尽阐述单页面Web应用（SPA）开发技术，从SPA构建基础入手，通过MV*、模块化编程、路由、模块间通信、服务器端交互等概念的阐述，全面介绍SPA的设计与架构，帮助读者正确掌握SPA开发的各方面知识要素。同时，《SPA设计与架构：理解单页面Web应用》中还讨论了SPA的单元测试及客户端任务自动化，覆盖了从开发到部署的一系列任务，让读者在阅读完《SPA设计与架构：理解单页面Web应用》之后能够打下扎实的SPA开发基础。

　　《SPA设计与架构：理解单页面Web应用》的重点是帮助读者正确、全面地掌握SPA开发概念，这些概念都是通用的。但为了让内容更全面、具体，《SPA设计与架构：理解单页面Web应用》将通过Knockout、Backbone.js及AngularJS这三种不同风格的MV*框架来进行比较性讨论，这是《SPA设计与架构：理解单页面Web应用》的一大特色。同时在涉及具体MV*框架知识点时，《SPA设计与架构：理解单页面Web应用》中会提供相应介绍。书中示例丰富具体，并提供完整源代码下载。

　　《SPA设计与架构：理解单页面Web应用》适合前端及对SPA技术感兴趣的开发者阅读。读者只需掌握JavaScript、HTML和CSS基本知识，就可以阅读。

作者简介

　　EmmitA.Scott是一名有17年Web应用构建经验的高级软件工程师和架构师。他为教育、银行和通信领域开发过大型应用程序。他的爱好包括阅读（特别喜欢JimButcher的小说）、吉他（想当年他可是一位摇滚乐手）以及尽可能多陪陪孩子。

　　译者简介

　　卢俊祥

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

目录

第1部分基础知识1
1　单页面应用程序介绍3
1．1SPA简述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．3SPA应用相较传统Web应用的优势12
1．4温故知新13
1．5优秀SPA应用的构成15
1．5．1组织项目15
1．5．2创建可维护的松耦合UI17
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．1MV*概念24
2．1．1传统UI设计模式25
2．1．2MV*和浏览器环境27
2．2MV*基础概念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创建公有API70
3．3．3允许全局导入73
3．3．4创建模块的命名空间73
3．4模块加载及依赖管理74
3．4．1脚本加载器74
3．4．2异步模块定义――AMD75
3．4．3通过RequireJS实践AMD76
3．5挑战环节81
3．6小结81
第2部分　核心概念83
4　单页面导航85
4．1客户端路由器概念86
4．1．1传统导航86
4．1．2SPA导航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．2HTML5历史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．2Region109
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．2API提供对内部功能的访问控制133
6．1．3SRP――以单一目的作为设计出发点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．2HTTP请求方法159
7．2．3数据转换160
7．3使用MV*框架161
7．3．1请求生成162
7．3．2通过回调函数处理结果165
7．3．3通过Promise处理结果166
7．3．4Promise错误处理170
7．4RESTfulWeb服务调用172
7．4．1什么是REST172
7．4．2REST原则172
7．4．3MV*框架的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．1QUnit起步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．1TaskRunner的常见用途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．2TaskRunner选择212
9．3本章示例项目213
9．3．1Gulp．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　XMLHttpRequestAPI259
C　第7章内容的服务器端设置与总结266
D　安装Node．js与Gulp．js277

前言/序言

　　译者序

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

　　在我大致浏览了《SPA设计与架构：理解单页面Web应用》的内容后，立刻感受到这是一本非常不错的SPA开发书籍。事实上，这《SPA设计与架构：理解单页面Web应用》在Amazon网站中获得了非常不错的读者评价。在翻译过程中，我自己也强化了不少SPA开发概念，并受益匪浅。

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

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

　　同时，林长瑞、吴桐、朱建宝、周荣华、吴胜华、叶铭辉、李禧强、姚建峰、郑秀玲亦不同程度地参与了《SPA设计与架构：理解单页面Web应用》的翻译工作。

　　感谢我的妻子和娃，你们给了我很大的支持，小宝贝还给我带来了许许多多的乐趣。同时还要感谢《SPA设计与架构：理解单页面Web应用》的策划编辑张春雨，在你的鼓励下，我的翻译过程充满愉悦。

　　卢俊祥

　　2016年10月

　　序

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

　　Web页面。

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

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

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

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

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

　　亲爱的读者，这就是《SPA设计与架构：理解单页面Web应用》如此重要的原因。

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

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

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

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

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

　　我毫无保留地倾力推荐这《SPA设计与架构：理解单页面Web应用》——每一页，每一句。

　　BurkeHolland

　　Telerik开发者关系主管