Backbone.js应用程序开发

目　录



第1章　概述　1

1.1　什么是mvc　2

1.2　什么是backbone.js　2

1.3　何时需要javascript mvc框架　3

1.4　为何考虑backbone.js　4

1.5　设定预期目标　5



第2章　基本概念　8

2.1　mvc　8

2.1.1　smalltalk-80 mvc　8

2.1.2　mvc应用于web　9

2.1.3　客户端mvc和单页面应用程序　12

2.1.4　客户端mvc：backbone风格　13

2.1.5　实现规范　16

2.2　mvc能带给我们什么　19

2.2.1　深究mvc　19

2.2.2　总结　20

2.2.3　延伸阅读　20

2.3　基本概况　20

2.3.1　backbone.js　20

2.3.2　使用案例　21



第3章　backbone基础　25

3.1　准备开始　25

3.2　模型(model)　26

3.2.1　初始化　27

3.2.2　默认值　27

3.2.3　赋值与取值　28

3.2.4　监听模型变化　30

3.2.5　验证　32

3.3　视图(view)　33

3.3.1　创建视图　33

3.3.2　el是什么　34

3.4　集合(collection)　39

3.4.1　添加和移除模型　40

3.4.2　检索模型　40

3.4.3　事件监听　42

3.4.4　重置和刷新集合　44

3.4.5　underscore实用函数　45

3.4.6　链式api　49

3.5　restful持久化　50

3.5.1　从服务器上获取模型　50

3.5.2　保存模型到服务器　50

3.5.3　从服务器删除模型　51

3.5.4　选项　52

3.6　事件(event)　52

3.6.1　on()、off()和trigger()　53

3.6.2　listento()和stoplistening()　56

3.6.3　事件与视图　57

3.7　路由(router)　58

3.8　backbone同步api　63

3.9　依赖文件　67

3.10　总结　67



第4章　练习1：todos——**个backbone.js应用程序　68

4.1　静态html　69

4.1.1　html头部和script脚本　69

4.1.2　应用程序html　70

4.1.3　模板　71

4.2　todo模型　72

4.3　todo集合　72

4.4　应用程序视图(appview)　74

4.5　独立的待办项视图(todoview)　79

4.6　程序启动　81

4.7　实战操作　82

4.8　标记完成或删除todo项　84

4.9　todo路由　86

4.10　总结　88



第5章　练习2：book library——**个restful风格的backbone.js应用程序　89

5.1　程序建立　89

5.2　界面布局　96

5.2.1　添加模型　96

5.2.2　删除模型　97

5.3　创建后端系统　98

5.3.1　安装node.js、npm、mongodb　98

5.3.2　安装node模块　99

5.3.3　创建简单的web服务器　99

5.3.4　连接到数据库　102

5.4　和服务器通信　108

5.5　总结　113



第6章　backbone扩展　114

6.1　marionettejs(backbone.marionette)　114

6.1.1　boilerplate渲染代码　116

6.1.2　使用marionette.itemview减少boilerplate　117

6.1.3　内存管理　117

6.1.4　区域管理　120

6.1.5　marionette todo应用程序　122

6.1.6　todo应用程序的marionette实现更具可维护性吗？　132

6.1.7　marionette与灵活性　132

6.1.8　更多特性　134

6.2　thorax　134

6.2.1　hello world　134

6.2.2　嵌入子视图　135

6.2.3　视图助手　136

6.2.4　集合助手　137

6.2.5　自定义html data属性　138

6.2.6　thorax资源　139

6.3　总结　140



第7章　常见问题和解决方案　141

7.1　使用嵌套视图　141

7.1.1　问题　141

7.1.2　解决方案1　141

7.1.3　解决方案2　142

7.1.4　解决方案3　143

7.1.5　解决方案4　143

7.2　在嵌套视图中管理模型　145

7.2.1　问题　145

7.2.2　解决方案　145

7.3　在子视图中渲染父视图　146

7.3.1　问题　146

7.3.2　解决方案　146

7.4　消除视图层级结构　147

7.4.1　问题　147

7.4.2　解决方案　147

7.5　渲染视图层级结构　148

7.5.1　问题　148

7.5.2　解决方案　148

7.6　使用嵌套模型或嵌套集合　149

7.6.1　问题　149

7.6.2　解决方案　149

7.7　更好的模型属性验证　150

7.7.1　问题　150

7.7.2　解决方案　150

7.7.3　backbone.validateall　152

7.7.4　backbone.validation　154

7.7.5　特定表单验证类　155

