第1章 ECMAScript版本發展曆程 1
1.1 ECMAScript的曆史更替 2
1.1.1 ECMA-262 / ECMA-262 Edition 2 2
1.1.2 ECMA-262 Edition 3 3
1.1.3 ECMA-262 Edition 5 4
1.1.4 ECMA-262 Edition 4 4
1.2 小結 5
第2章 ES2015能為實際開發帶來什麼 6
2.1 簡單概括ES2015 6
2.2 語法糖 7
2.3 工程優勢 8
2.3.1 模塊化 8
2.3.2 模塊化與組件化結閤 11
2.3.3 內存安全 13
2.4 小結 14
第3章 ES2015新語法詳解 15
3.1 let、const和塊級作用域 16
3.1.1 塊級作用域 16
3.1.2 let定義變量 20
3.1.3 const定義常量 22
3.1.3.1 使用語法 23
3.1.3.2 const與塊級作用域 25
3.1.4 變量的生命周期 27
3.1.5 更佳體驗 29
3.1.5.1 let VS const 29
3.1.5.2 let、const與循環語句 30
3.2 箭頭函數（Arrow Function） 31
3.2.1 使用語法 31
3.2.1.1 單一參數的單行箭頭函數 31
3.2.1.2 多參數的單行箭頭函數 31
3.2.1.3 多行箭頭函數 32
3.2.1.4 無參數箭頭函數 32
3.2.2 this穿透 33
3.2.2.1 程序邏輯注意事項 34
3.2.2.2 編寫語法注意事項 36
3.3 模闆字符串（Template String） 37
3.3.1 字符串元素注入 37
3.3.2 多行字符串 37
3.3.3 模闆字符串使用語法 38
3.3.3.1 支持字符串元素注入 38
3.3.3.2 支持換行 39
3.3.4 注意事項 41
3.4 對象字麵量擴展語法（Enhanced Object Literals） 41
3.4.1 函數類屬性的省略語法 41
3.4.2 支持 __proto__ 注入 42
3.4.3 可動態計算的屬性名 43
3.4.4 將屬性名定義省略 44
3.5 錶達式結構（Destructuring） 45
3.5.1 使用語法 47
3.5.1.1 使用對象作為返迴載體（帶有標簽的多返迴值） 47
3.5.1.2 使用數組作為返迴載體 47
3.5.2 使用場景 48
3.5.2.1 Promise與模式匹配 48
3.5.2.2 Swap（變量值交換） 49
3.5.3 用法 49
3.5.3.1 解構彆名 50
3.5.3.2 無法匹配的缺省值 50
3.5.3.3 深層匹配 50
3.5.3.4 配閤其他新特性 52
3.6 函數參數錶達、傳參 53
3.6.1 默認參數值 54
3.6.1.1 使用語法 54
3.6.1.2 使用場景 54
3.6.2 剩餘參數 55
3.6.2.1 使用語法 56
3.6.2.2 使用場景 57
3.6.2.3 注意事項 57
3.6.3 解構傳參 58
3.7 新的數據結構 59
3.7.1 Set有序集閤 59
3.7.1.1 使用語法 60
3.7.1.2 增減元素 61
3.7.1.3 檢查元素 61
3.7.1.4 曆遍元素 61
3.7.2 WeakSet 62
3.7.3 Map映射類型 64
3.7.3.1 使用語法 64
3.7.3.2 增減鍵值對 65
3.7.3.3 獲取鍵值對 66
3.7.3.4 檢查映射對象中的鍵值對 66
3.7.3.5 曆遍映射對象中的鍵值對 66
3.7.3.6 映射對象與Object的區彆 67
3.7.4 WeakMap 67
3.8 類語法（Classes） 68
3.8.1 使用語法 69
3.8.1.1 基本定義語法 69
3.8.1.2 繼承語法 70
3.8.1.3 Getter/Setter 72
3.8.1.4 靜態方法 73
3.8.1.5 技巧 77
3.8.2 注意事項 78
3.8.3 遺憾與期望 79
3.9 生成器（Generator） 80
3.9.1 由來 80
3.9.2 基本概念 81
3.9.2.1 生成器函數（Generator Function） 81
3.9.2.2 生成器（Generator） 82
3.9.3 使用方法 83
3.9.3.1 構建生成器函數 83
3.9.3.2 啓動生成器 83
3.9.3.3 運行生成器內容 84
3.9.4 深入理解 85
3.9.4.1 運行模式 85
3.9.4.2 生成器函數以及生成器對象的檢測 85
3.9.4.3 生成器嵌套 88
3.9.4.4 生成器與協程 90
3.10 Promise 93
3.10.1 基本語法 94
3.10.1.1 創建Promise對象 94
3.10.1.2 進行異步操作 94
3.10.1.3 處理Promise的狀態 95
3.10.2 使用方法 97
3.10.2.1 Promise.all(iterable) 97
3.10.2.2 Promise.race(iterable) 97
3.11 代碼模塊化 98
3.11.1 引入模塊 99
3.11.1.1 引入默認模塊 99
3.11.1.2 引入模塊部分接口 100
3.11.1.3 引入全部局部接口到指定命名空間 101
3.11.1.4 混入引入默認接口和命名接口 101
3.11.1.5 不引入接口，僅運行模塊代碼 102
3.11.2 定義模塊 102
3.11.3 暴露模塊 103
3.11.3.1 暴露單一接口 103
3.11.3.2 暴露模塊默認接口 104
3.11.3.3 混閤使用暴露接口語句 104
3.11.3.4 從其他模塊暴露接口 105
3.11.3.5 暴露一個模塊的所有接口 105
3.11.3.6 暴露一個模塊的部分接口 106
3.11.3.7 暴露一個模塊的默認接口 106
3.12 Symbol 106
3.12.1 基本語法 107
3.12.1.1 生成的Symbol值 107
3.12.1.2 注冊全局可重用 Symbol 108
3.12.1.3 獲取全局 Symbol的key 109
3.12.2 常用Symbol值 109
3.12.3 Symbol.iterator 110
3.12.3.1 for-of循環語句與可迭代對象 111
3.12.3.2 使用Symbol.iterator定義一個可迭代對象 111
3.12.4 Symbol.hasInstance 113
3.12.5 Symbol.match 113
3.12.6 Symbol.unscopables 114
3.12.7 Symbol.toPrimitive 115
3.12.8 Symbol.toStringTag 116
3.13 Proxy 117
3.13.1 元編程 117
3.13.2 使用語法 118
3.13.3 handler.has 119
3.13.4 handler.get 120
3.13.5 handler.set 121
3.13.6 handler.apply 122
3.13.7 handler.construct 122
3.13.8 創建可解除Proxy對象 123
3.13.9 使用場景 123
3.13.9.1 看似“不可能”的自動填充 123
3.13.9.2 隻讀視圖 124
3.13.9.3 入侵式測試框架 125
3.14 小結 127
第4章 ES2015的前端開發實戰 129
4.1 Filmy的功能規劃 129
4.1.1 數據分級 130
4.1.2 數據結構 130
4.1.2.1 核心數據 130
4.1.2.2 分類數據 131
4.1.2.3 相冊數據 131
4.1.3 數據搜索 132
4.1.3.1 搜索分類 132
4.1.3.2 搜索相冊 132
4.1.4 界麵原型規劃 133
4.1.4.1 著陸頁麵 133
4.1.4.2 分類目錄頁麵 133
4.1.4.3 分類內容頁麵 134
4.1.4.4 相冊頁麵 134
4.2 功能組件分割 135
4.2.1 根組件分割 135
4.2.2 著陸頁麵 136
4.2.3 目錄頁麵 136
4.2.4 分類頁麵 137
4.2.5 相冊頁麵 137
4.3 技術選型 139
4.3.1 整體架構 139
4.3.2 數據層 139
4.3.3 邏輯層及UI層 140
4.3.3.1 AngularJS 141
4.3.3.2 React.js 141
4.3.3.3 Vue.js 142
4.3.4 程序架構 143
4.3.4.1 路由組件 143
4.3.4.2 數據組件 144
4.3.4.3 視圖組件 145
4.4 數據層開發 146
4.4.1 安裝依賴 147
4.4.2 配置七牛 SDK 147
4.4.3 核心配置數據 150
4.4.3.1 獲取核心配置數據 150
4.4.3.2 更新配置數據 151
4.4.4 分類數據 154
4.4.4.1 數據結構 155
4.4.4.2 數據索引 157
4.4.4.3 更新分類數據 159
4.4.5 相冊數據 159
4.4.5.1 數據加載 160
4.4.5.2 數據更新 161
4.4.5.3 數據檢索 161
4.5 入口文件與路由組件開發 165
4.5.1 路由基礎組件 166
4.5.2 入口文件 166
4.5.2.1 簡單的字符串處理 167
4.5.2.2 多國語言處理 168
4.6 著陸頁麵開發 170
4.6.1 路由組件開發 171
4.6.2 著陸頁視圖 174
4.6.2.1 引入數據 174
4.6.2.2 綁定視圖 174
4.6.3 分類目錄視圖 177
4.6.3.1 分類元素視圖組件 177
4.6.3.2 渲染分類目錄 178
4.6.4 路由組件、視圖組件與數據組件的聯係 180
4.6.4.1 在邏輯控製器中進行數據操作 180
4.6.4.2 在視圖中進行數據操作 181
4.6.4.3 組織方式的區彆與項目應用 182
4.7 分類頁麵開發 182
4.7.1 路由組件開發 183
4.7.2 分類元素視圖組件 185
4.7.3 相冊列錶視圖組件 186
4.7.4 相冊頁麵開發 188
4.7.4.1 相冊頁麵的路由組件 188
4.7.4.2 相冊信息視圖組件 189
4.7.4.3 圖片列錶視圖組件 189
4.8 管理工具開發 190
4.9 初始化Filmy實例 191
4.9.1 基本元素 192
4.9.2 基本邏輯 194
4.9.2.1 獲取七牛雲的上傳憑證 195
4.9.2.2 檢查並處理管理員對背景圖片的填寫方式 196
4.9.2.3 將核心數據部署到七牛雲上 197
4.10 管理工具的總體組織 197
4.10.1 管理頁麵的總體架構 198
4.10.2 側邊欄 198
4.10.3 路由配置 200
4.11 相冊發布頁麵 202
4.11.1 基本邏輯 202
4.11.1.1 綁定數據 202
4.11.1.2 綁定元素以接收文件上傳 203
4.11.2 上傳數據 204
4.11.2.1 圖片上傳邏輯 204
4.11.2.2 數據提交 205
4.12 打包發布 206
4.12.1 準備工作 206
4.12.2 配置 webpack 207
4.12.2.1 安裝依賴 207
4.12.2.2 編寫配置文件 207
4.12.3 發布到雲端 209
4.13 小結 210
第5章 ES2015的Node.js開發實戰 211
5.1 Duel Living的功能規劃 211
5.1.1 基本産品組織 211
5.1.2 數據結構 213
5.1.2.1 賽事（Duel） 213
5.1.2.2 消息（Message） 214
5.1.2.3 參賽方（Player）和主持人（Host） 216
5.1.3 數據結構的關係 216
5.2 數據層開發 217
5.2.1 文件結構 217
5.2.2 安裝依賴 217
5.2.3 主持人數據和參賽方數據 218
5.2.4 賽事數據 223
5.2.5 消息數據 225
5.3 服務端基本架構開發 227
5.3.1 安裝依賴 227
5.3.2 程序入口 229
5.3.3 路由錶 229
5.4 API開發 230
5.4.1 API安全 230
5.4.2 賽事API 231
5.4.2.1 獲取當前可用的所有賽事信息 232
5.4.2.2 獲取指定賽事數據 232
5.4.2.3 創建新的賽事 233
5.4.3 消息API 236
5.4.3.1 獲取指定賽事中的若乾消息 236
5.4.3.2 發布消息到指定賽事 237
5.5 直播網絡 237
5.5.1 網絡架構 238
5.5.1.1 集中架構 238
5.5.1.2 分布式架構 239
5.5.1.3 P2P 網絡 239
5.5.2 技術實現 240
5.5.3 WebSocket 服務端 241
5.5.3.1 建立WebSocket服務端實例 242
5.5.3.2 建立WebSocket通訊連接 242
5.5.3.3 廣播消息 244
5.5.4 P2P 協調服務端 245
5.5.4.1 建立P2P協調連接 245
5.5.4.2 存儲客戶端地理信息 246
5.5.4.3 匹配相近的客戶端 248
5.6 直播間客戶端 249
5.6.1 準備工作 249
5.6.2 建立直播通信 250
5.6.2.1 建立PeerJS客戶端實例 251
5.6.2.2 建立WebSocket通信連接 251
5.6.2.3 建立P2P通信連接 253
5.6.3 處理消息 253
5.7 部署應用 255
5.7.1 編譯代碼 255
5.7.2 運行程序 256
5.7.3 發布部署 257
5.8 小結 258
第6章 ES2016標準 259
6.1 Array.prototype.includes 259
6.2 冪運算符 260
6.3 小結 261
第7章 展望更遠的未來 262
7.1 async/await 262
7.2 Decorators 264
7.2.1 簡單實例 264
7.2.2 黑科技 265
7.3 函數綁定 266
7.4 小結 267
附錄 其他ES2015新特性 268
· · · · · · (
收起)
