译者：李晶张散集

出版日期：2012 年5月

开本：16开

页码：1

版次：1-1

Alex MacCaw，是一名Ruby/JavaScript程式设计师，在开源社区中很有名望，是Spine框架的作者，开发过Taskforce，Socialmod等大型开源项目，同时活跃在纽约、旧金山和柏林的各大Ruby/Rails会议。

如今web 应用程式的开发已经越来越向传统套用软体开发靠拢了，web 和套用之间的界限也进一步模糊。传统程式语言中的设计模式、mvc、套用架构等理论也在慢慢地融入web 前端开发。这本书所涵盖的知识点非常全面，从mvc 的基本理论到网路协定、从模组解耦到异步编程模型、从html5/css3 到nodejs、从软体测试到部署调试，对于很多前端工程师来说，这些知识正是突破自己的瓶颈所亟需的。

《基于mvc的javascript web富套用开发》将专注于讲述如何构建“优雅又不失高水準”（state of the art）的javascript 套用，包括软体架构、模板引擎、框架和库、同伺服器的讯息通信等内容。书中同样提供了大量的示例代码，可以帮助你更深入地理解很多重要的概念。除此之外，作者在mvc 和架构方面的很多观点都很有启发性，即使你不是一名javascript 程式设计师，读完本书后也会受益匪浅

《基于mvc的javascript web富套用开发》

第1章 mvc和类 1

最初 1

增加结构 2

什幺是mvc 2

模型 3

视图 4

控制器 5

向模组化进军，创建类 6

给类添加函式7

给“类”库添加方法 8

基于原型的类继承 10

给“类”库添加继承 11

函式调用 12

控制“类”库的作用域 15

添加私有函式17

“类”库 18

第2章 事件和监听 21

监听事件 21

事件顺序 22

取消事件 23

事件对象 23

事件库 25

切换上下文 26

委託事件 26

自定义事件 27

自定义事件和jquery 外挂程式 28

dom 无关事件 30

第3章 模型和数据 33

mvc 和命名空间 33

构建对象关係映射（orm） 34

原型继承 35

添加orm 属性 36

持久化记录37

增加id 支持 39

定址引用 40

装载数据 41

直接嵌套数据 42

通过ajax 载入数据 42

jsonp 46

跨域请求的安全性 46

向orm 中添加记录 47

本地存储数据47

给orm 添加本地存储 49

将新记录提交给伺服器 51

第4章 控制器和状态 53

模组模式 54

全局导入 54

全局导出 54

添加少量上下文 55

抽象出库 56

文档载入完成后载入控制器 58

访问视图 59

委託事件 61

状态机 63

路由选择 65

使用url 中的hash 65

检测hash 的变化 66

抓取ajax 67

使用html5 history api 68

第5章 视图和模板 71

动态渲染视图71

模板 73

模板helpers 75

模板存储 75

绑定 77

模型中的事件绑定 78

第6章 依赖管理 81

commonjs 82

模组的声明83

模组和浏览器 83

模组载入器 84

yabble 84

requirejs 85

包装模组 87

模组的按需载入 88

labjs 89

无互动行为内容的闪烁（fubc） 89

第7章 使用档案 91

浏览器支持 91

获取档案信息92

档案输入 92

拖曳 93

拖曳 94

释放拖曳 96

撤销默认的drag/drop 97

複製和贴上 97

複製 98

贴上 99

读档案 100

二进制大档案和档案切割101

自定义浏览器按钮 102

上传档案 102

ajax 进度条 104

jquery 拖曳上传 106

创建拖曳目标区域 106

上传档案 107

第8章 实时web 109

实时web 的发展历史 109

websocket 110

nodejs 和socketio 114

实时架构 116

感知速度 117

第9章 测试和调试 119

单元测试 121

断言 121

qunit 122

jasmine 126

驱动 128

无界面的测试 131

zombie 132

ichabod 134

分散式测试135

提供支持 136

调试工具 136

web inspector 136

firebug 138

控制台 139

控制台函式 140

使用javascript 调试器141

分析网路请求 143

profile 和函式运行时间 144

第10章 部署 147

性能 147

快取 148

源码压缩（minification）150

gzip 压缩151

使用cdn152

审查工具 153

外部资源 154

第11章 spine类库 155

设定 156

类156

实例化156

类扩展157

上下文158

事件 159

模型 160

获取记录 161

模型事件 162

校验 163

持久化163

控制器 165

代理 166

元素 167

委託事件 167

控制器事件 168

全局事件 168

渲染模式 169

元素模式 169

构建联繫人管理套用171

联繫人模型 172

侧边栏控制器 173

联繫人控制器 175

应用程式控制器178

第12章 backbone类库 181

模型 182

模型和属性 182

集合 184

控制集合的内部顺序 185

视图 185

渲染视图 186

委託事件 187

绑定和上下文 187

控制器 188

与伺服器的同步 190

填充集合 192

伺服器端 192

自定义行为 193

构建to-do 列表套用195

第13章 javascriptmvc类库 203

设定 204

class 204

实例化205

调用基类的方法205

