正版 单页Web应用:JavaScript从前端到后端

第一部分　单页应用简介

第1章　第一个单页应用　3
1.1　定义、一些历史和一些关注点　4
1.1.1　一些历史　4
1.1.2　是什么导致JavaScript单页应用姗姗来迟　5
1.1.3　我们的关注点　8
1.2　构建第一个单页应用　9
1.2.1　定义目标　9
1.2.2　创建文件结构　10
1.2.3　使用Chrome开发者工具　10
1.2.4　开发HTML和CSS　11
1.2.5　添加JavaScript　12
1.2.6　使用Chrome开发者工具查看应用　17
1.3　精心编写的单页应用的用户效益　19
1.4　小结　20

第2章　温故JavaScript　22
2.1　变量作用域　24
2.2　变量提升　27
2.3　高级变量提升和执行环境对象　28
2.3.1　提升　28
2.3.2　执行环境和执行环境对象　30
2.4　作用域链　33
2.5　JavaScript对象和原型链　35
2.6　函数——更深入的窥探　43
2.6.1　函数和匿名函数　43
2.6.2　自执行匿名函数　44
2.6.3　模块模式——将私有变量引入JavaScript　46
2.6.4　闭包　51
2.7　小结　54

第二部分　单页应用客户端

第3章　开发Shell　57
3.1　深刻理解Shell　57
3.2　创建文件和名字空间　59
3.2.1　创建文件结构　59
3.2.2　编写应用的HTML文件　60
3.2.3　创建CSS根名字空间　61
3.2.4　创建JavaScript根名字空间　62
3.3　创建功能容器　64
3.3.1　选取策略　64
3.3.2　编写Shell的HTML　64
3.3.3　编写Shell的CSS　65
3.4　渲染功能容器　68
3.4.1　将HTML转换为JavaScript　68
3.4.2　在JavaScript中添加HTML模板　69
3.4.3　编写Shell的样式表　71
3.4.4　指示应用使用Shell　73
3.5　管理功能容器　74
3.5.1　编写展开或收起聊天滑块的方法　74
3.5.2　给聊天滑块添加点击事件处理程序　76
3.6　管理应用状态　80
3.6.1　理解浏览器用户所期望的行为　80
3.6.2　选取一个策略来管理历史控件　81
3.6.3　当发生历史事件时，更改锚　82
3.6.4　使用锚来驱动应用状态　83
3.7　小结　89

第4章　添加功能模块　90
4.1　功能模块策略　91
4.1.1　与第三方模块的比较　91
4.1.2　功能模块和分形MVC模式　93
4.2　创建功能模块文件　96
4.2.1　规划文件结构　96
4.2.2　填写文件　97
4.2.3　我们创建了什么　103
4.3　设计方法API　103
4.3.1　锚接口模式　104
4.3.2　Chat的配置API　105
4.3.3　Chat的初始化API　106
4.3.4　Chat的setSliderPosition API　107
4.3.5　配置和初始化的级联　107
4.4　实现功能API　109
4.4.1　样式表　110
4.4.2　修改Chat　114
4.4.3　清理Shell　120
4.4.4　详细解释执行的过程　125
4.5　添加经常使用的方法　127
4.5.1　removeSlider方法　127
4.5.2　handleResize方法　129
4.6　小结　133

第5章　构建Model　134
5.1　理解Model　135
5.1.1　我们将要构建什么　135
5.1.2　Model做什么　137
5.1.3　Model不做什么　137
5.2　创建Model和其他文件　138
5.2.1　规划文件结构　138
5.2.2　填充文件　139
5.2.3　使用统一的触摸——鼠标库　145
5.3　设计people对象　145
5.3.1　设计person对象　146
5.3.2　设计people对象的API　147
5.3.3　给people对象的API编写文档　150
5.4　构建people对象　151
5.4.1　创建伪造的人员列表　152
5.4.2　开始构建people对象　154
5.4.3　完成people对象的构建　157
5.4.4　测试people对象的API　164
5.5　在Shell中开启登入和登出的功能　166
5.5.1　设计用户登入的体验　167
5.5.2　更新Shell的JavaScript　167
5.5.3　更新Shell的样式表　169
5.5.4　使用UI测试登入和登出　170
5.6　小结　171

