Backbone.js應(yīng)用程序開(kāi)發(fā)

目　錄
第1章　概述　1
1．1　什么是MVC　2
1．2　什么是Backbone．js　2
1．3　何時(shí)需要JavaScript MVC框架　3
1．4　為何考慮Backbone．js　4
1．5　設(shè)定預(yù)期目標(biāo)　5
第2章　基本概念　8
2．1　MVC　8
2．1．1　Smalltalk-80 MVC　8
2．1．2　MVC應(yīng)用于Web　9
2．1．3　客戶(hù)端MVC和單頁(yè)面應(yīng)用程序　12
2．1．4　客戶(hù)端MVC：Backbone風(fēng)格　13
2．1．5　實(shí)現(xiàn)規(guī)范　16
2．2　MVC能帶給我們什么　19
2．2．1　深究MVC　19
2．2．2　總結(jié)　20
2．2．3　延伸閱讀　20
2．3　基本概況　20
2．3．1　Backbone．js　20
2．3．2　使用案例　21
第3章　Backbone基礎(chǔ)　25
3．1　準(zhǔn)備開(kāi)始　25
3．2　模型(Model)　26
3．2．1　初始化　27
3．2．2　默認(rèn)值　27
3．2．3　賦值與取值　28
3．2．4　監(jiān)聽(tīng)模型變化　30
3．2．5　驗(yàn)證　32
3．3　視圖(View)　33
3．3．1　創(chuàng)建視圖　33
3．3．2　el是什么　34
3．4　集合(Collection)　39
3．4．1　添加和移除模型　40
3．4．2　檢索模型　40
3．4．3　事件監(jiān)聽(tīng)　42
3．4．4　重置和刷新集合　44
3．4．5　Underscore實(shí)用函數(shù)　45
3．4．6　鏈?zhǔn)紸PI　49
3．5　RESTful持久化　50
3．5．1　從服務(wù)器上獲取模型　50
3．5．2　保存模型到服務(wù)器　50
3．5．3　從服務(wù)器刪除模型　51
3．5．4　選項(xiàng)　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　依賴(lài)文件　67
3．10　總結(jié)　67
第4章　練習(xí)1：Todos——第一個(gè)Backbone．js應(yīng)用程序　68
4．1　靜態(tài)HTML　69
4．1．1　HTML頭部和Script腳本　69
4．1．2　應(yīng)用程序HTML　70
4．1．3　模板　71
4．2　Todo模型　72
4．3　Todo集合　72
4．4　應(yīng)用程序視圖(AppView)　74
4．5　獨(dú)立的待辦項(xiàng)視圖(TodoView)　79
4．6　程序啟動(dòng)　81
4．7　實(shí)戰(zhàn)操作　82
4．8　標(biāo)記完成或刪除todo項(xiàng)　84
4．9　Todo路由　86
4．10　總結(jié)　88
第5章　練習(xí)2：Book Library——第一個(gè)RESTful風(fēng)格的Backbone．js應(yīng)用程序　89
5．1　程序建立　89
5．2　界面布局　96
5．2．1　添加模型　96
5．2．2　刪除模型　97
5．3　創(chuàng)建后端系統(tǒng)　98
5．3．1　安裝Node．js、npm、MongoDB　98
5．3．2　安裝Node模塊　99
5．3．3　創(chuàng)建簡(jiǎn)單的Web服務(wù)器　99
5．3．4　連接到數(shù)據(jù)庫(kù)　102
5．4　和服務(wù)器通信　108
5．5　總結(jié)　113
第6章　Backbone擴(kuò)展　114
6．1　MarionetteJS(Backbone．Marionette)　114
6．1．1　Boilerplate渲染代碼　116
6．1．2　使用Marionette．ItemView減少Boilerplate　117
6．1．3　內(nèi)存管理　117
6．1．4　區(qū)域管理　120
6．1．5　Marionette Todo應(yīng)用程序　122
6．1．6　Todo應(yīng)用程序的Marionette實(shí)現(xiàn)更具可維護(hù)性嗎？　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　總結(jié)　140
第7章　常見(jiàn)問(wèn)題和解決方案　141
7．1　使用嵌套視圖　141
7．1．1　問(wèn)題　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　問(wèn)題　145
7．2．2　解決方案　145
7．3　在子視圖中渲染父視圖　146
7．3．1　問(wèn)題　146
7．3．2　解決方案　146
7．4　消除視圖層級(jí)結(jié)構(gòu)　147
7．4．1　問(wèn)題　147
7．4．2　解決方案　147
7．5　渲染視圖層級(jí)結(jié)構(gòu)　148
7．5．1　問(wèn)題　148
7．5．2　解決方案　148
7．6　使用嵌套模型或嵌套集合　149
7．6．1　問(wèn)題　149
7．6．2　解決方案　149
7．7　更好的模型屬性驗(yàn)證　150
7．7．1　問(wèn)題　150
7．7．2　解決方案　150
7．7．3　Backbone．validateAll　152
7．7．4　Backbone．Validation　154
7．7．5　特定表單驗(yàn)證類(lèi)　155
7．8　避免多個(gè)Backbone版本的沖突　155
7．8．1　問(wèn)題　155
7．8．2　解決方案　155
7．9　構(gòu)建層級(jí)模型和層級(jí)視圖　156
7．9．1　問(wèn)題　156
7．9．2　解決方案　156
7．9．3　調(diào)用重載方法　157
7．9．4　Backbone-Super　159
7．10　事件聚合器和中介者　159
7．10．1　問(wèn)題　159
7．10．2　解決方案　160
7．10．3　事件聚合器　160
7．10．4　中介者　161
7．10．5　相似性與差異性　162
7．10．6　關(guān)系：何時(shí)用，用哪個(gè)　163
7．10．7　事件聚合器與中介器一起使用　164
7．10．8　模式語(yǔ)言：語(yǔ)義　165
第8章　模塊化開(kāi)發(fā)　166
8．1　使用RequireJS和AMD組織模型　166
8．1．1　多個(gè)腳本文件的可維護(hù)性問(wèn)題　167
8．1．2　需要更好的依賴(lài)管理　167
8．1．3　異步模塊定義(AMD)　168
8．1．4　使用RequireJS編寫(xiě)AMD模塊　168
8．1．5　RequireJS入門(mén)　170
8．1．6　Require．js/Backbone示例　172
8．1．7　使用RequireJS和Text插件將模板保持在外部　176
8．1．8　使用RequireJS優(yōu)化生產(chǎn)環(huán)境中的Backbone應(yīng)用　177
8．2　總結(jié)　180
第9章　練習(xí)3：第一個(gè)模塊化的Backbone/RequireJS應(yīng)用程序　181
9．1　概述　181
9．2　HTML代碼　182
9．3　配置選項(xiàng)　183
9．4　模塊化模型、視圖、集合　184
9．5　基于路由的模塊加載　189
9．5．1　基于JSON的模塊配置　189
9．5．2　模塊加載器　190
9．5．3　使用NodeJS處理pushState　191
9．6　另外一種依賴(lài)管理方式　192
第10章　對(duì)Backbone．js請(qǐng)求和集合進(jìn)行分頁(yè)　193
10．1　Backbone．Paginator　194
10．2　Paginator．requestPager　195
10．3　Paginator．clientPager　199
10．3．1　便利方法　202
10．3．2　實(shí)現(xiàn)備注　204
10．3．3　插件　205
10．3．4　引導(dǎo)　206
10．3．5　樣式化　207
10．4　總結(jié)　208
第11章　Backbone Boilerplate和Grunt-BBB　209
11．1　準(zhǔn)備開(kāi)始　211
11．2　創(chuàng)建新項(xiàng)目　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　創(chuàng)建Backbone樣板模塊　218
11．2．6　router．js　220
11．3　其他有用的工具和項(xiàng)目　221
11．3．1　Yeoman　221
11．3．2　Backbone DevTools　223
11．4　總結(jié)　223
第12章　Backbone和jQuery Mobile　224
12．1　使用jQuery Mobile進(jìn)行移動(dòng)應(yīng)用開(kāi)發(fā)　224
12．1．1　jQMobile漸進(jìn)部件增強(qiáng)原則　225
12．1．2　理解jQuery Mobile導(dǎo)航　226
12．2　Backbone應(yīng)用的基礎(chǔ)設(shè)置(用于jQuery Mobile)　227
12．3　Backbone和jQueryMobile的工作流程　230
12．3．1　路由到具體視圖頁(yè)面，繼承于BasicView　231
12．3．2　移動(dòng)頁(yè)面模板的管理　232
12．3．3　DOM管理與$．mobile．changePage　234
12．4　在Backbone上應(yīng)用jQM高級(jí)技術(shù)　237
12．4．1　動(dòng)態(tài)DOM腳本　237
12．4．2　攔截jQuery Mobile事件　239
12．4．3　性能　240
12．4．4　智能的多平臺(tái)支持管理　241
第13章　Jasmine　246
13．1　行為驅(qū)動(dòng)開(kāi)發(fā)　246
13．2　suite、spec以及spie　248
13．3　beforeEach()和afterEach()　252
13．4　共享作用域　254
13．5　準(zhǔn)備開(kāi)始　255
13．6　TDD與Backbone　256
13．7　模型　256
13．8　集合　258
13．9　視圖　260
13．10　練習(xí)　268
13．11　延伸閱讀　268
13．12　總結(jié)　268
第14章　QUnit　269
14．1　準(zhǔn)備開(kāi)始　269
14．2　斷言　272
14．2．1　使用test(name， callback)編寫(xiě)基礎(chǔ)測(cè)試用例　272
14．2．2　比較函數(shù)的實(shí)際輸出和期望輸出　273
14．3　為斷言添加結(jié)構(gòu)　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　基礎(chǔ)spy　282
15．1．2　在現(xiàn)有函數(shù)上監(jiān)聽(tīng)　282
15．1．3　檢測(cè)接口　282
15．2　stub與mock　284
15．2．1　stub　284
15．2．2　mock　285
15．3　練習(xí)　286
15．3．1　模型　286
15．3．2　集合　288
15．3．3　視圖　289
15．3．4　App　290
15．4　延伸閱讀與資源　291
第16章　結(jié)論　293
附錄A　延伸學(xué)習(xí)　295
附錄B　資源　313
封面介紹　316