前端技術(shù)架構(gòu)與工程

目　　錄
第1章　前端工程化 1
1.1　前端的時(shí)代意義 2
1.2　架構(gòu)與工程 9
1.3　零散的前端架構(gòu) 12
1.4　模糊的前端工程邊界 14
1.5　前端架構(gòu)師的職責(zé) 16
1.5.1　技術(shù)架構(gòu) 16
1.5.2　工程服務(wù)體系 20
1.6　總結(jié) 23
第2章　編程語(yǔ)言 24
2.1　HTML 25
2.1.1　SSR 26
2.1.2　CSR 28
2.2　CSS 34
2.2.1　從編程語(yǔ)言的角度思考CSS 37
2.2.2　LESS和PostCSS 40
2.2.3　CSS-in-JS 42
2.2.4　Houdini 45
2.3　JavaScript 46
2.3.1　靜態(tài)類(lèi)型 48
2.3.2　不可變性 51
2.3.3　異步編程 53
2.4　總結(jié) 59
第3章　技術(shù)規(guī)范 61
3.1　技術(shù)選型 62
3.2　資源管理 65
3.2.1　目錄結(jié)構(gòu) 66
3.2.2　命名規(guī)范 70
3.3　編碼風(fēng)格 73
3.3.1　JavaScript的高性能與易讀性 77
3.3.2　CSS編程范式與面向?qū)ο?79
3.4　總結(jié) 85
第4章　組件化 87
4.1　組件與模塊 88
4.2　Web Components 93
4.2.1　自定義元素 94
4.2.2　Shadow DOM 104
4.2.3　HTML template 109
4.3　更友好的編碼方式 115
4.3.1　多文件組件 116
4.3.2　單文件組件 120
4.4　設(shè)計(jì)模式 121
4.4.1　重新思考DOM 122
4.4.2　生命周期的設(shè)計(jì)藝術(shù) 123
4.5　總結(jié) 124
第5章　前后端分離 125
5.1　關(guān)注點(diǎn)分離 126
5.2　SPA與路由管理 129
5.2.1　Hash模式 130
5.2.2　History模式 136
5.3　Node.js中間層與同構(gòu)編程 138
5.3.1　同構(gòu)JavaScript 140
5.3.2　React同構(gòu)方案 141
5.4　總結(jié) 150
第6章　性能 151
6.1　性能評(píng)估模型 152
6.2　從URL到圖像 156
6.2.1　網(wǎng)絡(luò) 159
6.2.2　渲染 166
6.3　內(nèi)存管理 170
6.3.1　GC算法 171
6.3.2　內(nèi)存泄漏 177
6.4　極限運(yùn)算性能 180
6.5　總結(jié) 184
第7章　工程思維與服務(wù)支撐 185
7.1　工程思維 186
7.2　開(kāi)發(fā)支撐 189
7.2.1　腳手架 190
7.2.2　構(gòu)建 192
7.2.3　dev server 200
7.2.4　源碼管理 201
7.3　測(cè)試支撐 207
7.3.1　測(cè)試模型 208
7.3.2　依賴注入 213
7.3.3　前后端集成 214
7.4　運(yùn)維支撐 215
7.4.1　一鍵部署 216
7.4.2　日志埋點(diǎn) 217
7.4.3　性能監(jiān)控 221
7.5　總結(jié) 222
第8章　DevOps與Serverless 223
8.1　DevOps與敏捷開(kāi)發(fā) 224
8.1.1　敏捷開(kāi)發(fā) 224
8.1.2　DevOps 228
8.2　持續(xù)交付 230
8.2.1　持續(xù)集成 230
8.2.2　低風(fēng)險(xiǎn)發(fā)布 234
8.3　Serverless與前端 236
8.3.1　BFF 236
8.3.2　Serverless 239
8.4　總結(jié) 242