前端跨界開(kāi)發(fā)指南：JavaScript工具庫(kù)原理解析與實(shí)戰(zhàn)

【基礎(chǔ)篇】
第1章　Mock.js：如何與后端瀟灑分手2
1.1　為什么你總是下不了班3
1.2　聯(lián)調(diào)加速4
1.3　使用Mock.js4
1.3.1　Mock.js的語(yǔ)法規(guī)范5
1.3.2　Mock.js實(shí)戰(zhàn)6
1.3.3　自定義擴(kuò)展8
1.4　Mock.js的基本原理9
1.4.1　從模板到數(shù)據(jù)9
1.4.2　為Ajax請(qǐng)求提供Mock數(shù)據(jù)11
1.5　從Mock服務(wù)到API管理平臺(tái)14
第2章　Node.js：連接16
2.1　大話Node.js16
2.1.1　Node.js是什么16
2.1.2　Node.js能做什么17
2.1.3　招黑的JavaScript全棧工程師19
2.2　業(yè)界用Node.js做什么19
2.2.1　前端工程化20
2.2.2　中間層20
2.2.3　SSR引擎21
2.2.4　協(xié)作連接22
2.3　小結(jié)22
第3章　ESLint：你的代碼里藏著你的優(yōu)雅24
3.1　代碼風(fēng)格與破窗理論25
3.2　用editorconfig配置IDE28
3.2.1　基本語(yǔ)法及屬性29
3.2.2　配置實(shí)例29
3.3　使用ESLint規(guī)范編程風(fēng)格30
3.3.1　配置文件和規(guī)則集30
3.3.2　ESLint插件開(kāi)發(fā)實(shí)戰(zhàn)32
3.3.3　初學(xué)者的修行32
3.4　新秀工具Prettier33
3.5　 靜態(tài)類型檢查工具的實(shí)現(xiàn)原理34
3.5.1　編譯語(yǔ)言和解釋語(yǔ)言34
3.5.2　編譯流程34
3.5.3　編譯簡(jiǎn)單的JavaScript程序35
第4章　模塊演義與Require.js39
4.1　 模塊化的需求推演40
4.1.1　script標(biāo)簽40
4.1.2　代碼隔離41
4.1.3　依賴管理42
4.2　 模塊規(guī)范大雜燴43
4.2.1　概述43
4.2.2　幾個(gè)重要的差異44
4.3　模塊化規(guī)范的兼容與工具演進(jìn)48
4.4　Require.js的使用方法50
4.5　Require.js的核心原理52
第5章　Lodash.js是工具，更是秘籍55
5.1　Lodash.js是什么55
5.1.1　概述56
5.1.2　代碼的較量56
5.2　重點(diǎn)API的剖析59
5.3　Lodash.js的源碼結(jié)構(gòu)62
5.3.1　基本結(jié)構(gòu)62
5.3.2　Lodash.js源碼的學(xué)習(xí)方法63
第6章　靜態(tài)類型檢查：Flow.js和TypeScript64
6.1　靜態(tài)類型檢查65
6.1.1　靜態(tài)類型檢查的優(yōu)勢(shì)65
6.1.2　靜態(tài)類型檢查的劣勢(shì)66
6.2　Flow.js，易上手的靜態(tài)類型檢查工具67
6.2.1　Flow.js中的類型標(biāo)注67
6.2.2　Flow.js的優(yōu)勢(shì)68
6.3　TypeScript，另一種選擇69
第7章　用函數(shù)描述世界：Ramda.js71
7.1　本能的思考方式71
7.2　開(kāi)始編碼72
7.2.1　傳統(tǒng)編程的實(shí)現(xiàn)72
7.2.2　函數(shù)式編程的推演73
7.2.3　函數(shù)式編程的意義76
7.2.4　函數(shù)式編程的基本理論77
7.3　基于Ramda.js體驗(yàn)函數(shù)式編程79
7.3.1　使用Ramda.js80
7.3.2　函數(shù)化的流程控制81
7.4　選擇82
第8章　Rxjs：前端世界的“老人與?！?3
8.1　信息管道84
8.1.1　不同的“單一職責(zé)”84
8.1.2　分布式狀態(tài)的可能性86
8.1.3　你的程序在做什么87
8.2　數(shù)據(jù)的生產(chǎn)88
8.2.1　數(shù)據(jù)源的抽象88
8.2.2　設(shè)計(jì)模式的應(yīng)用90
8.3　Rxjs：一切皆是流的世界91
8.3.1　Rxjs的核心概念92
8.3.2　Rxjs應(yīng)用實(shí)例94
8.3.3　新版“老人與?！?00
8.4　以自己喜歡的方式去編程101
第9章　不可變數(shù)據(jù)的制造藝術(shù)：Immer.js和Immutable.js102
9.1　克隆103
9.1.1　淺克隆103
9.1.2　深克隆103
9.2　元編程與Immer.js104
9.2.1　元編程105
9.2.2　Immer.js的核心原理106
9.3　Immutable.js與共享結(jié)構(gòu)112
9.3.1　Immutable.js簡(jiǎn)介113
9.3.2　Immutable.js的核心原理113
9.3.3　Immutable.js中的讀寫操作117
9.4　小結(jié)119
第10章　Day.js：算個(gè)日期能有多難121
10.1　日期和時(shí)間121
10.2　使用Day.js125
10.3　國(guó)際化應(yīng)用開(kāi)發(fā)中的時(shí)間處理127

