目　 錄



第1章　種子模塊1

1.1　模塊化1

1.2　功能介紹2

1.3　對象擴展3

1.4　數(shù)組化5

1.5　類型的判定8

1.5.1　type12

1.5.2　isPlainObject13

1.5.3　isWindow14

1.5.4　isNumeric15

1.5.5　isArrayLike16

1.6　domReady17

1.7　無沖突處理20

1.8　總結20

第2章　語言模塊21

2.1　字符串的擴展與修復22

2.1.1　repeat24

2.1.2　byteLen26

2.1.3　pad30

2.1.4　quote32

2.1.5　trim與空白33

2.2　數(shù)組的擴展與修復37

2.3　數(shù)值的擴展與修復45

2.4　函數(shù)的擴展與修復48

2.5　日期的擴展與修復53

第3章　瀏覽器嗅探與特征偵測57

3.1　瀏覽器判定58

3.2　document.all趣聞61

3.3　事件的支持偵測62

3.4　樣式的支持偵測65

3.5　jQuery一些常用特征的含義65

第4章　類工廠68

4.1　JavaScript對類的支撐68

4.2　各種類工廠的實現(xiàn)73

4.2.1　相當精巧的庫P.js74

4.2.2　JS.Class76

4.2.3　simple-inheritance78

4.2.4　體現(xiàn)JavaScript靈活性的

庫def.js81

4.3　進擊的屬性描述符85

4.4　真類降臨93

第5章　選擇器引擎102

5.1　瀏覽器內置的尋找元素的方法103

5.2　getElementsBySelector105

5.3　選擇器引擎涉及的知識點108

5.3.1　關系選擇器109

5.3.2　偽類111

5.3.3　其他概念113

5.4　選擇器引擎涉及的通用函數(shù)114

5.4.1　isXML114

5.4.2　contains115

5.4.3　節(jié)點排序與去重117

5.4.4　切割器121

5.4.5　屬性選擇器對于空白字符的

匹配策略123

5.4.6　子元素過濾偽類的分解與

匹配125

5.5　Sizzle引擎127

5.6　總結135

第6章　節(jié)點模塊136

6.1　節(jié)點的創(chuàng)建136

6.2　節(jié)點的插入142

6.3　節(jié)點的復制144

6.4　節(jié)點的移除148

6.5　節(jié)點的移除回調實現(xiàn)151

6.5.1　Mutation Observer152

6.5.2　更多候選方案153

6.6　innerHTML、innerText、outerHTML、

outerText的兼容處理157

6.7　模板容器元素161

6.8　iframe元素162

6.9　總結165

第7章　數(shù)據(jù)緩存模塊166

7.1　jQuery的第1代緩存系統(tǒng)166

7.2　jQuery的第2代緩存系統(tǒng)172

7.3　jQuery的第3代緩存系統(tǒng)175

7.4　有容量限制的緩存系統(tǒng)176

7.5　本地存儲系統(tǒng)178

7.6　總結184

第8章　樣式模塊185

8.1　主體架構186

8.2　樣式名的修正189

8.3　個別樣式的特殊處理190

8.3.1　opacity190

8.3.2　user-select192

8.3.3　background-position192

8.3.4　z-index193

8.3.5　盒子模型194

8.3.6　元素的尺寸195

8.3.7　元素的顯隱201

8.3.8　元素的坐標203

8.4　元素的滾動條的坐標209

8.5　總結210

第9章　屬性模塊211

9.1　元素節(jié)點的屬性212

9.2　如何區(qū)分固有屬性與自定義

屬性214

9.3　如何判定瀏覽器是否區(qū)分固有

屬性與自定義屬性216

9.4　IE的屬性系統(tǒng)的3次演變217

9.5　className的操作218

9.6　Prototype.js的屬性系統(tǒng)221

9.7　jQuery的屬性系統(tǒng)226

9.8　avalon的屬性系統(tǒng)229

9.9　value的操作232

9.10　總結235

第10章　PC端的事件系統(tǒng)236

10.1　原生API簡介238

10.2　on綁定方式的缺陷239

10.3　attachEvent的缺陷239

10.4　addEventListener的缺陷241

10.5　handleEvent與

EventListenerOptions242

10.6　Dean Edward大神的addEvent.js

源碼分析243

10.7　jQuery的事件系統(tǒng)246

10.8　avalon2的事件系統(tǒng)248

10.9　總結254

第11章　移動端的事件系統(tǒng)255

11.1　touch系事件256

11.2　gesture系事件258

11.3　tap系事件259

11.4　press系事件268

11.5　swipe系事件271

11.6　pinch系事件273

11.7　拖放系事件276

11.8　rotate系事件279

11.9　總結282

第12章　異步模型283

12.1　setTimeout與setInterval284

12.2　Promise誕生前的世界287

12.2.1　回調函數(shù)callbacks287

12.2.2　觀察者模式observers287

12.2.3　事件機制listeners289

12.3　JSDeferred里程碑289

12.4　jQuery Deferred宣教者299

12.5　es6 Promise第一個標準模型303

12.5.1 構造函數(shù)：Promise

( executor )308

12.5.2 Promise.resolve/reject309

12.5.3 Promise.all/race309

12.5.4 Promise#then/catch310

12.5.5 Promise#resolve/reject310

12.5.6 Promsie#notify311

12.5.7 nextTick312

12.6　es6生成器過渡者314

12.6.1 關鍵字yield315

12.6.2 yield*和yield的區(qū)別316

12.6.3 異常處理317

12.7　es7 async/await終極方案319

12.8 總結321

第13章　數(shù)據(jù)交互模塊323

13.1　Ajax概覽323

13.2　優(yōu)雅地取得XMLHttpRequest

對象324

13.3　XMLHttpRequest對象的事件

綁定與狀態(tài)維護326

13.4　發(fā)送請求與數(shù)據(jù)328

13.5　接收數(shù)據(jù)330

13.6　上傳文件333

13.7　jQuery.ajax335

13.8　fetch，下一代Ajax340

第14章　動畫引擎344

14.1　動畫的原理344

14.2　緩動公式347

14.3　jQuery.animate349

14.4　mass Framework基于JavaScript的

動畫引擎350

14.5　requestAnimationFrame358

14.6　CSS3 transition364

14.7　CSS3 animation368

14.8　mass Framework基于CSS的動畫

引擎370

第15章　MVVM378

15.1　前端模板（靜態(tài)模板）378

15.2　MVVM的動態(tài)模板388

15.2.1　求值函數(shù)390

15.2.2　刷新函數(shù)395

15.3　ViewModel399

15.3.1　Proxy400

15.3.2　Reflect401

15.3.3　avalon的ViewModel

設計403

15.3.4　angular的ViewModel

設計407

15.4　React與虛擬DOM412

15.4.1　React的diff算法415

15.4.2　React的多端渲染417

15.5　性能墻與復雜墻417

第16章　組件422

16.1　jQuery時代的組件方案422

16.2　avalon2的組件方案427

16.2.1　組件容器429

16.2.2　配置對象430

16.2.3　slot機制430

16.2.4　soleSlot機制431

16.2.5　生命周期432

16.3　React的組件方案433

16.3.1　React組件的各種定義

方式433

16.3.2　React組件的生命周期439

16.3.3　React組件間通信441

16.3.4　React組件的分類445

16.4　前端路由446

16.4.1 storage447

16.4.2 mmHistory448

16.4.3 mmRouter454

彩蛋458