Web应用发展的下一个热点是单页面Web应用程序,其将原生桌面应用的流畅体验带到了浏览器。如果你打算从传统Web应用跨越到SPA却又无从下手,那么这本书正是为你准备的。本书讲述SPA应用程序构建所需的设计与开发技术。书中首先介绍SPA模型,并阐述SPA标准构建方式。随着内容的展开,作者通过具体的SPA构建知识点引导你前进,涵盖MV*框架、单元测试、路由、布局管理、数据访问、发布/订阅模式以及客户端任务自动化等内容。书中示例丰富易懂,并可结合各种第三方库或框架来创建。内容包括:
√ 模块化JavaScript实践
√ 理解MV*框架
√ 布局管理
√ 客户端任务自动化
√ SPA应用程序测试
SPA 开发技术的运用是当今Web 开发领域的热门趋势,但真正全面掌握该技术的开发者并不多。本书详尽阐述单页面Web 应用(SPA)开发技术,从SPA 构建基础入手,通过MV*、模块化编程、路由、模块间通信、服务器端交互等概念的阐述,全面介绍SPA 的设计与架构,帮助读者正确掌握SPA 开发的各方面知识要素。同时,《SPA设计与架构:理解单页面Web应用》中还讨论了SPA 的单元测试及客户端任务自动化,覆盖了从开发到部署的一系列任务,让读者在阅读完《SPA设计与架构:理解单页面Web应用》之后能够打下扎实的SPA 开发基础。
《SPA设计与架构:理解单页面Web应用》的重点是帮助读者正确、全面地掌握SPA 开发概念,这些概念都是通用的。但为了让内容更全面、具体,《SPA设计与架构:理解单页面Web应用》将通过Knockout、Backbone.js 及AngularJS 这三种不同风格的MV* 框架来进行比较性讨论,这是本书的一大特色。同时在涉及具体MV* 框架知识点时,《SPA设计与架构:理解单页面Web应用》中会提供相应介绍。书中示例丰富具体,并提供完整源代码下载。
《SPA设计与架构:理解单页面Web应用》适合前端及对SPA 技术感兴趣的开发者阅读。读者只需掌握JavaScript、HTML 和CSS 基本知识,就可以阅读。
Emmit A. Scott 是一名有17 年Web 应用构建经验的高级软件工程师和架构师。他为教育、银行和通信领域开发过大型应用程序。他的爱好包括阅读(特别喜欢Jim Butcher的小说)、吉他(想当年他可是一位摇滚乐手)以及尽可能多陪陪孩子。
译者简介
卢俊祥
译者,书迷;关注Web 技术趋势,热衷App 开发、Web 开发、数据分析、架构设计以及各类编程语言;陈氏太极拳五十六式爱好者;佛禅人生,缘散缘聚。
第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 开发者关系主管
我是一个对新技术充满热情但又有些选择困难症的开发者。SPA(单页面应用)无疑是当下Web开发的热点之一,但市面上琳琅满目的框架和工具,以及各种“银弹”式的宣传,让我感到有些迷茫。我希望能够找到一本能够让我真正“理解”SPA的书,而不是简单地教我如何使用某个框架。这本书的标题——“SPA设计与架构:理解单页面Web应用”——非常吸引我,因为它强调了“设计”和“架构”,这暗示着它将深入探讨SPA的内在逻辑和构建哲学。我特别期待它能够解答我的一些疑问:为什么SPA能够提供更流畅的用户体验?它的核心优势究竟体现在哪里?在“设计”层面,它是否会讨论一些关于用户界面和交互的通用设计原则,以确保SPA应用的易用性和吸引力?在“架构”层面,我非常关心它是否会阐述一些关于SPA的通用架构模式,比如如何进行状态管理、路由管理、组件化开发等,以及这些模式的优劣势和适用场景。我希望这本书能够帮助我建立起一种“举一反三”的能力,即使未来遇到新的框架或技术,也能够基于这些通用的设计和架构原则,快速掌握其精髓。我希望这本书能够像一位经验丰富的导师,引导我深入探究SPA的本质,而不是简单地教我“怎么做”,而是让我明白“为什么这样做”。
评分作为一个有着几年经验的前端开发者,我一直在思考如何将项目做得更健壮、更具可扩展性。近几年,SPA的趋势愈发明显,很多大型应用都采用了SPA的架构。然而,在实际项目中,我们也遇到了不少SPA带来的挑战,比如首屏加载慢、SEO不友好、状态管理混乱等问题。市面上很多文章和教程都集中在某个框架(如React、Vue)的具体API讲解,而对于SPA整体的设计理念和架构原则却鲜有深入的探讨。我希望这本书能够弥补这一空白,从更底层的、更原理性的角度来阐述SPA的设计哲学。它是否会详细讲解SPA的核心组成部分,比如路由、视图、数据管理等,并分析不同实现方式的优劣?在“架构”层面,我非常关注它是否会提供一些通用的设计模式和最佳实践,帮助我们构建出清晰、可维护、易于扩展的SPA应用。比如,如何有效地组织代码结构?如何进行组件化设计?在性能优化方面,除了常见的代码分割、懒加载等技术,是否会探讨更深层次的优化策略,比如服务端渲染(SSR)、预渲染(Prerendering)等?此外,在团队协作和项目管理方面,SPA的架构又会带来哪些新的考虑?例如,如何保证代码的一致性?如何进行有效的版本管理?我希望这本书能够提供一些启发性的思考,帮助我们跳出框架的束缚,从更全局的视野来理解SPA的本质,从而写出更优秀的代码。
评分这本书的封面设计就很有吸引力,有一种科技感和专业感扑面而来。我作为一个前端开发新手,一直对SPA(单页面应用)的概念感到好奇,但又觉得它听起来有些复杂,不太敢轻易上手。市面上关于SPA的书籍不少,但很多都过于理论化,或者只讲解某个框架的用法,让我觉得难以建立起整体的理解。这本书的标题——“SPA设计与架构:理解单页面Web应用”——恰恰击中了我的痛点,它强调了“设计”和“架构”,以及“理解”,这让我觉得它不是一本简单的技术教程,而是能够帮助我建立起对SPA的系统性认识。我特别期待这本书能够从宏观角度剖析SPA的优势、劣势以及适用的场景,而不是仅仅停留在具体的代码实现上。例如,它是否会讲解SPA是如何解决传统多页面应用的一些痛点的?在用户体验、性能优化、SEO等方面,SPA又会面临哪些独特的挑战,以及如何通过优秀的设计和架构来克服这些挑战?我希望它能提供一些实际的案例,通过分析这些案例的设计思路和技术选型,来加深我的理解。另外,这本书的“架构”二字也引起了我的兴趣,我很好奇它会探讨SPA的不同架构模式,比如MVC、MVVM,或者更现代的组件化架构。是否会涉及到状态管理、路由管理、模块化开发等关键的架构决策?这些都是我作为新手最希望学习到的核心内容,它们将直接影响到我未来开发SPA项目的质量和可维护性。总而言之,我对这本书充满了期待,希望它能够成为我通往SPA开发领域的入门指南,并为我打下坚实的基础。
评分我是一名后端开发者,近几年也开始关注前端的发展,尤其是SPA(单页面应用)的兴起。从我的角度来看,SPA的出现确实改变了Web应用的开发模式,带来了更接近桌面应用的交互体验。然而,我对于SPA的“设计”和“架构”方面,一直存在一些模糊的概念。我不太清楚在SPA中,前后端如何进行更有效的协同工作?API的设计在SPA中扮演着怎样的角色?我希望这本书能够从一个更高的层面来剖析SPA的设计原则,而不是仅仅停留在前端的技术细节上。它是否会探讨SPA在系统整体设计上的考量,比如如何权衡客户端渲染和服务器端渲染的优势?在“架构”方面,我好奇它是否会讨论一些与后端相关的设计,例如如何设计 RESTful API 来更好地支持SPA的数据请求,如何处理认证授权等安全问题?在项目的部署和维护方面,SPA又会面临哪些与传统Web应用不同的挑战?这本书的标题强调了“理解”,这让我觉得它可能不仅仅是关于前端框架的堆砌,而是能够帮助我建立起一种全局观,理解SPA在整个Web生态系统中的位置和价值。我希望这本书能够为我提供一些跨领域的洞察,帮助我更好地理解现代Web应用的架构演进。
评分最近我开始涉足前端开发领域,对各种技术栈和概念都充满了好奇。SPA(单页面应用)这个词出现的频率很高,也听闻它在提升用户体验方面有着显著的优势。然而,在实际的学习过程中,我发现很多资料都只是简单地介绍“什么是SPA”,或者直接抛出代码示例,让我觉得难以理解背后的逻辑和设计思路。我希望这本书能够从更基础的概念入手,清晰地解释SPA的工作原理,比如它是如何通过JavaScript动态地渲染页面的,又是如何处理用户交互和导航的。我特别期待它能够用通俗易懂的语言,结合清晰的图示,来帮助我理解SPA的“设计”和“架构”这两大核心概念。例如,在“设计”方面,这本书是否会探讨SPA在用户界面设计上的一些独特性?如何平衡动态交互和信息呈现?在“架构”方面,它是否会介绍一些常见的SPA架构模式,并解释这些模式的优势和适用场景?我非常好奇,对于初学者来说,如何才能避免陷入“写出混乱的代码”的陷阱,这本书是否会提供一些指导性的原则和建议?我希望这本书能够帮助我建立起对SPA的整体认知,理解它为什么会流行,以及它背后所蕴含的设计思想。这本书的标题给我一种“循序渐进”的感觉,让我觉得它能够一步步地引导我理解SPA的精髓,而不是上来就让我感到压力。
评分东西还不错吧
评分速度快的吓人……
评分书是正版的,物流很快,好评。。。
评分666667i
评分活动的时候买的,看起来还不错
评分不错不错,可以看看
评分经典好书,怕哈哈哈哈哈哈哈哈哈哈哈还差
评分书身上划了一道大口子,着急看也懒得换了,希望京东工作人员细心些。
评分还没看,应该不错。。。
本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度,google,bing,sogou 等
© 2025 book.cndgn.com All Rights Reserved. 新城书站 版权所有