【圖形學(xué)篇】
第11章　所見(jiàn)即所得的流程圖：jsplumb.js和viz.js130
11.1　方案構(gòu)思130
11.2　開(kāi)始使用jsplumb.js132
11.3　圖布局引擎viz.js135
11.4　所見(jiàn)即所得137
第12章　easel.js：一個(gè)標(biāo)簽一個(gè)世界139
12.1　能玩一生的標(biāo)簽139 12.1.1　基本語(yǔ)法介紹139
12.1.2　動(dòng)畫模式141
12.2　用easel.js操作Canvas142
12.3　工具庫(kù)的封裝技巧144
第13章　Echarts.js： 看見(jiàn)147
13.1　數(shù)據(jù)可視化生態(tài)148
13.2　開(kāi)始使用Echarts.js148
13.2.1　Echarts的正確打開(kāi)方式149
13.2.2　重點(diǎn)API151
13.2.3　配置項(xiàng)152
13.3　數(shù)據(jù)可視化三步曲153
13.3.1　數(shù)據(jù)準(zhǔn)備153
13.3.2　圖表選型153
13.3.3　細(xì)節(jié)打磨155
13.4　下一步的選擇158
第14章　SVG變形記159
14.1　矢量圖的世界159
14.1.1　SVG圖形159
14.1.2　SVG的高級(jí)功能160
14.2　SVG變形165
14.2.1　SVG動(dòng)畫與CSS3動(dòng)畫165
14.2.2　經(jīng)典SVG動(dòng)畫166
14.3　Snap.svg快速入門168
14.3.1　Snap方法集168
14.3.2　Snap.svg實(shí)戰(zhàn)169
14.4　取舍171
第15章　Three.js：構(gòu)建立體的用戶界面172
15.1　三維世界的腳手架Three.js173
15.1.1　核心概念173
15.1.2　分解網(wǎng)格模型175
15.1.3　Three.js的基本使用方法177
15.2　實(shí)戰(zhàn)：用Three.js制作漫威電影片頭動(dòng)畫179
15.2.1　特效一：平面漸離180
15.2.2　特效二：字體浮雕模型181
15.2.3　特效三：視頻紋理貼圖183
15.2.4　特效四：鏡頭轉(zhuǎn)換185
15.3　Three.js如何參與渲染186
15.3.1　相機(jī)模式和降維打擊186
15.3.2　著色器190
15.3.3　WebGL的渲染流程192
15.4　用Cinema4D玩轉(zhuǎn)跨界193

【多媒體篇】
第16章　Impress.js：網(wǎng)頁(yè)里的PPT200
16.1　Impress.js的應(yīng)用及原理200
16.1.1　快速上手Impress.js200
16.1.2　Impress.js的實(shí)現(xiàn)原理202
16.2　詳解CSS變形和動(dòng)畫203
16.2.1　幀和關(guān)鍵幀204
16.2.2　CSS補(bǔ)間動(dòng)畫206
16.3　軟技能：PPT設(shè)計(jì)208
16.3.1　內(nèi)容為王208
16.3.2　設(shè)計(jì)入門課209
第17章　Velocity.js與高性能動(dòng)畫之謎211
17.1　CSS動(dòng)畫和JavaScript動(dòng)畫211
17.1.1　CSS動(dòng)畫212
17.1.2　JavaScript動(dòng)畫214
17.2　Velocity.js入門指南216
17.2.1　stagger交錯(cuò)動(dòng)畫217
17.2.2　在SPA框架中編寫動(dòng)畫219
17.3　高性能動(dòng)畫的秘密223
17.3.1　像素渲染管線224
17.3.2　回流、重繪與合成226
17.3.3　使用合成層獲得高性能227
17.3.4　隱式提升陷阱229
17.4　小結(jié)231
第18章　扭曲時(shí)間：tween.js和jQuery Easing Plugin232
18.1　緩動(dòng)函數(shù)233
18.2　貝賽爾曲線234
18.2.1　繪制原理234
18.2.2　貝賽爾曲線的特性236
18.3　使用Tween.js和jQuery Easing Plugin237
18.4　選擇恰當(dāng)?shù)木弰?dòng)函數(shù)239
第19章　用Recorder.js實(shí)現(xiàn)語(yǔ)音信號(hào)處理241
19.1　百度語(yǔ)音識(shí)別實(shí)戰(zhàn)241
19.1.1　工業(yè)系統(tǒng)測(cè)量的預(yù)備知識(shí)242
19.1.2　改造Recorder.js243
19.2　Web Audio API的工作模式246
19.2.1　中間件式的音頻處理圖246
19.2.2　Recorder.js核心原理：Script-ProcessorNode247
19.2.3　淺談ArrayBuffer250
第20章　jsmpeg.js流媒體播放器253
20.1　視頻編解碼技術(shù)入門254
20.1.1　基礎(chǔ)知識(shí)254
20.1.2　初識(shí)傳輸流255
20.2　現(xiàn)代瀏覽器中的播放技術(shù)258
20.2.1　Media Source Extension259
20.2.2　其他格式的媒體資源261
20.3　切片技術(shù)與TS文件解析262
20.3.1　文件切片技術(shù)　262
20.3.2　解析TS切片263
20.4　jsmpeg.js源碼結(jié)構(gòu)和低延遲播放實(shí)例266

