Backbone.js實(shí)戰(zhàn)

前　言
第1章　初識(shí)Backbone 1
1.1　Backbone簡(jiǎn)介 1
1.1.1　Backbone的MVC結(jié)構(gòu) 1
1.1.2　特點(diǎn)及適用范圍 2
1.2　如何搭建開發(fā)Backbone應(yīng)用的框架 3
1.2.1　Backbone.js主框架文件 3
1.2.2　Underscore.js依賴庫文件 3
1.2.3　第三方JavaScript庫 5
1.3　Backbone依賴庫的使用 5
1.3.1　使用_.bindAll()函數(shù)綁定對(duì)象方法 5
1.3.2　使用_.keys()函數(shù)檢索對(duì)象屬性名稱 7
1.4　開發(fā)第一個(gè)Backbone頁面 7
1.5　本章小結(jié) 10
第2章　依賴庫Underscore 11
2.1　Underscore簡(jiǎn)介 11
2.1.1　Underscore對(duì)象封裝 11
2.1.2　Underscore庫的類型模塊 12
2.2　集合 13
2.2.1　each()和map()函數(shù) 13
2.2.2　find()和filter()函數(shù) 15
2.2.3　max()和min()函數(shù) 16
2.2.4　sortBy()和groupBy()函數(shù) 17
2.3　數(shù)組 18
2.3.1　first()和last()函數(shù) 19
2.3.2　indexOf()和lastIndexOf()函數(shù) 20
2.3.3　without()和union()函數(shù) 21
2.4　函數(shù) 22
2.4.1　delay()函數(shù) 22
2.4.2　once ()函數(shù) 22
2.4.3　wrap ()函數(shù) 23
2.4.4　compose()函數(shù) 23
2.5　對(duì)象 24
2.5.1　keys()和values()函數(shù) 24
2.5.2　pick()和omit()函數(shù) 25
2.5.3　defaults()函數(shù) 26
2.5.4　has()函數(shù) 27
2.6　功能 28
2.6.1　random()函數(shù) 28
2.6.2　escape()和unescape()函數(shù) 28
2.6.3　template()函數(shù) 29
2.6.4　chain()函數(shù) 33
2.7　本章小結(jié) 34
第3章　事件管理 35
3.1　Backbone.Events模塊API結(jié)構(gòu) 35
3.2　基本事件方法 36
3.2.1　綁定on方法 36
3.2.2　綁定一次once方法 42
3.2.3　觸發(fā)事件trigger方法 43
3.2.4　移除事件off方法 45
3.3　新增事件方法 49
3.3.1　監(jiān)聽事件listenTo方法 49
3.3.2　監(jiān)聽一次listenToOnce方法 50
3.3.3　停止監(jiān)聽stopListening方法 52
3.4　事件其他 53
3.4.1　特殊事件all的使用 54
3.4.2　事件與Model、Collection、View的關(guān)系 55
3.5　本章小結(jié) 58
第4章　數(shù)據(jù)模型 59
4.1　創(chuàng)建數(shù)據(jù)模型 59
4.1.1　創(chuàng)建一個(gè)簡(jiǎn)單模型對(duì)象 59
4.1.2　對(duì)象模型賦值的方法 60
4.1.3　自定義模型中的方法 62
4.1.4　監(jiān)聽對(duì)象屬性值變化 63
4.2　模型對(duì)象操作 65
4.2.1　讀取數(shù)據(jù) 65
4.2.2　修改數(shù)據(jù) 66
4.2.3　開啟數(shù)據(jù)驗(yàn)證 67
4.2.4　關(guān)閉數(shù)據(jù)驗(yàn)證 69
4.2.5　更新數(shù)據(jù)回滾 70
4.2.6　刪除數(shù)據(jù) 71
4.3　對(duì)象屬性操作 73
4.3.1　attributes對(duì)象 73
4.3.2　previous和previousAttributes方法 75
4.3.3　set方法的內(nèi)部順序 77
4.4　同步數(shù)據(jù)到服務(wù)器 78
4.4.1　save方法 78
4.4.2　fetch方法 83
4.4.3　destroy方法 84
4.5　本章小結(jié) 86
第5章　模型集合 87
5.1　創(chuàng)建集合對(duì)象 87
5.1.1　自定義集合對(duì)象 87
5.1.2　實(shí)例化集合對(duì)象 89
5.1.3　自定義集合方法 90
5.2　操作集合中模型對(duì)象 91
5.2.1　移除集合對(duì)象中的模型 91
5.2.2　添加集合對(duì)象中的模型 94
5.2.3　查找集合對(duì)象中的模型 96
5.2.4　集合中模型對(duì)象的排序 99
5.3　與服務(wù)器交互集合中模型對(duì)象 102
5.3.1　調(diào)用fetch方法獲取服務(wù)器數(shù)據(jù) 102
5.3.2　調(diào)用create方法與服務(wù)器同步數(shù)據(jù) 104
5.4　本章小結(jié) 110
第6章　視圖 111
6.1　視圖基礎(chǔ) 111
6.1.1　定義視圖對(duì)象 111
6.1.2　視圖對(duì)象訪問模型對(duì)象 114
6.1.3　視圖對(duì)象訪問集合對(duì)象 116
6.2　視圖中的模板 118
6.2.1　處理邏輯的模板 118
6.2.2　顯示多項(xiàng)內(nèi)容的模板 120
6.2.3　自定義模板變量標(biāo)記 123
6.3　視圖中的元素事件 125
6.3.1　視圖中簡(jiǎn)單事件綁定 126
6.3.2　綁定視圖模板中的多個(gè)事件 128
6.3.3　動(dòng)態(tài)綁定和取消視圖中的事件 130
6.4　使用Backbone框架開發(fā)前端Web應(yīng)用 134
6.4.1　功能描述 134
6.4.2　實(shí)現(xiàn)代碼 135
6.4.3　頁面效果 137
6.4.4　源碼分析 137
6.5　本章小結(jié) 138
第7章　導(dǎo)航控制器 139
7.1　瀏覽器導(dǎo)航基礎(chǔ) 139
7.1.1　history對(duì)象 139
7.1.2　HTML 5中history對(duì)象API 142
7.1.3　location對(duì)象 145
7.2　綁定導(dǎo)航地址 147
7.2.1　action方式綁定URL地址 147
7.2.2　event方式綁定URL地址 150
7.2.3　定義hash屬性綁定規(guī)則 151
7.3　router類中的方法 154
7.3.1　route方法的使用 154
7.3.2　navigate方法的使用 156
7.4　history對(duì)象的stop方法 158
7.5　本章小結(jié) 161
第8章　綜合案例：Backbone框架開發(fā)Web應(yīng)用 162
8.1　案例1：學(xué)生信息管理系統(tǒng) 162
8.1.1　需求分析 162
8.1.2　界面效果 162
8.1.3　功能實(shí)現(xiàn) 165
8.1.4　代碼分析 170
8.2　案例2：人員資料管理系統(tǒng) 174
8.2.1　需求分析 174
8.2.2　界面效果 174
8.2.3　功能實(shí)現(xiàn) 178
8.2.4　代碼分析 186
8.3　本章小結(jié) 190
第9章　Require框架基礎(chǔ)知識(shí) 191
9.1　構(gòu)建Require框架開發(fā)環(huán)境 191
9.1.1　下載Require文件庫 191
9.1.2　異步方式加載文件庫 192
9.2　加載主模塊 192
9.3　加載自定模塊 193
9.3.1　示例文件間的層次關(guān)系 194
9.3.2　加載key/value格式模塊 194
9.3.3　加載函數(shù)模塊 196
9.3.4　加載存在依賴關(guān)系的函數(shù)模塊 197
9.4　Require的配置選項(xiàng) 199
9.4.1　加載指定路徑的模塊文件 200
9.4.2　加載非AMD標(biāo)準(zhǔn)的模塊文件 201
9.4.3　加載Require插件模塊文件 203
9.5　本章小結(jié) 204
第10章　綜合案例：Require + jQuery Mobile + Backbone框架開發(fā) 205
10.1　案例1：簡(jiǎn)單的移動(dòng)端WebApp 205
10.1.1　需求分析 205
10.1.2　界面效果 206
10.1.3　功能實(shí)現(xiàn) 206
10.1.4　代碼分析 211
10.2　案例2：移動(dòng)端的新聞瀏覽應(yīng)用 212
10.2.1　需求分析 212
10.2.2　界面效果 212
10.2.3　功能實(shí)現(xiàn) 213
10.2.4　代碼分析 221
10.3　本章小結(jié) 223
示例目錄
第1章　初識(shí)Backbone 1
示例1-1   調(diào)用_.bindAll()函數(shù)顯示hello, underscore! 6
示例1-2   第一個(gè)MVC頁面hello,backbone! 8
第2章　依賴庫Underscore 11
示例2-1   模板標(biāo)簽的使用 31
第3章　事件管理 35
示例3-1　使用on方法監(jiān)聽默認(rèn)事件 36
示例3-2　使用on方法監(jiān)聽屬性事件 37
示例3-3　使用on方法獲取屬性修改前的值 38
示例3-4　使用on方法綁定多個(gè)事件 40
示例3-5　使用once方法綁定事件 43
示例3-6　使用trigger方法觸發(fā)事件 44
示例3-7　使用off方法移除對(duì)象的某個(gè)或多個(gè)綁定事件 45
示例3-8　使用off方法移除綁定事件的某個(gè)函數(shù) 47
示例3-9　使用off方法移除對(duì)象的全部綁定事件 48
示例3-10　使用listenTo方法監(jiān)聽事件 49
示例3-11　使用listenToOnce方法監(jiān)聽事件 51
示例3-12　使用stopListening方法停止監(jiān)聽 52
示例3-13　all事件的使用 54
示例3-14　在View模塊中定義事件 56
第4章　數(shù)據(jù)模型 59
示例4-1　創(chuàng)建一個(gè)簡(jiǎn)單模型對(duì)象 59
示例4-2　對(duì)象模型賦值的方法 61
示例4-3　自定義PrintLog方法 62
示例4-4　監(jiān)聽Name屬性值的變化 63
示例4-5　調(diào)用get方法獲取對(duì)象指定的屬性值 65
示例4-6　調(diào)用set方法批量重置默認(rèn)屬性值 66
示例4-7　開啟數(shù)據(jù)驗(yàn)證 67
示例4-8　關(guān)閉數(shù)據(jù)驗(yàn)證 69
示例4-9　更新數(shù)據(jù)回滾 70
示例4-10　調(diào)用unset方法刪除指定屬性的數(shù)據(jù) 72
示例4-11　調(diào)用attributes對(duì)象獲取全部的屬性值 74
示例4-12　調(diào)用previousAttributes方法返回?cái)?shù)據(jù) 75
示例4-13　使用save方法發(fā)送數(shù)據(jù) 78
示例4-14　使用save方法接收返回值 80
示例4-15　使用save方法時(shí)設(shè)置wait屬性 81
示例4-16　使用fetch方法獲取服務(wù)器數(shù)據(jù) 83
示例4-17　使用destroy方法從服務(wù)器刪除數(shù)據(jù) 84
第5章　模型集合 87
示例5-1　自定義集合對(duì)象 87
示例5-2　實(shí)例化集合對(duì)象 89
示例5-3　自定義集合方法 90
示例5-4　移除集合對(duì)象中的模型 92
示例5-5　添加集合對(duì)象中的模型 94
示例5-6　查找集合對(duì)象中的模型 97
示例5-7　集合中模型對(duì)象的排序 100
示例5-8　調(diào)用fetch方法獲取服務(wù)器數(shù)據(jù) 102
示例5-9　POST和PUT方式發(fā)送數(shù)據(jù) 105
示例5-10　觸發(fā)集合的add事件 107
示例5-11　設(shè)置wait和silent屬性 108
第6章　視圖 111
示例6-1　通過視圖對(duì)象添加DOM元素 112
示例6-2　視圖對(duì)象訪問模型對(duì)象 114
示例6-3　視圖對(duì)象訪問集合對(duì)象 116
示例6-4　處理邏輯的模板 118
示例6-5　顯示多項(xiàng)內(nèi)容的模板 120
示例6-6　自定義模板變量標(biāo)記 123
示例6-7　視圖中簡(jiǎn)單事件綁定 126
示例6-8　綁定視圖模板中的多個(gè)事件 128
示例6-9　動(dòng)態(tài)綁定和取消視圖中的事件 131
第7章　導(dǎo)航控制器 139
示例7-1　history對(duì)象的方法 140
示例7-2　HTML 5中history對(duì)象的方法 143
示例7-3　location對(duì)象的屬性和方法 146
示例7-4　action方式綁定URL地址 148
示例7-5　event方式綁定URL地址 150
示例7-6　定義hash屬性綁定規(guī)則 152
示例7-7　使用route方法聲明匹配規(guī)則和執(zhí)行函數(shù) 154
示例7-8　使用navigate方法實(shí)現(xiàn)動(dòng)態(tài)刷新 156
示例7-9　使用stop方法切換動(dòng)態(tài)無刷新顯示內(nèi)容 159
第8章　綜合案例：Backbone框架開發(fā)Web應(yīng)用 162
案例1　學(xué)生信息管理系統(tǒng) 162
案例2　人員資料管理系統(tǒng) 174
第9章　Require框架基礎(chǔ)知識(shí) 191
示例9-1　通過主模塊加載jQuery框架 192
示例9-2　加載自定義的key/value格式模塊 194
示例9-3　加載自定義函數(shù)模塊 196
示例9-4　加載存在依賴關(guān)系的自定義函數(shù)模塊 198
示例9-5　加載指定路徑的模塊文件 200
示例9-6　加載非AMD標(biāo)準(zhǔn)的模塊文件 201
示例9-7　加載Require插件模塊文件 203
第10章　綜合案例：Require + jQuery Mobile + Backbone框架開發(fā) 205
案例1　簡(jiǎn)單的移動(dòng)端WebApp應(yīng)用 205
案例2　移動(dòng)端的新聞瀏覽應(yīng)用 212