√ ES2015徹底顛覆JavaScript格局,首部專著誠(chéng)意滿滿,既倡導(dǎo)工程化思想,更不乏解決問題的務(wù)實(shí)。
√ 現(xiàn)代前端開發(fā)以產(chǎn)品為目標(biāo),追求代碼可讀性、靈活性和可維護(hù)性,學(xué)習(xí)ES新標(biāo)意義正在于此。
√ 作者多年精研技術(shù),得到業(yè)界廣泛認(rèn)可,本書由賀師?。╤ax)審校,程劭非(Winter)等撰文推薦。
√ 語(yǔ)言精練,細(xì)節(jié)扎實(shí),背景與原理描述豐富,更面向ES5→ES6人群設(shè)置完整案例,極利于動(dòng)手學(xué)習(xí)。
ES2015 一直吸引著眾多JavaScript 開發(fā)者去積極嘗試,如今,使用ES2015 標(biāo)準(zhǔn)進(jìn)行工程開發(fā)也已深入人心。隨著工程師們對(duì)ES2015 的熱情日益增長(zhǎng),許多新特性應(yīng)運(yùn)而出?!秾?shí)戰(zhàn)ES2015:深入現(xiàn)代JavaScript 應(yīng)用開發(fā)》為讀者介紹了ES2015 的詳細(xì)特性和意義,以及JavaScript 在ES2015 標(biāo)準(zhǔn)中的表現(xiàn),同時(shí)向讀者展示了利用ES2015中的新特性完成的JavaScript 應(yīng)用開發(fā)實(shí)例,以實(shí)際案例說明利用ES2015 的新特性如何提高JavaScript應(yīng)用前端和后端的開發(fā)效率。
小問,本名甘超陽(yáng),高級(jí) JavaScript 工程師,國(guó)內(nèi) Node.js *早的研究者之一,技術(shù)布道者、講師,參與并維護(hù)多個(gè)優(yōu)秀 JavaScript 開源項(xiàng)目。數(shù)學(xué)系理學(xué)士,對(duì)多方面的技術(shù)領(lǐng)域都有研究和自己的理解,熟悉各類 JavaScript 應(yīng)用的開發(fā)和機(jī)器學(xué)習(xí)應(yīng)用開發(fā)。同時(shí)也是一個(gè)業(yè)余攝影師,熱愛人像攝影。
第1章 ECMAScript版本發(fā)展歷程 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 小結(jié) 5
第2章 ES2015能為實(shí)際開發(fā)帶來什么 6
2.1 簡(jiǎn)單概括ES2015 6
2.2 語(yǔ)法糖 7
2.3 工程優(yōu)勢(shì) 8
2.3.1 模塊化 8
2.3.2 模塊化與組件化結(jié)合 11
2.3.3 內(nèi)存安全 13
2.4 小結(jié) 14
第3章 ES2015新語(yǔ)法詳解 15
3.1 let、const和塊級(jí)作用域 16
3.1.1 塊級(jí)作用域 16
3.1.2 let定義變量 20
3.1.3 const定義常量 22
3.1.3.1 使用語(yǔ)法 23
3.1.3.2 const與塊級(jí)作用域 25
3.1.4 變量的生命周期 27
3.1.5 更佳體驗(yàn) 29
3.1.5.1 let VS const 29
3.1.5.2 let、const與循環(huán)語(yǔ)句 30
3.2 箭頭函數(shù)(Arrow Function) 31
3.2.1 使用語(yǔ)法 31
3.2.1.1 單一參數(shù)的單行箭頭函數(shù) 31
3.2.1.2 多參數(shù)的單行箭頭函數(shù) 31
3.2.1.3 多行箭頭函數(shù) 32
3.2.1.4 無參數(shù)箭頭函數(shù) 32
3.2.2 this穿透 33
3.2.2.1 程序邏輯注意事項(xiàng) 34
3.2.2.2 編寫語(yǔ)法注意事項(xiàng) 36
3.3 模板字符串(Template String) 37
3.3.1 字符串元素注入 37
3.3.2 多行字符串 37
3.3.3 模板字符串使用語(yǔ)法 38
3.3.3.1 支持字符串元素注入 38
3.3.3.2 支持換行 39
3.3.4 注意事項(xiàng) 41
3.4 對(duì)象字面量擴(kuò)展語(yǔ)法(Enhanced Object Literals) 41
3.4.1 函數(shù)類屬性的省略語(yǔ)法 41
3.4.2 支持 __proto__ 注入 42
3.4.3 可動(dòng)態(tài)計(jì)算的屬性名 43
3.4.4 將屬性名定義省略 44
3.5 表達(dá)式結(jié)構(gòu)(Destructuring) 45
3.5.1 使用語(yǔ)法 47
3.5.1.1 使用對(duì)象作為返回載體(帶有標(biāo)簽的多返回值) 47
3.5.1.2 使用數(shù)組作為返回載體 47
3.5.2 使用場(chǎng)景 48
3.5.2.1 Promise與模式匹配 48
3.5.2.2 Swap(變量值交換) 49
3.5.3 高級(jí)用法 49
3.5.3.1 解構(gòu)別名 50
3.5.3.2 無法匹配的缺省值 50
3.5.3.3 深層匹配 50
3.5.3.4 配合其他新特性 52
3.6 函數(shù)參數(shù)表達(dá)、傳參 53
3.6.1 默認(rèn)參數(shù)值 54
3.6.1.1 使用語(yǔ)法 54
3.6.1.2 使用場(chǎng)景 54
3.6.2 剩余參數(shù) 55
3.6.2.1 使用語(yǔ)法 56
3.6.2.2 使用場(chǎng)景 57
3.6.2.3 注意事項(xiàng) 57
3.6.3 解構(gòu)傳參 58
3.7 新的數(shù)據(jù)結(jié)構(gòu) 59
3.7.1 Set有序集合 59
3.7.1.1 使用語(yǔ)法 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 使用語(yǔ)法 64
3.7.3.2 增減鍵值對(duì) 65
3.7.3.3 獲取鍵值對(duì) 66
3.7.3.4 檢查映射對(duì)象中的鍵值對(duì) 66
3.7.3.5 歷遍映射對(duì)象中的鍵值對(duì) 66
3.7.3.6 映射對(duì)象與Object的區(qū)別 67
3.7.4 WeakMap 67
3.8 類語(yǔ)法(Classes) 68
3.8.1 使用語(yǔ)法 69
3.8.1.1 基本定義語(yǔ)法 69
3.8.1.2 繼承語(yǔ)法 70
3.8.1.3 Getter/Setter 72
3.8.1.4 靜態(tài)方法 73
3.8.1.5 高級(jí)技巧 77
3.8.2 注意事項(xiàng) 78
3.8.3 遺憾與期望 79
3.9 生成器(Generator) 80
3.9.1 由來 80
3.9.2 基本概念 81
3.9.2.1 生成器函數(shù)(Generator Function) 81
3.9.2.2 生成器(Generator) 82
3.9.3 使用方法 83
3.9.3.1 構(gòu)建生成器函數(shù) 83
3.9.3.2 啟動(dòng)生成器 83
3.9.3.3 運(yùn)行生成器內(nèi)容 84
3.9.4 深入理解 85
3.9.4.1 運(yùn)行模式 85
3.9.4.2 生成器函數(shù)以及生成器對(duì)象的檢測(cè) 85
3.9.4.3 生成器嵌套 88
3.9.4.4 生成器與協(xié)程 90
3.10 Promise 93
3.10.1 基本語(yǔ)法 94
3.10.1.1 創(chuàng)建Promise對(duì)象 94
3.10.1.2 進(jìn)行異步操作 94
3.10.1.3 處理Promise的狀態(tài) 95
3.10.2 高級(jí)使用方法 97
3.10.2.1 Promise.a(chǎn)ll(iterable) 97
3.10.2.2 Promise.race(iterable) 97
3.11 代碼模塊化 98
3.11.1 引入模塊 99
3.11.1.1 引入默認(rèn)模塊 99
3.11.1.2 引入模塊部分接口 100
3.11.1.3 引入全部局部接口到指定命名空間 101
3.11.1.4 混入引入默認(rèn)接口和命名接口 101
3.11.1.5 不引入接口,僅運(yùn)行模塊代碼 102
3.11.2 定義模塊 102
3.11.3 暴露模塊 103
3.11.3.1 暴露單一接口 103
3.11.3.2 暴露模塊默認(rèn)接口 104
3.11.3.3 混合使用暴露接口語(yǔ)句 104
3.11.3.4 從其他模塊暴露接口 105
3.11.3.5 暴露一個(gè)模塊的所有接口 105
3.11.3.6 暴露一個(gè)模塊的部分接口 106
3.11.3.7 暴露一個(gè)模塊的默認(rèn)接口 106
3.12 Symbol 106
3.12.1 基本語(yǔ)法 107
3.12.1.1 生成唯一的Symbol值 107
3.12.1.2 注冊(cè)全局可重用 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循環(huán)語(yǔ)句與可迭代對(duì)象 111
3.12.3.2 使用Symbol.iterator定義一個(gè)可迭代對(duì)象 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 使用語(yǔ)法 118
3.13.3 handler.has 119
3.13.4 handler.get 120
3.13.5 handler.set 121
3.13.6 handler.a(chǎn)pply 122
3.13.7 handler.construct 122
3.13.8 創(chuàng)建可解除Proxy對(duì)象 123
3.13.9 使用場(chǎng)景 123
3.13.9.1 看似“不可能”的自動(dòng)填充 123
3.13.9.2 只讀視圖 124
3.13.9.3 入侵式測(cè)試框架 125
3.14 小結(jié) 127
第4章 ES2015的前端開發(fā)實(shí)戰(zhàn) 129
4.1 Filmy的功能規(guī)劃 129
4.1.1 數(shù)據(jù)分級(jí) 130
4.1.2 數(shù)據(jù)結(jié)構(gòu) 130
4.1.2.1 核心數(shù)據(jù) 130
4.1.2.2 分類數(shù)據(jù) 131
4.1.2.3 相冊(cè)數(shù)據(jù) 131
4.1.3 數(shù)據(jù)搜索 132
4.1.3.1 搜索分類 132
4.1.3.2 搜索相冊(cè) 132
4.1.4 界面原型規(guī)劃 133
4.1.4.1 著陸頁(yè)面 133
4.1.4.2 分類目錄頁(yè)面 133
4.1.4.3 分類內(nèi)容頁(yè)面 134
4.1.4.4 相冊(cè)頁(yè)面 134
4.2 功能組件分割 135
4.2.1 根組件分割 135
4.2.2 著陸頁(yè)面 136
4.2.3 目錄頁(yè)面 136
4.2.4 分類頁(yè)面 137
4.2.5 相冊(cè)頁(yè)面 137
4.3 技術(shù)選型 139
4.3.1 整體架構(gòu) 139
4.3.2 數(shù)據(jù)層 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 程序架構(gòu) 143
4.3.4.1 路由組件 143
4.3.4.2 數(shù)據(jù)組件 144
4.3.4.3 視圖組件 145
4.4 數(shù)據(jù)層開發(fā) 146
4.4.1 安裝依賴 147
4.4.2 配置七牛JavaScript SDK 147
4.4.3 核心配置數(shù)據(jù) 150
4.4.3.1 獲取核心配置數(shù)據(jù) 150
4.4.3.2 更新配置數(shù)據(jù) 151
4.4.4 分類數(shù)據(jù) 154
4.4.4.1 數(shù)據(jù)結(jié)構(gòu) 155
4.4.4.2 數(shù)據(jù)索引 157
4.4.4.3 更新分類數(shù)據(jù) 159
4.4.5 相冊(cè)數(shù)據(jù) 159
4.4.5.1 數(shù)據(jù)加載 160
4.4.5.2 數(shù)據(jù)更新 161
4.4.5.3 數(shù)據(jù)檢索 161
4.5 入口文件與路由組件開發(fā) 165
4.5.1 路由基礎(chǔ)組件 166
4.5.2 入口文件 166
4.5.2.1 簡(jiǎn)單的字符串處理 167
4.5.2.2 多國(guó)語(yǔ)言處理 168
4.6 著陸頁(yè)面開發(fā) 170
4.6.1 路由組件開發(fā) 171
4.6.2 著陸頁(yè)視圖 174
4.6.2.1 引入數(shù)據(jù) 174
4.6.2.2 綁定視圖 174
4.6.3 分類目錄視圖 177
4.6.3.1 分類元素視圖組件 177
4.6.3.2 渲染分類目錄 178
4.6.4 路由組件、視圖組件與數(shù)據(jù)組件的聯(lián)系 180
4.6.4.1 在邏輯控制器中進(jìn)行數(shù)據(jù)操作 180
4.6.4.2 在視圖中進(jìn)行數(shù)據(jù)操作 181
4.6.4.3 組織方式的區(qū)別與項(xiàng)目應(yīng)用 182
4.7 分類頁(yè)面開發(fā) 182
4.7.1 路由組件開發(fā) 183
4.7.2 分類元素視圖組件 185
4.7.3 相冊(cè)列表視圖組件 186
4.7.4 相冊(cè)頁(yè)面開發(fā) 188
4.7.4.1 相冊(cè)頁(yè)面的路由組件 188
4.7.4.2 相冊(cè)信息視圖組件 189
4.7.4.3 圖片列表視圖組件 189
4.8 管理工具開發(fā) 190
4.9 初始化Filmy實(shí)例 191
4.9.1 基本元素 192
4.9.2 基本邏輯 194
4.9.2.1 獲取七牛云的上傳憑證 195
4.9.2.2 檢查并處理管理員對(duì)背景圖片的填寫方式 196
4.9.2.3 將核心數(shù)據(jù)部署到七牛云上 197
4.10 管理工具的總體組織 197
4.10.1 管理頁(yè)面的總體架構(gòu) 198
4.10.2 側(cè)邊欄 198
4.10.3 路由配置 200
4.11 相冊(cè)發(fā)布頁(yè)面 202
4.11.1 基本邏輯 202
4.11.1.1 綁定數(shù)據(jù) 202
4.11.1.2 綁定元素以接收文件上傳 203
4.11.2 上傳數(shù)據(jù) 204
4.11.2.1 圖片上傳邏輯 204
4.11.2.2 數(shù)據(jù)提交 205
4.12 打包發(fā)布 206
4.12.1 準(zhǔn)備工作 206
4.12.2 配置 webpack 207
4.12.2.1 安裝依賴 207
4.12.2.2 編寫配置文件 207
4.12.3 發(fā)布到云端 209
4.13 小結(jié) 210
第5章 ES2015的Node.js開發(fā)實(shí)戰(zhàn) 211
5.1 Duel Living的功能規(guī)劃 211
5.1.1 基本產(chǎn)品組織 211
5.1.2 數(shù)據(jù)結(jié)構(gòu) 213
5.1.2.1 賽事(Duel) 213
5.1.2.2 消息(Message) 214
5.1.2.3 參賽方(Player)和主持人(Host) 216
5.1.3 數(shù)據(jù)結(jié)構(gòu)的關(guān)系 216
5.2 數(shù)據(jù)層開發(fā) 217
5.2.1 文件結(jié)構(gòu) 217
5.2.2 安裝依賴 217
5.2.3 主持人數(shù)據(jù)和參賽方數(shù)據(jù) 218
5.2.4 賽事數(shù)據(jù) 223
5.2.5 消息數(shù)據(jù) 225
5.3 服務(wù)端基本架構(gòu)開發(fā) 227
5.3.1 安裝依賴 227
5.3.2 程序入口 229
5.3.3 路由表 229
5.4 API開發(fā) 230
5.4.1 API安全 230
5.4.2 賽事API 231
5.4.2.1 獲取當(dāng)前可用的所有賽事信息 232
5.4.2.2 獲取指定賽事數(shù)據(jù) 232
5.4.2.3 創(chuàng)建新的賽事 233
5.4.3 消息API 236
5.4.3.1 獲取指定賽事中的若干消息 236
5.4.3.2 發(fā)布消息到指定賽事 237
5.5 直播網(wǎng)絡(luò) 237
5.5.1 網(wǎng)絡(luò)架構(gòu) 238
5.5.1.1 集中架構(gòu) 238
5.5.1.2 分布式架構(gòu) 239
5.5.1.3 P2P 網(wǎng)絡(luò) 239
5.5.2 技術(shù)實(shí)現(xiàn) 240
5.5.3 WebSocket 服務(wù)端 241
5.5.3.1 建立WebSocket服務(wù)端實(shí)例 242
5.5.3.2 建立WebSocket通訊連接 242
5.5.3.3 廣播消息 244
5.5.4 P2P 協(xié)調(diào)服務(wù)端 245
5.5.4.1 建立P2P協(xié)調(diào)連接 245
5.5.4.2 存儲(chǔ)客戶端地理信息 246
5.5.4.3 匹配最相近的客戶端 248
5.6 直播間客戶端 249
5.6.1 準(zhǔn)備工作 249
5.6.2 建立直播通信 250
5.6.2.1 建立PeerJS客戶端實(shí)例 251
5.6.2.2 建立WebSocket通信連接 251
5.6.2.3 建立P2P通信連接 253
5.6.3 處理消息 253
5.7 部署應(yīng)用 255
5.7.1 編譯代碼 255
5.7.2 運(yùn)行程序 256
5.7.3 發(fā)布部署 257
5.8 小結(jié) 258
第6章 ES2016標(biāo)準(zhǔn) 259
6.1 Array.prototype.includes 259
6.2 冪運(yùn)算符 260
6.3 小結(jié) 261
第7章 展望更遠(yuǎn)的未來 262
7.1 async/await 262
7.2 Decorators 264
7.2.1 簡(jiǎn)單實(shí)例 264
7.2.2 黑科技 265
7.3 函數(shù)綁定 266
7.4 小結(jié) 267
附錄 其他ES2015新特性 268