第6章　完成Model和Data模块　172
6.1　设计chat对象　172
6.1.1　设计方法和事件　173
6.1.2　给chat对象的API添加文档　175
6.2　构建chat对象　177
6.2.1　先创建chat对象的join方法　177
6.2.2　更新Fake以响应chat.join　179
6.2.3　测试chat.join方法　181
6.2.4　给chat对象添加消息传输功能　182
6.2.5　更新Fake，模拟消息传输功能　187
6.2.6　测试chat的消息传输功能　189
6.3　给Model添加Avatar功能　190
6.3.1　给chat对象添加Avatar功能　190
6.3.2　修改Fake来模拟头像功能　191
6.3.3　测试头像功能　192
6.3.4　测试驱动开发　193
6.4　完成Chat功能模块　195
6.4.1　更新Chat的JavaScript　196
6.4.2　更新样式表　203
6.4.3　测试Chat UI　207
6.5　创建Avatar功能模块　208
6.5.1　创建Avatar的JavaScript　209
6.5.2　创建Avatar的样式表　213
6.5.3　更新Shell和浏览文档　214
6.5.4　测试Avatar功能模块　215
6.6　数据绑定和jQuery　216
6.7　创建Data模块　217
6.8　小结　220

第三部分　单页应用服务器

第7章　Web服务器　223
7.1　服务器的作用　223
7.1.1　认证和授权　224
7.1.2　验证　224
7.1.3　数据的保存和同步　225
7.2　Node.js　225
7.2.1　为什么选择Node.js　225
7.2.2　使用Node.js创建Hello World应用　226
7.2.3　安装并使用Connect　229
7.2.4　添加Connect中间件　230
7.2.5　安装并使用Express　231
7.2.6　添加Express中间件　234
7.2.7　Express的使用环境　235
7.2.8　Express的静态文件服务　236
7.3　高级路由　237
7.3.1　用户对象的CRUD路由　237
7.3.2　通用CRUD路由　243
7.3.3　把路由放到单独的Node.js模块里面　246
7.4　添加认证和授权　249
7.5　Web socket和Socket.IO　251
7.5.1　简单的Socket.IO应用程序　251
7.5.2　Socket.IO和消息服务器　254
7.5.3　使用Socket.IO更新JavaScript　255
7.6　小结　258

第8章　服务器数据库　259
8.1　数据库的作用　259
8.1.1　选择数据存储　260
8.1.2　消除数据转换　260
8.1.3　把逻辑放在需要的地方　261
8.2　MongoDB简介　262
8.2.1　面向文档的存储　262
8.2.2　动态文档结构　262
8.2.3　开始使用MongoDB　263
8.3　使用MongoDB驱动程序　264
8.3.1　准备项目文件　265
8.3.2　安装并连接MongoDB　265
8.3.3　使用MongoDB的CRUD方法　267
8.3.4　向服务器应用添加CRUD操作　270
8.4　验证客户端数据　274
8.4.1　验证对象类型　274
8.4.2　验证对象　276
8.5　创建单独的CRUD模块　283
8.5.1　组织文件结构　284
8.5.2　把CRUD移到它自己的模块里面　287
8.6　构建chat模块　292
8.6.1　开始创建chat模块　293
8.6.2　创建adduser消息处理程序　295
8.6.3　创建updatechat消息处理程序　299
8.6.4　创建disconnect消息处理程序　301
8.6.5　创建updateavatar消息处理程序　302
8.7　小结　305

第9章　单页应用发布准备　306
9.1　单页应用针对搜索引擎的优化　307
9.2　云和第三方服务　310
9.2.1　站点分析　310
9.2.2　记录客户端错误　312
9.2.3　内容分发网络　314
9.3　缓存和缓存破坏　314
9.3.1　缓存时机　315
9.3.2　Web存储　316
9.3.3　HTTP缓存　317
9.3.4　服务器缓存　320
9.3.5　数据库查询缓存　325
9.4　小结　326

附录A　JavaScript编码标准　328
附录B　测试单页应用　361

Michael Mikowski是一位屡获殊荣的工业设计师和单页应用架构师，是一位有着13年经验的全栈Web开发人员和架构师。他担任HP／HA平台开发经理将近四年，该平台在大规模集群中使用mod perl应用服务器，每天需要处理数十亿次请求。

在2007年，他开发了AMD公司的“WheretoBuy”网站，受网站托管技术的，他无法使用其他解决方案，于是他就着手开发商业级单页Web应用。之后，他被单页应用的发展潜力迷住了，持续不断地设计和开发了很多类似的解决方案。他坚信面向质量设计、创造性地破坏、简约主义和有针对性的测试技巧可以消除单页应用开发的复杂度和混乱。

