JavaScript編程實(shí)戰(zhàn)

目　錄
第一部分　堅(jiān)實(shí)的基礎(chǔ)
第1章　最佳實(shí)踐　2
1．1　松耦合　2
1．1．1　緊耦合的問(wèn)題　2
1．1．2　松耦合的優(yōu)勢(shì)　3
1．2　JavaScript MVC和模板　3
1．2．1　MVC　3
1．2．2　模板　5
1．3　開(kāi)發(fā)工具　6
1．3．1　WebKit開(kāi)發(fā)人員工具　6
1．3．2　Weinre　10
1．3．3　版本控制　12
1．3．4　CSS預(yù)處理　12
1．4　測(cè)試　12
1．4．1　使用Grunt　13
1．4．2　使用QUnit　17
1．5　小結(jié)　20
1．6　補(bǔ)充資源　21
第2章　庫(kù)、框架與插件　22
2．1　選擇恰當(dāng)?shù)腏avaScript庫(kù)　22
2．1．1　jQuery　22
2．1．2　Zepto　24
2．1．3　普通的DOM　25
2．2　使用框架　27
2．2．1　Bootstrap　27
2．2．2　jQuery UI　28
2．2．3　移動(dòng)框架　28
2．3　其他腳本　28
2．3．1　Modernizr　28
2．3．2　HTML5 Shiv　29
2．4　HTML5樣板　29
2．5　尋找jQuery插件　30
2．5．1　去哪里(以及不要去哪里)找　30
2．5．2　要找什么——一個(gè)十項(xiàng)檢查列表　30
2．6　小結(jié)　32
2．7　補(bǔ)充資源　32
第二部分　構(gòu)建前端
第3章　Backbone．js　36
3．1　初識(shí)Backbone　36
3．1．1　Backbone是什么　36
3．1．2　為什么要用Backbone　36
3．1．3　Backbone基礎(chǔ)　37
3．1．4　什么時(shí)候用Backbone　37
3．1．5　設(shè)置Backbone　38
3．2　Backbone中的模型　38
3．2．1　創(chuàng)建一個(gè)模型　39
3．2．2　創(chuàng)建計(jì)算屬性　39
3．2．3　設(shè)置默認(rèn)值　39
3．2．4　使用初始化函數(shù)　40
3．2．5　使用Backbone事件　40
3．2．6　模型的校驗(yàn)　41
3．3　使用Backbone中的集合　42
3．3．1　創(chuàng)建集合　42
3．3．2　創(chuàng)建集合事件　43
3．4　理解Backbone視圖　43
3．4．1　創(chuàng)建視圖　44
3．4．2　使用渲染函數(shù)　44
3．4．3　使用Backbone中的視圖元素　46
3．4．4　使用嵌套視圖　49
3．5　數(shù)據(jù)的保存及獲取　55
3．5．1　與服務(wù)器上的模型同步　55
3．5．2　在Backbone中使用LocalStorage API　58
3．5．3　把集合保存在服務(wù)器上　59
3．5．4　使用Backbone．sync　65
3．6　使用路由控制器　66
3．6．1　路由如何使用　66
3．6．2　設(shè)置路由控制器　67
3．6．3　PushState與Hashchange　69
3．7　再談事件　70
3．7．1　事件解綁定　71
3．7．2　手動(dòng)觸發(fā)事件　71
3．7．3　綁定“this”　71
3．7．4　All事件　72
3．8　操作集合　73
3．8．1　取出集合中的條目　73
3．8．2　集合排序　74
3．9　小結(jié)　76
3．10　補(bǔ)充資源　77
第4章　使用JavaScript模板　78
4．1　認(rèn)識(shí)模板　78
4．1．1　為什么使用模板　78
4．1．2　了解不同的模板庫(kù)　79
4．1．3　做出正確的選擇　80
4．2　使用Underscore模板　81
4．2．1　Underscore模板基礎(chǔ)知識(shí)　81
4．2．2　重溫模板的最佳實(shí)踐　83
4．2．3　在模板中使用JavaScript　85
4．3　在Backbone中使用模板　88
4．3．1　不用模板設(shè)置模型和視圖　88
4．3．2　用模板渲染視圖　89
4．4　小結(jié)　92
4．5　補(bǔ)充資源　92
第5章　創(chuàng)建表單　93
5．1　理解漸進(jìn)式增強(qiáng)　93
5．1．1　漸進(jìn)式增強(qiáng)方式　93
5．1．2　為什么要漸進(jìn)式增強(qiáng)　94
5．1．3　決定支持哪個(gè)環(huán)境　94
5．2　讓HTML5替你工作　95
5．2．1　HTML5的輸入控件類(lèi)型　95
5．2．2　交互特性　102
5．3　給老瀏覽器用Polyfill　104
5．3．1　尋找第三方Polyfill　105
5．3．2　編寫(xiě)自己的Polyfill　105
5．4　連接REST API　112
5．4．1　提交表單　113
5．4．2　構(gòu)建通用函數(shù)　114
5．5　Backbone中的表單　115
5．5．1　設(shè)置表單模型　115
5．5．2　設(shè)置表單視圖　116
5．5．3　將表單域保存到模型中　117
5．5．4　添加校驗(yàn)　118
5．5．5　清理模板　123
5．5．6　必填項(xiàng)　124
5．5．7　提交表單　126
5．5．8　合并代碼　128
5．6　小結(jié)　132
5．7　補(bǔ)充資源　132
第三部分　編寫(xiě)服務(wù)器端JavaScript
第6章　Node．js簡(jiǎn)介　136
6．1　為什么是Node　136
6．1．1　在實(shí)時(shí)程序中使用Node　136
6．1．2　Node的工作機(jī)制　137
6．2　安裝Node　138
6．2．1　在Mac/Linux上安裝　138
6．2．2　在Windows上安裝　139
6．2．3　檢查安裝情況　140
6．3　Node入門(mén)　140
6．3．1　創(chuàng)建服務(wù)器　140
6．3．2　添加內(nèi)容　141
6．3．3　打包　141
6．3．4　運(yùn)行腳本　142
6．3．5　簡(jiǎn)化腳本　143
6．3．6　使用Node REPL　143
6．4　Node模塊　145
6．4．1　引入模塊　145
6．4．2　外部模塊和NPM　146
6．4．3　尋找模塊　147
6．5　Node 模式　148
6．5．1　模塊和全局變量　148
6．5．2　異步模式　152
6．5．3　事件　154
6．5．4　子進(jìn)程　155
6．6　小結(jié)　158
6．7　補(bǔ)充資源　158
第7章　Express框架　160
7．1　Express入門(mén)　160
7．1．1　安裝Express　160
7．1．2　創(chuàng)建Express程序　160
7．2　設(shè)置路由　161
7．2．1　已有路由　162
7．2．2　創(chuàng)建新的路由　163
7．2．3　POST、PUT和DELETE　163
7．3　渲染視圖　164
7．3．1　啟用Underscore模板　164
7．3．2　創(chuàng)建視圖　166
7．4　處理表單數(shù)據(jù)　172
7．4．1　創(chuàng)建POST路由　172
7．4．2　將反饋發(fā)給模板　173
7．5　發(fā)封郵件　178
7．5．1　連到SMTP服務(wù)器上　178
7．5．2　構(gòu)建Email消息　179
7．5．3　發(fā)送郵件　179
7．5．4　在結(jié)束之前　180
7．6　小結(jié)　182
7．7　補(bǔ)充資源　182
第8章　MongoDB　184
8．1　NoSQL數(shù)據(jù)庫(kù)有什么好處　184
8．1．1　擴(kuò)展能力　184
8．1．2　簡(jiǎn)單性　184
8．2　MongoDB入門(mén)　185
8．2．1　安裝MongoDB　185
8．2．2　運(yùn)行MongoDB　186
8．2．3　安裝MongoDB模塊　187
8．2．4　創(chuàng)建數(shù)據(jù)庫(kù)　187
8．3　MongoDB中的CRUD　188
8．3．1　創(chuàng)建集合　188
8．3．2　讀取數(shù)據(jù)　190
8．3．3　更新數(shù)據(jù)　194
8．3．4　刪除數(shù)據(jù)　196
8．4　Mongoose　197
8．4．1　Mongoose入門(mén)　197
8．4．2　創(chuàng)建模型　198
8．4．3　讀取數(shù)據(jù)　200
8．5　數(shù)據(jù)庫(kù)上的其他選擇　204
8．6　小結(jié)　204
8．7　補(bǔ)充資源　204
第四部分　挑戰(zhàn)極限
第9章　用WebSockets構(gòu)建實(shí)時(shí)程序　208
9．1　WebSockets的工作機(jī)制　208
9．1．1　輪詢(xún)的問(wèn)題　208
9．1．2　WebSockets方案　209
9．2　Socket．IO入門(mén)　210
9．2．1　服務(wù)器上的Socket．IO　210
9．2．2　客戶端的Socket．IO　211
9．3　構(gòu)建實(shí)時(shí)的聊天室　212
9．3．1　創(chuàng)建聊天室視圖　212
9．3．2　將消息提交給服務(wù)器　214
9．3．3　在服務(wù)器端處理消息　215
9．3．4　在客戶端顯示新消息　216
9．3．5　添加Backbone．js結(jié)構(gòu)　217
9．3．6　添加用戶　223
9．3．7　添加時(shí)間戳　225
9．3．8　保存到MongoDB中　227
9．3．9　合并代碼　229
9．4　小結(jié)　233
9．5　補(bǔ)充資源　234
第10章　進(jìn)入移動(dòng)領(lǐng)域　235
10．1　搭建移動(dòng)App　235
10．1．1　檢測(cè)移動(dòng)終端　235
10．1．2　設(shè)置移動(dòng)端網(wǎng)站的樣式　237
10．1．3　移動(dòng)端框架　238
10．2　集成觸屏　238
10．2．1　基本觸摸事件　239
10．2．2　復(fù)雜的觸摸手勢(shì)　239
10．3　Geolocation　248
10．3．1　找到用戶的位置　248
10．3．2　連接Google地圖　249
10．3．3　追蹤Geolocation的變化　251
10．4　電話號(hào)碼和短信　251
10．4．1　靜態(tài)的電話號(hào)碼和SMS鏈接　251
10．4．2　用JavaScript撥打電話和發(fā)送短信　252
10．5　PhoneGap　252
10．5．1　PhoneGap的優(yōu)與劣　253
10．5．2　PhoneGap入門(mén)　254
10．5．3　連接相機(jī)　254
10．5．4　連接通訊錄　254
10．5．5　其他API　255
10．6　小結(jié)　255
10．7　補(bǔ)充資源　255
第11章　JavaScript圖形　257
11．1　畫(huà)布基礎(chǔ)　257
11．1．1　畫(huà)出基本的形狀　258
11．1．2　讓畫(huà)布動(dòng)起來(lái)　260
11．1．3　畫(huà)布中的鼠標(biāo)事件　261
11．2　SVG基礎(chǔ)　261
11．2．1　讓SVG動(dòng)起來(lái)　262
11．2．2　SVG鼠標(biāo)事件　262
11．2．3　編碼SVG　263
11．3　Rapha?l．js　263
11．3．1　作畫(huà)路徑　264
11．3．2　畫(huà)曲線　265
11．3．3　樣式　266
11．3．4　動(dòng)畫(huà)　268
11．3．5　鼠標(biāo)事件　269
11．4　用gRapha?l做圖表　270
11．4．1　餅圖　270
11．4．2　柱狀圖　271
11．4．3　折線圖　273
11．5　帶WebGL的3D畫(huà)布　276
11．5．1　Three．js簡(jiǎn)介　276
11．5．2　創(chuàng)建圖像紋理　280
11．5．3　3D動(dòng)畫(huà)　281
11．5．4　添加鼠標(biāo)事件　282
11．5．5　使用備選的2D畫(huà)布　283
11．6　CSS中的3D變換　284
11．7　小結(jié)　286
11．8　補(bǔ)充資源　286
第12章　推出你的程序　288
12．1　性能檢查表　288
12．1．1　重點(diǎn)在哪　288
12．1．2　資源管理　290
12．1．3　動(dòng)畫(huà)優(yōu)化　291
12．1．4　少做為妙　295
12．1．5　規(guī)避回流　295
12．2　部署　296
12．2．1　把靜態(tài)資源部署在CDN上　296
12．2．2　把Node服務(wù)部署在EC2上　297
12．3　推出　297
12．4　補(bǔ)充資源　297
附錄A　用LESS做CSS預(yù)處理　299
A．1　LESS簡(jiǎn)介　299
A．1．1　預(yù)處理的好處　299
A．1．2　安裝LESS編譯器　300
A．1．3　在服務(wù)器上編譯　300
A．2　LESS的基礎(chǔ)知識(shí)　300
A．2．1　變量　300
A．2．2　操作符　301
A．2．3　嵌套　302
A．3　函數(shù)和Mixin　304
A．3．1　函數(shù)　304
A．3．2　Mixin　305
A．4　文件結(jié)構(gòu)　306
A．4．1　使用Import　306
A．4．2　文件結(jié)構(gòu)示例　306
A．4．3　定制結(jié)構(gòu)　307
A．5　小結(jié)　307
A．6　補(bǔ)充資源　307