新書推薦:
《
地下(村上春树沙林毒气事件的长篇纪实)
》
售價:NT$
332.0
《
偿还:债务与财富的阴暗面
》
售價:NT$
347.0
《
清华大学藏战国竹简校释(壹):《命训》诸篇
》
售價:NT$
408.0
《
封建社会农民战争问题导论(光启文库)
》
售價:NT$
296.0
《
虚弱的反攻:开禧北伐
》
售價:NT$
429.0
《
泰山:一种中国信仰专论(法国汉学经典译丛)
》
售價:NT$
380.0
《
花外集斠箋
》
售價:NT$
704.0
《
有兽焉.8
》
售價:NT$
305.0
|
編輯推薦: |
Web应用发展的下一个热点是单页面Web应用程序,其将原生桌面应用的流畅体验带到了浏览器。如果你打算从传统Web应用跨越到SPA却又无从下手,那么这本书正是为你准备的。本书讲述SPA应用程序构建所需的设计与开发技术。书中首先介绍SPA模型,并阐述SPA标准构建方式。随着内容的展开,作者通过具体的SPA构建知识点引导你前进,涵盖MV*框架、单元测试、路由、布局管理、数据访问、发布订阅模式以及客户端任务自动化等内容。书中示例丰富易懂,并可结合各种第三方库或框架来创建。内容包括:
模块化JavaScript实践
理解MV*框架
布局管理
客户端任务自动化
SPA应用程序测试
|
內容簡介: |
单页的Web应用程序(SPA)是网络软件发展的下一阶段,SPA能够使浏览器应用像原生桌面应用一样流畅易用。 开发SPA需要新的开发理念,并掌握那些支持更复杂应用的新技术。幸运的是,学习如何创建SPA并不需要十分丰富的经验!本书能够帮助开发者从传统的网页应用开发过渡到SPA的开发。本书首先介绍了SPA模式,及建立创建链接页面的标准方法。然后简单介绍了模块化JavaScript编程,包括AMD和模块加载器。本书将指导读者学习SPA架构的各个方面,包括MV*框架、单元测试、路由、布局管理、数据访问、发布订阅、性能和安全性。配套的示例很容易上手,且可被应用于读者自己的库或框架中。
|
關於作者: |
Emmit A. Scott 是一名有17 年Web 应用构建经验的高级软件工程师和架构师。他为教育、银行和通信领域开发过大型应用程序。他的爱好包括阅读(特别喜欢Jim Butcher的小说)、吉他(想当年他可是一位摇滚乐手)以及尽可能多陪陪孩子。
译者简介
卢俊祥
译者,书迷;关注Web 技术趋势,热衷App 开发、Web 开发、数据分析、架构设计以及各类编程语言;陈氏太极拳五十六式爱好者;佛禅人生,缘散缘聚。
微博:@2gua
个人网站:http:www.2gua.info
知乎专栏:https:zhuanlan.zhihu.comguagua
|
目錄:
|
第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 创建可维护的松耦合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.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 创建公有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.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 Region109
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 什么是REST172
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 API259
C 第7 章内容的服务器端设置与总结266
D 安装Node.js 与Gulp.js277
|
內容試閱:
|
译者序
当第一次使用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 过程中未使用过本书所涵盖技术的开发者。
代码约定与下载
程序清单中的源代
|
|