7.8　避免多个backbone版本的冲突　155

7.8.1　问题　155

7.8.2　解决方案　155

7.9　构建层级模型和层级视图　156

7.9.1　问题　156

7.9.2　解决方案　156

7.9.3　调用重载方法　157

7.9.4　backbone-super　159

7.10　事件聚合器和中介者　159

7.10.1　问题　159

7.10.2　解决方案　160

7.10.3　事件聚合器　160

7.10.4　中介者　161

7.10.5　相似性与差异性　162

7.10.6　关系：何时用，用哪个　163

7.10.7　事件聚合器与中介器一起使用　164

7.10.8　模式语言：语义　165



第8章　模块化开发　166

8.1　使用requirejs和amd组织模型　166

8.1.1　多个脚本文件的可维护性问题　167

8.1.2　需要更好的依赖管理　167

8.1.3　异步模块定义(amd)　168

8.1.4　使用requirejs编写amd模块　168

8.1.5　requirejs入门　170

8.1.6　require.js/backbone示例　172

8.1.7　使用requirejs和text插件将模板保持在外部　176

8.1.8　使用requirejs优化生产环境中的backbone应用　177

8.2　总结　180



第9章　练习3：**个模块化的backbone/requirejs应用程序　181

9.1　概述　181

9.2　html代码　182

9.3　配置选项　183

9.4　模块化模型、视图、集合　184

9.5　基于路由的模块加载　189

9.5.1　基于json的模块配置　189

9.5.2　模块加载器　190

9.5.3　使用nodejs处理pushstate　191

9.6　另外一种依赖管理方式　192



第10章　对backbone.js请求和集合进行分页　193

10.1　backbone.paginator　194

10.2　paginator.requestpager　195

10.3　paginator.clientpager　199

10.3.1　便利方法　202

10.3.2　实现备注　204

10.3.3　插件　205

10.3.4　引导　206

10.3.5　样式化　207

10.4　总结　208



第11章　backbone boilerplate和grunt-bbb　209

11.1　准备开始　211

11.2　创建新项目　211

11.2.1　index.html　212

11.2.2　config.js　213

11.2.3　main.js　215

11.2.4　app.js　216

11.2.5　创建backbone样板模块　218

11.2.6　router.js　220

11.3　其他有用的工具和项目　221

11.3.1　yeoman　221

11.3.2　backbone devtools　223

11.4　总结　223



第12章　backbone和jquery mobile　224

12.1　使用jquery mobile进行移动应用开发　224

12.1.1　jqmobile渐进部件增强原则　225

12.1.2　理解jquery mobile导航　226

12.2　backbone应用的基础设置(用于jquery mobile)　227

12.3　backbone和jquerymobile的工作流程　230

12.3.1　路由到具体视图页面，继承于basicview　231

12.3.2　移动页面模板的管理　232

12.3.3　dom管理与$.mobile.changepage　234

12.4　在backbone上应用jqm高级技术　237

12.4.1　动态dom脚本　237

12.4.2　拦截jquery mobile事件　239

12.4.3　性能　240

12.4.4　智能的多平台支持管理　241



第13章　jasmine　246

13.1　行为驱动开发　246

13.2　suite、spec以及spie　248

13.3　beforeeach()和aftereach()　252

13.4　共享作用域　254

13.5　准备开始　255

13.6　tdd与backbone　256

13.7　模型　256

13.8　集合　258

13.9　视图　260

13.10　练习　268

13.11　延伸阅读　268

13.12　总结　268



第14章　qunit　269

14.1　准备开始　269

14.2　断言　272

14.2.1　使用test(name, callback)编写基础测试用例　272

14.2.2　比较函数的实际输出和期望输出　273

14.3　为断言添加结构　273

14.3.1　qunit基本模块　273

14.3.2　使用setup()和teardown()　274

14.3.3　使用setup()和teardown()用于初始化和清理工作　274

14.4　断言示例　275

14.5　fixtures　276

14.6　异步代码　279



第15章　sinonjs　281

15.1　sinonjs概述　281

15.1.1　基础spy　282

15.1.2　在现有函数上监听　282

15.1.3　检测接口　282

15.2　stub与mock　284

15.2.1　stub　284

15.2.2　mock　285

15.3　练习　286

15.3.1　模型　286

15.3.2　集合　288

15.3.3　视图　289

15.3.4　app　290

15.4　延伸阅读与资源　291



第16章　结论　293



附录a　延伸学习　295

附录b　资源　313



封面介绍　316