他是很多开源项目的贡献者，发布了很多iQuery插件。他出席了2012年和2013年的HTML 5开发者大会、Developer Week 2003，并出现在旧金山大学和很多公司。近期他的工作是UI架构师、顾问和用户体验工程学的主管。

如果你的网站还是一系列跳转页面，那就落伍了。单页Web应用（single page web application，SPA）是你接下来的选择：将用户界面渲染和业务逻辑放在浏览器端，只在同步数据的时候才和服务器通信，它们可以提供流畅的用户体验，就像本地应用程序一样。不过，单页Web应用的开发、管理和测试有很大的挑战。
本书展示了从前端到后端都使用JavaScript来开发复杂的单页Web应用，你的团队能够很容易地进行设计、测试、维护和扩展，不会受到某个框架的限制。期间你将会使用HTML5、CSS3和JavaScript的高级开发技能，Web服务器和数据库的语言也是JavaScript。
本书读者需要具备基本的Web开发知识，但不要求具备单页Web应用的相关开发经验。
“对好几代单页Web应用优化后的深刻见解。”
——摘自Gregory D. Benson撰写的序

“彻底、全面、系统。”
——Mark Ryall，ThoughtWorks公司

“即使你使用了框架，也有必要读一下这本书。”
——Ken Rimple，《Spring Roo in Action》作者

“我强烈推荐本书所展示的技术。”
——Jason Kaczor，SharePoint MVP

“非常棒的指南。”
——Mike Greenhalgh，NHS Wales

《单页Web应用：JavaScript从前端到后端》是设计和构建大规模JavaScript单页Web应用(SPA)的宝贵指南，这些应用从前端到后端都使用JavaScript：浏览器端应用、Web服务器和数据库。
　　《单页Web应用：JavaScript从前端到后端》大约三分之二的内容专门讲解单页Web应用的客户端开发，先定义何为JavaScript单页应用，接着介绍书中使用的单页Web应用的架构，然后依次讲解Shell模块、功能模块、Model模块、Data模块和Fake模块等，其中还专门拿出一整章讲解开发单页Web应用时需要掌握的JavaScript概念和特性；剩下三分之一的内容讲解单页Web应用的服务器端开发和其他与单页Web应用相关的知识，如Node.js、MongoDB、CDN、搜索引擎优化、数据分析、错误日志以及各个层级的缓存等。本书最后的两个附录分别介绍JavaScript的编码规范和单页Web应用的测试。
　　《单页Web应用：JavaScript从前端到后端》适合Web开发人员、架构师和产品经理阅读，需要读者至少要有些JavaScript、HTML和CSS的开发经验。

如果你的网站还是一系列跳转页面，那就落伍了。单页web应用（single page web application，spa）是你接下来的选择：将用户界面渲染和业务逻辑放在浏览器端，只在同步数据的时候才和服务器通信，它们可以提供流畅的用户体验，就像本地应用程序一样。不过，单页web应用的开发、管理和测试有很大的挑战。



本书展示了从前端到后端都使用javascript来开发复杂的单页web应用，你的团队能够很容易地进行设计、测试、维护和扩展，不会受到某个框架的。期间你将会使用html5、css3和javascript的不错开发技能，web服务器和数据库的语言也是javascript。



本书读者需要具备基本的web开发知识，但不要求具备单页web应用的相关开发经验。

如果你的网站还是一系列跳转页面，那就落伍了。单页Web应用（singlepagewebapplication，SPA）是你接下来的选择：将用户界面渲染和业务逻辑放在浏览器端，只在同步数据的时候才和服务器通信，它们可以提供流畅的用户体验，就像本地应用程序一样。不过，单页Web应用的开发、管理和测试有很大的挑战。 米可夫斯基、鲍威尔编著的《单页Web应用：JavaScript从前端到后端》展示了从前端到后端都使用JavaScript来开发复杂的单页Web应用，你的团队能够很容易地进行设计、测试、维护和扩展，不会受到某个框架的限制。期间你将会使用HTML5、CSS3和JavaScript的高级开发技能，Web服务器和数据库的语言也是JavaScript。 本书读者需要具备基本的Web开发知识，但不要求具备单页Web应用的相关开发经验。