代理 205

静态继承 206

自省 206

一个模型的例子207

模型 207

属性和可观察 208

扩展模型 210

setter 210

defaults 211

辅助方法 211

服务封装 212

类型转换 215

crud 事件 216

在视图中使用客户端模板 216

基本用法 217

jquery 修改器217

用script 标籤载入 217

$.view 和子模板 218

延时对象 218

打包、预载入和性能 219

$.controller ：jquery 外挂程式工厂220

概览 222

控制器实例化 222

事件绑定 223

模板动作 224

大综合：一个抽象的crud 列表 225

附录a jquery基础 227

附录b css扩展 239

附录c css3参考 245

索引 267

1995 年随着Netscape 浏览器的发布，JavaScript 也作为它的组成部分进入到公众的视野，之后JavaScript 的发展道路儘管充满坎坷但成长飞速，如今得益于高性能的JIT（just intime）解析引擎，（在浏览器端）JavaScript 已经无孔不入了。仅仅在5 年以前，开发者还在使用Ajax 写一些短小的代码或热衷于实现一些类似“黄色渐褪技术”的网页特效；而现在，複杂的JavaScript 套用已经可以写上成百上千行的代码了。

就在去年，网际网路出现了一股追捧JavaScript 套用的浪潮，很多人开始着迷于给Web 套用加入很多桌面软体的互动元素，增强Web 套用的用户体验，这种趋势犹如星星之火迅速蔓延至整个网际网路。在过去，在浏览器性能不佳的情况下，用户在进行Web 套用时每次互动都要刷新页面，而且页面载入很慢。而如今JavaScript 引擎已经变得异常强大，我们可以将很多互动行为植入客户端，这样互动的回响就会非常及时，增强体验。

当然获得提升的不仅仅是JavaScript 引擎的性能。儘管CSS3 和HTML5 规範现在仍在修订之中，也已经有很多现代浏览器广泛支持这些新特性了，比如Safari、Chrome 和Firefox，IE9 也在一定程度上支持这些新特性。利用这些特性可以花更少的时间做出更棒的视觉效果，而且不用花精力做图片的切割和拼合来模拟视觉效果。现在浏览器的升级也很快，对HTML5 和CSS3 的支持也一天比一天好。但你还是要定义一个浏览器测试基準（你的套用所支持的最低标準的客户端软体和版本），基于此才能更加合理地选择所需的技术。

将套用的重心从伺服器迁移到客户端并不轻鬆，这和构建伺服器套用的方法完全不一样。你需要想清楚架构、模板、与伺服器端的通信、框架等，这些正是本书所涵盖的内容。我将手把手教你如何构建“优雅又不失高水準”的JavaScript 套用。

本书的目标读者

本书不是为JavaScript 初学者所写，如果你对JavaScript 这门语言缺乏基本的了解和认识，我建议你先阅读一些更基础的书，比如Douglas Crockford 着的JavaScript: TheGood Parts。本书更适合有一些JavaScript 开发经验的开发者，比如使用jQuery 类库的开发者，或者当你希望构建更複杂、更高级的JavaScript 套用时，本书也是适合你的。此外，本书的很多章节，特别是附录，对于有经验的JavaScript 开发者来说也是非常有帮助的。

本书的内容组织

第1 章

本章从JavaScript 的发展历程开始，介绍了JavaScript 的发展现状和对网际网路的巨大影响。然后轻描淡写地介绍了MVC 的基本概念，随后又讲解了JavaScript 的构造函式、原型继承及如何使用JavaScript 创建一个类库。

第2 章

本章主要介绍了浏览器的事件机制，包括事件机制的发展历史，API 设计和事件模型的行为和实现。然后讲解了如何基于jQuery 绑定事件监听、使用代理，以及创建自定义事件。最后使用发布/ 订阅模式实现了“DOM 无关”事件。

第3 章

本章讲解了如何在你的套用中使用MVC 模型，包括载入和操作远程数据。我们将会提到为什幺在构建ORM 类库的时候使用MVC 和命名空间是如此之重要，以及如何使用ORM 类库来管理模型数据。接下来讲解了如何使用JSONP 和跨域Ajax来载入远程数据。最后介绍了如何通过使用HTML5 本地存储和将本地存储提交至RESTful 伺服器，来实现模型数据的持久化。

第4 章

本章演示了如何使用控制器模式在客户端保持一个状态。我们将讨论如何将逻辑封装成模组、阻止全局命名空间的污染，然后介绍如何使用视图来进一步简化控制器的结构，以及怎样在视图中实现DOM 事件监听。本章的最后将会讨论路由选择，包括使用URL 中的hash 片段，使用新的HTML5 History API 等技术，以及确保解释两种方法的利弊。

第5 章

本章介绍了视图和JavaScript 模板，给出了多种动态渲染视图的方式，以及很多模板类库和存储模板的方式（使用行内形式存储模板、使用script 标籤，以及远程载入）。接下来，你会接触到数据绑定的一些内容，包括使模型控制器、视图与模型数据、视图数据动态同步连线。

第6 章