【跨端開(kāi)發(fā)篇】
第21章　“懶”是第一生產(chǎn)力：制作命令行工具272
21.1　Commander.js與Git風(fēng)格的命令行工具273
21.2　Inquirer.js與交互式命令行工具275
21.3　從工具化到工程化277
第22章　用Shelljs實(shí)現(xiàn)自動(dòng)化部署279
22.1　Linux入門小課279
22.2　實(shí)用的跨平臺(tái)工具281
22.3　實(shí)戰(zhàn)：使用Shelljs和node-ssh完成自動(dòng)化部署283
22.4　下一站：性能監(jiān)控288
第23章　跨端技術(shù)的秘密289
23.1　Cordova的前世今生290
23.2　React Native291
23.3　小程序292
23.4　原生App與網(wǎng)頁(yè)的通信294
23.5　小結(jié)296
第24章　protobuf與二進(jìn)制消息298
24.1　前端常見(jiàn)的消息格式298
24.2　二進(jìn)制消息格式：protobuf302
24.3　使用protobuf.js307
24.4　初探gRPC310
第25章　控制反轉(zhuǎn)與Inversify.js314
25.1　依賴為什么需要注入315
25.2　IOC容器的實(shí)現(xiàn)317
25.3　AOP和裝飾器322
25.4　用Inversify.js實(shí)現(xiàn)依賴注入325
25.5　小結(jié)330
游戲開(kāi)發(fā)篇
第26章　基于CreateJS解構(gòu)游戲開(kāi)發(fā)332
26.1　工具包CreateJS333
26.2　實(shí)戰(zhàn)開(kāi)發(fā)：《飛龍大戰(zhàn)》334
26.3　性能提升技巧341
第27章　經(jīng)典物理與matter.js345
27.1　經(jīng)典力學(xué)回顧346
27.2　仿真的實(shí)現(xiàn)原理347
27.2.1　基本動(dòng)力學(xué)模擬347
27.2.2　碰撞模擬349
27.3　物理引擎matter.js350
27.3.1　《憤怒的小鳥(niǎo)》的物理特性分析350
27.3.2　使用matter.js構(gòu)建物理模型351
27.3.3　物理引擎如何牽手游戲引擎354
第28章　Phaser：從工具到生態(tài)357
28.1　快速上手Phaser游戲開(kāi)發(fā)357
28.2　淺談框架的選擇364

【跨界實(shí)踐篇】
第29章　brain.js：寫給前端的神經(jīng)網(wǎng)絡(luò)入門課366
29.1　從關(guān)鍵詞開(kāi)始366
29.2　認(rèn)識(shí)神經(jīng)網(wǎng)絡(luò)369
29.2.1　基本結(jié)構(gòu)369
29.2.2　神經(jīng)元的數(shù)學(xué)模型372
29.2.3　激活函數(shù)與非線性決策邊界374
29.2.4　神經(jīng)網(wǎng)絡(luò)中的信息傳遞377
29.3　使用brain.js構(gòu)建神經(jīng)網(wǎng)絡(luò)379
29.4　小結(jié)382
第30章　TensorFlow.js：開(kāi)箱即用的深度學(xué)習(xí)工具383
30.1　上手TensorFlow.js383
30.2　使用TensorFlow.js構(gòu)建卷積神經(jīng)網(wǎng)絡(luò)387
30.2.1　卷積神經(jīng)網(wǎng)絡(luò)387
30.2.2　搭建LeNet-5模型390
30.3　基于遷移學(xué)習(xí)的語(yǔ)音指令識(shí)別392
第31章　用JavaScript玩轉(zhuǎn)物聯(lián)網(wǎng)394
31.1　入門級(jí)物聯(lián)網(wǎng)“玩具”Arduino394
31.1.1　Arduino UNO R3板卡結(jié)構(gòu)395
31.1.2　模擬量和數(shù)字量396
31.1.3　Arduino原生編程入門397
31.1.4　Arduino實(shí)驗(yàn)示例一：按鈕控制三色LED燈398
31.1.5　Arduino實(shí)驗(yàn)示例二：使用DHT11模塊采集溫濕度信息402
31.2　PC與MCU之間的串口通信403
31.3　使用Johnny-Five進(jìn)行嵌入式開(kāi)發(fā)407
31.3.1　初識(shí)Johnny-Five407
31.3.2　Firmata.js源碼導(dǎo)讀408
31.3.3　舵機(jī)風(fēng)扇實(shí)驗(yàn)410
31.4　小結(jié)412