本章详细介绍了使用CommonJS 模组系统来做JavaScript 的依赖管理。开始会介绍CommonJS 背后的历史和思想，接下来会讲解如何在浏览器端使用CommonJS模组，包括介绍一些模组载入器类库，比如Yabble 和RequireJS。然后，我们讨论了如何自动在伺服器端包装模组，从而提高性能、节省时间。本章的最后会介绍CommonJS 的一些替代方案，比如Sprockets 和LABjs。

第7 章

这里将会讲到HTML5 带给我们的一些好处：档案操作API。本章将会涵盖档案操作API 的浏览器支持情况、多档案上传、拖曳上传档案及使用剪下板事件。接下来会介绍使用二进制大档案和档案切割来读档案，同时将读取的结果在浏览器中输出。然后讲解使用XHR（XMLHttpRequest）Level 2 规範来实现在后台上传档案，最后向大家展示一个使用jQuery Ajax API 实现档案上传进度指示的例子。

第8 章

本章主要关注实时套用和WebSocket 技术的一些令人兴奋的发展趋势。首先介绍实时套用的发展历史及各种实现技术的浏览器兼容性情况。然后更详细地介绍WebSocket 和基于它的更高级的实现，包括浏览器兼容性和JavaScript API。接下来展示一个使用WebSocket 实现的简单的RPC 服务，看一下如何在客户端和伺服器端之间建立连线。然后介绍=如何搭建实时架构，最后介绍用户体验方面的一些考量。

第9 章

本章主要讲解测试和调试的内容，这些内容是JavaScript 网路套用开发过程中的关键环节。我们的话题将围绕跨浏览器测试的主题进行展开，介绍浏览器基準的选择、单元测试和测试类库，比如QUnit 和Ja smine。接下来，介绍自动化测试和持续集成伺服器，比如Selenium。然后讲解调试相关的内容，研究了Firefox 和WebKit 网路监测器、主控台，以及使用JavaScript 调试器。

第10 章

本章介绍了另外一个非常重要却又极易被忽略的内容——JavaScript 网路套用的部署。我们主要考虑性能方面，以及如何使用快取、代码压缩、gzip 压缩及其他减少套用初始化载入时间的技术。最后简单讲解了如何使用CDN 伺服器来让我们的工作事半功倍，以及如何使用浏览器内置的策略来提升你站点的性能。

第11 章

接下来的3 章主要介绍了一些流行的JavaScript 类库，这些类库常用来做JavaScript套用开发。Spine 是一个轻量级的MVC-compliant 类库，这个类库使用了本书中讲到的很多概念。本章将会为你介绍类库的核心部分：类、事件、模型和控制器。最后本章用一个管理套用的例子来展示本章所讲到的知识点。

第12 章

Backbone 是一个非常流行的类库，使用这个类库可以非常高效地构建JavaScript 套用，本章主要介绍这个类库。本章会涵盖Backbone 的核心观念和类，比如模型、集合、控制器和视图等。接下来会介绍使用RESTful JSON请求从伺服器同步获取模型数据，以及如何在伺服器端回响Backbone。最后我们给出一个待办事项列表套用的例子，来向大家展示如何使用这个类库。

第13 章

本章主要介绍了JavaScriptMVC 类库，这是一个流行的基于jQuery 的框架，用来构建JavaScript 网路套用。在本章中你将会学到JavaScriptMVC 的一些基础知识，比如类、模型和控制器，同时还包含客户端的模板及渲染视图。本章的最后会给出一个实际的CRUD 列表的例子，给读者展示使用JavaScriptMVC 创建抽象的、可重用的、节省记忆体的组件是多幺的简单。

附录A

附录A 中是对jQuery 的简要介绍，如果你想温习类库内容，则这部分内容对你会非常有帮助。本书中大部分示例代码都是基于jQuery 的，首先熟悉jQuery 是很重要的。这一部分会讲到大部分核心的API，比如DOM 操作、DOM 查询和遍历，以及事件绑定、触发和事件代理。接下来会讲解jQuery 的Ajax API，包括POST、GET 和JSON 请求。随后将介绍jQuery 扩展，如何使用jQuery 来封装一个外挂程式，让你的代码更具通用性。最后展示了一个实际的例子：创建一个Growl jQuery 外挂程式。

附录B

附录B 的内容主要是讲解Less，Less 是CSS 的超集，它使用变数、混合、操作符和优雅的规则扩展了CSS 本身的语法。利用这些规则可以极大地减少你所写的CSS代码量，特别是使用CSS3 效果更佳。附录B 包含Less 的主要的增强的语法，以及如何使用命令行工具和JavaScript 类库来将Less 档案编译成CSS。

附录C

附录C 主要讲解了CSS3。首先介绍了一些CSS3 的背景知识、浏览器厂商的前缀，然后开始介绍CSS3 的主要内容，从主要附属档案到规格说明。这里介绍的CSS 特性主要包括：圆角、rgba 颜色、阴影、渐变、动画和变换。附录的最后讨论了使用Modernizr 实现的优雅降级，并展示了一个实际的使用box-sizing 规範的例子。