★本書(shū)梳理了移動(dòng)前端和Native客戶端技術(shù)體系
★涵蓋了移動(dòng)Web前端開(kāi)發(fā)中的各個(gè)關(guān)鍵技術(shù)環(huán)節(jié)
★全面地還原了一線互聯(lián)網(wǎng)公司的Web前端技術(shù)棧
★含大量基于Web前端的優(yōu)秀開(kāi)源技術(shù)類(lèi)庫(kù)和框架介紹

移動(dòng)互聯(lián)網(wǎng)的興起和快速普及，給前端開(kāi)發(fā)人員帶來(lái)了新機(jī)遇。移動(dòng)Web前端技術(shù)作為整個(gè)技術(shù)鏈條中重要的一環(huán)，卻亂象叢生。本書(shū)是一本梳理移動(dòng)前端和Native客戶端技術(shù)體系的入門(mén)實(shí)戰(zhàn)書(shū)。

本書(shū)涵蓋了移動(dòng)Web前端開(kāi)發(fā)中的各個(gè)關(guān)鍵技術(shù)環(huán)節(jié)，共14章。分別從HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移動(dòng)端常用布局方案、MV*類(lèi)新時(shí)代框架、預(yù)編譯技術(shù)、性能優(yōu)化、開(kāi)發(fā)調(diào)試、混合式應(yīng)用、單元測(cè)試、工程化等方面全面地還原一線互聯(lián)網(wǎng)公司W(wǎng)eb前端技術(shù)棧。

創(chuàng)作本書(shū)的初衷是幫助移動(dòng)Web前端開(kāi)發(fā)領(lǐng)域的工程師們，勾畫(huà)出一張實(shí)用并且具體的技術(shù)圖，幫助讀者正確且快速地掌握學(xué)習(xí)路徑。本書(shū)篇幅有限，力求精簡(jiǎn)，只列舉了各技術(shù)棧中核心關(guān)鍵部分，包括大量基于Web前端的優(yōu)秀開(kāi)源技術(shù)類(lèi)庫(kù)和框架介紹，是進(jìn)入移動(dòng)Web開(kāi)發(fā)領(lǐng)域的實(shí)用指南。

iKcamp由滬江Web前端團(tuán)隊(duì)中熱愛(ài)原創(chuàng)和翻譯的小伙伴發(fā)起，成立于2016年7月，"iK"代表布蘭登?艾克（JavaScript之父）。追隨JavaScript這門(mén)語(yǔ)言所秉持的精神，崇尚開(kāi)放和自由的我們一同工作、分享、創(chuàng)作，等候更多有趣跳動(dòng)的靈魂。

本書(shū)由iKcamp團(tuán)隊(duì)制作完成，主要成員如下。
陳達(dá)孚，2015年研究生畢業(yè)于香港中文大學(xué)計(jì)算機(jī)專(zhuān)業(yè)，現(xiàn)為滬江Web前端架構(gòu)部成員，主要進(jìn)行前端新技術(shù)調(diào)研實(shí)踐工作，曾在FDCon 2017上分享“基于React Native三端融合的應(yīng)用和實(shí)踐”。

朱會(huì)震，10年Web開(kāi)發(fā)經(jīng)驗(yàn)，曾任CSDN架構(gòu)師，負(fù)責(zé)多個(gè)核心產(chǎn)品的研發(fā)工作。近幾年專(zhuān)注于移動(dòng)Web開(kāi)發(fā)、前端工程化、高效能等方面的研究?，F(xiàn)就職于滬江，負(fù)責(zé)滬江網(wǎng)校Web前端開(kāi)發(fā)和管理工作。

哈志輝，滬江CCtalk產(chǎn)品線前端架構(gòu)師，有過(guò)多年的前后端開(kāi)發(fā)及架構(gòu)經(jīng)驗(yàn)。在前后端分離、Webpack構(gòu)建、React單頁(yè)應(yīng)用及自動(dòng)化等方面有豐富的經(jīng)驗(yàn)。

干珺，曾就職于大眾點(diǎn)評(píng)等互聯(lián)網(wǎng)公司，現(xiàn)就職于滬江學(xué)金網(wǎng)絡(luò)。React忠實(shí)愛(ài)好者，喜歡研究新技術(shù)。

戴亮，近十年前后端開(kāi)發(fā)經(jīng)驗(yàn)。2014年加入滬江Web前端架構(gòu)組，負(fù)責(zé)UI組件、移動(dòng)打包平臺(tái)等模塊開(kāi)發(fā)，推動(dòng)Node.js前后端分離方案的落地。曾在GMTC 2017上分享“滬江基于Node.js大規(guī)模應(yīng)用實(shí)踐”。

嚴(yán)明坤，2003年開(kāi)始從事網(wǎng)站開(kāi)發(fā)工作，2007年赴上海發(fā)展并專(zhuān)注于前端領(lǐng)域，曾就職于盛大網(wǎng)絡(luò)，現(xiàn)就職于滬江。

易未來(lái)，原滬江Web前端架構(gòu)師，現(xiàn)任職萬(wàn)達(dá)網(wǎng)絡(luò)科技集團(tuán)資深開(kāi)發(fā)工程師。多年前后端開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)專(zhuān)注于前端開(kāi)發(fā)，先后在EMC、攜程、滬江從事相關(guān)開(kāi)發(fā)及管理工作。

周遙，《HTML 5網(wǎng)頁(yè)開(kāi)發(fā)實(shí)例詳解》作者，先后在盛大網(wǎng)絡(luò)、大眾點(diǎn)評(píng)網(wǎng)就職，從事相關(guān)開(kāi)發(fā)及管理工作，現(xiàn)為滬江Web前端橫向負(fù)責(zé)人。

第1章　初識(shí)移動(dòng)Web前端1
1．1  移動(dòng)Web前端史1
1．1．1  Web開(kāi)發(fā)的變遷2
1．1．2  移動(dòng)Web與HTML 5不得不說(shuō)的關(guān)系3
1．1．3  移動(dòng)Web與原生應(yīng)用的優(yōu)劣勢(shì) 5
1．2  移動(dòng)Web前端現(xiàn)狀與未來(lái)6
1．2．1  移動(dòng)Web的現(xiàn)狀6
1．2．2  您需要掌握的知識(shí)體系7
1．2．3  技術(shù)拐點(diǎn)與未來(lái)趨勢(shì)10
1．3  常見(jiàn)問(wèn)題11
1．3．1  移動(dòng)Web前端開(kāi)發(fā)有前景嗎11
1．3．2  PC Web和移動(dòng)Web開(kāi)發(fā)區(qū)別12
1．4  本章小結(jié)13
第2章　移動(dòng)Web開(kāi)發(fā)環(huán)境搭建14
2．1  Visual Studio Code免費(fèi)跨平臺(tái)編輯器14
2．2  使用Node．js16
2．2．1  Node．js的用途16
2．2．2  安裝和調(diào)試Node．js17
2．2．3  什么是NPM19
2．2．4  Web代理工具NProxy22
2．2．5  HTTP服務(wù)器http-server24
2．3  本章小結(jié)25
第3章　HTML 5 必會(huì)實(shí)際常用特性 26
3．1  新的語(yǔ)義 26
3．1．1  新元素的到來(lái) 26
3．1．2  表單的增強(qiáng)應(yīng)用 28
3．1．3  使用音頻和視頻 32
3．2  訪問(wèn)你的設(shè)備 34
3．2．1  定位當(dāng)前地埋位置35
3．2．2  實(shí)戰(zhàn)演練：調(diào)用攝像頭拍個(gè)照 37
3．2．3  實(shí)戰(zhàn)演練：在手機(jī)上實(shí)現(xiàn)搖一搖41
3．3  離線和存儲(chǔ)44
3．3．1  實(shí)戰(zhàn)演練：搭建一個(gè)簡(jiǎn)單的離線應(yīng)用44
3．3．2  離線之后資源該如何更新――Service Worker47
3．3．3  LocalStorage與SessionStorage48
3．3．4  實(shí)戰(zhàn)演練：利用IndexedDB實(shí)現(xiàn)便簽管理 51
3．4  圖像效果56
3．4．1  使用Canvas繪制一個(gè)簡(jiǎn)單的餅圖56
3．4．2  使用SVG實(shí)現(xiàn)奧運(yùn)五環(huán)58
3．4．3  WebGL帶來(lái)了3D圖像功能60
3．5  不一樣的通信62
3．5．1  PostMessages62
3．5．2  XMLHttpRequest Level 2   65
3．5．3  Server Sent Event69
3．5．4  WebSocket 72
3．5．5  WebRTC 73
3．6  其他常用特性 77
3．6．1  History API與單頁(yè)應(yīng)用77
3．6．2  Drag和Drop介紹 79
3．6．3  利用Web Workers加速應(yīng)用計(jì)算81
3．6．4  利用Performance API分析網(wǎng)站性能82
3．7  本章小結(jié)85
第4章　CSS 3 必會(huì)實(shí)戰(zhàn)技巧86
4．1  認(rèn)識(shí)CSS 3 86
4．1．1  什么是CSS 3 87
4．1．2  移動(dòng)Web的CSS 3現(xiàn)狀 89
4．1．3  用Modernizr檢測(cè)瀏覽器是否支持CSS 3 93
4．2  選擇器 96
4．2．1  常見(jiàn)選擇器 97
4．2．2  偽類(lèi)和偽元素 99
4．2．3  優(yōu)先級(jí)和權(quán)重 104
4．3  響應(yīng)式開(kāi)發(fā) 106
4．3．1  常見(jiàn)設(shè)備的寬高 106
4．3．2  Flex彈性盒布局 108
4．3．3  媒體查詢（Media Query） 112
4．3．4  用rem開(kāi)發(fā)響應(yīng)式設(shè)計(jì) 115
4．3．5  多列（Multiple Columns） 119
4．4  動(dòng)效 122
4．4．1  轉(zhuǎn)換（Transform） 122
4．4．2  過(guò)渡（Transition） 126
4．4．3  動(dòng)畫(huà)（Animation） 128
4．5  常用特性 131
4．5．1  開(kāi)放字體格式（WOFF） 131
4．5．2  背景（Backgrounds） 134
4．5．3  顏色（Color） 138
4．5．4  文字效果（Text Effects） 141
4．5．5  邊框（Border） 144
4．6  預(yù)編譯 147
4．6．1  Less介紹和安裝 147
4．6．2  Less使用 150
4．6．3  Sass介紹和安裝 154
4．6．4  Sass使用 156
4．6．5  Compass的安裝和使用 160
4．7  本章小結(jié) 163
第5章　JavaScript關(guān)鍵語(yǔ)法及使用技巧 164
5．1  理解JavaScript 164
5．1．1  語(yǔ)言基礎(chǔ) 165
5．1．2  函數(shù)和參數(shù) 168
5．2  事件 171
5．2．1  事件概述 171
5．2．2  事件委托 172
5．2．3  移動(dòng)端事件 175
5．3  作用域、閉包和this 178
5．3．1  使用let實(shí)現(xiàn)塊級(jí)作用域 178
5．3．2  閉包 180
5．3．3  采用call、apply、bind改變this 182
5．4  面向?qū)ο?184
5．4．1  原型和原型鏈 184
5．4．2  Mixin模式 186
5．4．3  ECMAScript 6的Class和Extends 188
5．5  異步編程 189
5．5．1  AJAX中的Callback回調(diào)函數(shù) 189
5．5．2  Promise模式 190
5．5．3  生成器Generator 192
5．6  模塊化 194
5．6．1  為什么需要模塊化 195
5．6．2  AMD和CMD規(guī)范 197
5．6．3  ECMAScript 6標(biāo)準(zhǔn)的模塊支持 205
5．7  ECMAScript 6其他常用功能 207
5．7．1  基礎(chǔ)數(shù)據(jù)類(lèi)型的擴(kuò)展 207
5．7．2  使用解構(gòu)賦值來(lái)簡(jiǎn)化代碼 210
5．7．3  使用Babel插件提前使用新特性 212
5．8  本章小結(jié) 215
第6章　HTML 5 移動(dòng)開(kāi)發(fā)實(shí)戰(zhàn) 216
6．1  在地圖上顯示行走軌跡 216
6．2  仿原生相冊(cè) 220
6．2．1  實(shí)現(xiàn)相冊(cè)初始展示頁(yè) 221
6．2．2  通過(guò)手勢(shì)操作控制相片 222
6．3  使用Socket．IO制作小型聊天室 224
6．3．1  前端HTML+JavaScript實(shí)現(xiàn)聊天界面 225
6．3．2  服務(wù)器端Node．js監(jiān)聽(tīng)連接 227
6．4  移動(dòng)端拍照上傳實(shí)踐 228
6．4．1  前端HTML+CSS+JavaScript 229
6．4．2  服務(wù)器端Node．js 232
6．5  利用Microdata進(jìn)行SEO優(yōu)化 232
6．5．1  認(rèn)識(shí)Microdata 233
6．5．2  提升網(wǎng)頁(yè)SEO效果 233
6．6  制作一個(gè)帶字幕的視頻播放器 237
6．7  使用Pixi．js制作“抓住開(kāi)學(xué)君”游戲（Canvas+WebGL） 242
6．8  用Canvas制作刮刮卡 248
6．9  實(shí)戰(zhàn)演練：實(shí)現(xiàn)3D全景效果 251
6．9．1  需要的CSS 3特性 251
6．9．2  實(shí)現(xiàn)原理 251
6．9．3  實(shí)現(xiàn)代碼 253
6．10  本章小結(jié) 255
第7章　移動(dòng)網(wǎng)頁(yè)樣式布局實(shí)戰(zhàn) 256
7．1  靜態(tài)布局的實(shí)際應(yīng)用 256
7．1．1  設(shè)計(jì)活動(dòng)頁(yè)面靜態(tài)布局 257
7．1．2  靜態(tài)布局在移動(dòng)端上的自適應(yīng) 257
7．2  水平居中與垂直居中實(shí)戰(zhàn) 259
7．2．1  水平居中 259
7．2．2  自適應(yīng)塊級(jí)元素水平居中 260
7．2．3  行內(nèi)元素垂直居中 261
7．2．4  塊級(jí)元素的垂直居中 263
7．2．5  基于視口單位的解決方案 264
7．2．6  基于Flexbox的解決方案 265
7．3  柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式列表 267
7．3．1  實(shí)現(xiàn)柵格布局 267
7．3．2  柵格布局的原理 269
7．4  Flex多欄布局實(shí)戰(zhàn) 269
7．5  實(shí)戰(zhàn)演練：滬江網(wǎng)校首頁(yè)rem布局實(shí)踐 272
7．6  實(shí)戰(zhàn)演練：側(cè)邊欄的滑進(jìn)滑出效果 276
7．7  實(shí)戰(zhàn)演練：模擬原生的頁(yè)面切換效果 280
7．7．1  實(shí)現(xiàn)頁(yè)面切換過(guò)渡效果 280
7．7．2  模擬切換原理解析 283
7．8  提高Web動(dòng)畫(huà)的性能實(shí)戰(zhàn) 284
7．8．1  使用CSS 3動(dòng)畫(huà) 284
7．8．2  使用高性能的JavaScript動(dòng)畫(huà) 285
7．9  實(shí)戰(zhàn)演練：課程分類(lèi)列表實(shí)戰(zhàn) 286
7．9．1  實(shí)現(xiàn)主頁(yè)結(jié)構(gòu) 287
7．9．2  響應(yīng)式CSS實(shí)現(xiàn)（Compass） 289
7．9．3  添加頁(yè)面動(dòng)態(tài)效果 293
7．10  本章小結(jié) 294
第8章　前端工程化實(shí)戰(zhàn) 295
8．1  前端工程化 295
8．1．1  前端工程化的必要性 296
8．1．2  前端工程化的發(fā)展史 298
8．2  工程化入門(mén)Grunt 300
8．2．1  安裝和配置 301
8．2．2  Grunt插件 302
8．2．3  實(shí)戰(zhàn)演練：使用Grunt開(kāi)發(fā)一個(gè)簡(jiǎn)易相冊(cè) 305
8．3  使用Gulp構(gòu)建一個(gè)ECMAScript 6和Sass應(yīng)用 309
8．3．1  安裝和配置 309
8．3．2  預(yù)處理任務(wù) 310
8．3．3  實(shí)戰(zhàn)演練：采用ECMAScript 6開(kāi)發(fā)一個(gè)Markdown編輯器 312
8．3．4  代碼檢查任務(wù) 315
8．3．5  代碼合并、壓縮、重命名任務(wù) 317
8．3．6  監(jiān)聽(tīng)文件變化自動(dòng)構(gòu)建 318
8．4  實(shí)戰(zhàn)演練：使用Webpack構(gòu)建一個(gè)React應(yīng)用 320
8．4．1  安裝和配置 320
8．4．2  常用的加載器和插件 323
8．4．3  緩存控制 327
8．4．4  簡(jiǎn)化模塊引用 330
8．4．5  異步模塊加載 332
8．4．6  使用Source Map調(diào)試代碼 335
8．5  本章小結(jié) 338
第9章　移動(dòng)Web常用開(kāi)發(fā)方式實(shí)戰(zhàn) 339
9．1  基于DOM的開(kāi)發(fā)方式 339
9．1．1  使用Zepto和前端模板開(kāi)發(fā)簡(jiǎn)單備忘錄 340
9．1．2  解決原生單擊事件的缺陷 341
9．1．3  為何拋棄掉Zepto 343
9．2  基于React的開(kāi)發(fā)方式 345
9．2．1  使用JSX語(yǔ)法創(chuàng)建React組件 345
9．2．2  在實(shí)踐中掌握React生命周期 348
9．2．3  實(shí)現(xiàn)組件間通信 353
9．2．4  實(shí)現(xiàn)組件關(guān)注分離 355
9．2．5  實(shí)戰(zhàn)演練：運(yùn)用組件化方式開(kāi)發(fā)一個(gè)備忘錄 358
9．2．6  如何管理應(yīng)用的狀態(tài) 364
9．2．7  添加動(dòng)畫(huà)效果 366
9．2．8  提高React組件性能 369
9．3  基于Vue．js的開(kāi)發(fā)方式 372
9．3．1  實(shí)戰(zhàn)演練：開(kāi)發(fā)一個(gè)簡(jiǎn)單的備忘錄應(yīng)用（Vue．js 2．0） 372
9．3．2  管理應(yīng)用的狀態(tài)及實(shí)現(xiàn)組件間的通信 375
9．3．3  添加動(dòng)畫(huà)效果 379
9．4  打造單頁(yè)應(yīng)用SPA 381
9．4．1  單頁(yè)應(yīng)用的優(yōu)勢(shì)是什么 382
9．4．2  實(shí)戰(zhàn)演練：實(shí)現(xiàn)一個(gè)單頁(yè)路由 382
9．4．3  實(shí)戰(zhàn)演練：使用React開(kāi)發(fā)一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用 384
9．4．4  單頁(yè)應(yīng)用的狀態(tài)管理 386
9．5  本章小結(jié) 388
第10章　混合式開(kāi)發(fā)實(shí)戰(zhàn) 389
10．1  為什么需要混合式開(kāi)發(fā) 389
10．1．1  混合式開(kāi)發(fā)種類(lèi) 389
10．1．2  混合式開(kāi)發(fā)的優(yōu)勢(shì) 390
10．1．3  選擇合適的混合式開(kāi)發(fā)方案 391
10．2  Cordova開(kāi)發(fā)入門(mén) 392
10．2．1  JavaScript和Native互相調(diào)用 392
10．2．2  Cordova介紹和安裝 394
10．2．3  Cordova開(kāi)發(fā)使用 397
10．3  React Native實(shí)戰(zhàn) 400
10．3．1  React Native簡(jiǎn)介 400
10．3．2  React Native樣式和布局 402
10．3．3  React Native組件概念 404
10．3．4  簡(jiǎn)單組件實(shí)戰(zhàn) 404
10．3．5  復(fù)合組件實(shí)戰(zhàn) 405
10．3．6  第三方組件實(shí)戰(zhàn) 406
10．3．7  常用API實(shí)踐 407
10．4  實(shí)戰(zhàn)演練：用React Native開(kāi)發(fā)新聞閱讀應(yīng)用 410
10．4．1  React Native的工程項(xiàng)目結(jié)構(gòu)一覽 410
10．4．2  列表頁(yè) 411
10．4．3  新聞評(píng)論頁(yè) 414
10．4．4  新聞?wù)故卷?yè) 414
10．5  本章小結(jié) 415
第11章　前端開(kāi)發(fā)調(diào)試實(shí)戰(zhàn) 417
11．1  瀏覽器調(diào)試 417
11．1．1  Chrome開(kāi)發(fā)者工具 418
11．1．2  Safari開(kāi)發(fā)者工具 421
11．2  代理工具 424
11．2．1  Mac OS下Charles的用法 424
11．2．2  Windows下Fiddler的用法 426
11．3  多終端同步工具 428
11．3．1  多設(shè)備瀏覽器同步測(cè)試工具BrowserSync 429
11．3．2  雙向自動(dòng)刷新樣式工具Emmet LiveStyle 431
11．4  模擬器調(diào)試 432
11．4．1  Android模擬器調(diào)試 432
11．4．2  iOS模擬器調(diào)試 434
11．4．3  在線模擬器Manymo 436
11．5  多平臺(tái)調(diào)試 437
11．5．1  網(wǎng)站響應(yīng)式設(shè)計(jì)測(cè)試工具Ghostlab 437
11．5．2  移動(dòng)端Web開(kāi)發(fā)調(diào)試工具Weinre 439
11．5．3  JavaScript遠(yuǎn)程調(diào)試和測(cè)試工具Vorlon．JS 442
11．6  云真機(jī)調(diào)試 444
11．6．1  瀏覽器兼容性云端測(cè)試應(yīng)用BrowserStack 444
11．6．2  Web端移動(dòng)設(shè)備管理控制工具STF 446
11．6．3  多瀏覽器兼容性測(cè)試平臺(tái)F2etest 448
11．7  React調(diào)試 452
11．7．1  React Developer Tools 452
11．7．2  Redux DevTools 455
11．8  本章小結(jié) 458
第12章　前端單元測(cè)試實(shí)戰(zhàn) 459
12．1  JavaScript單元測(cè)試框架Jasmine實(shí)戰(zhàn) 459
12．2  使用Mocha和Chai在Node．js進(jìn)行單元測(cè)試 462
12．3  使用Sinon輔助單元測(cè)試 465
12．4  使用Karma自動(dòng)化單元測(cè)試 468
12．5  使用Istanbul計(jì)算代碼覆蓋率 470
12．6  使用Benchmark．js進(jìn)行基準(zhǔn)測(cè)試 473
12．7  實(shí)戰(zhàn)演練：React版?zhèn)渫涰?xiàng)目的完整單元測(cè)試 475
12．8  本章小結(jié) 479
第13章　前端性能優(yōu)化實(shí)戰(zhàn) 480
13．1  常用網(wǎng)站性能優(yōu)化指標(biāo) 480
13．1．1  網(wǎng)頁(yè)的資源請(qǐng)求與加載階段 481
13．1．2  網(wǎng)頁(yè)渲染階段 482
13．1．3  JavaScript腳本的執(zhí)行速度 484
13．2  依舊有效的Yahoo性能優(yōu)化法則 484
13．3  性能優(yōu)化工具使用實(shí)戰(zhàn) 486
13．3．1  YSlow 486
13．3．2  PageSpeed 487
13．3．3  WebPagetest 488
13．4  HTTP協(xié)議頭緩存實(shí)戰(zhàn) 489
13．4．1  客戶端緩存流程 489
13．4．2  緩存協(xié)議內(nèi)容 490
13．4．3  實(shí)戰(zhàn)演練：HTTP緩存 491
13．5  資源按需加載實(shí)戰(zhàn) 492
13．5．1  基于RequireJS的按需加載 492
13．5．2  基于Webpack的按需加載 493
13．5．3  圖片懶加載 494
13．6  不同網(wǎng)絡(luò)類(lèi)型的優(yōu)化實(shí)戰(zhàn) 495
13．6．1  獲取網(wǎng)絡(luò)類(lèi)型 495
13．6．2  弱網(wǎng)圖片優(yōu)化 496
13．6．3  弱網(wǎng)緩存優(yōu)化 496
13．7  實(shí)戰(zhàn)演練：Nginx配置Combo合并HTTP請(qǐng)求 497
13．7．1  安裝Nginx和文件合并模塊 498
13．7．2  配置Nginx和Combo 499
13．8  本章小結(jié) 499
第14章　項(xiàng)目實(shí)戰(zhàn)：搭建直播平臺(tái)（Cordova+Koa+React） 500
14．1  項(xiàng)目的安裝和啟動(dòng) 500
14．1．1  安裝依賴(lài) 501
14．1．2  啟動(dòng)項(xiàng)目 501
14．1．3  Cordova打包 502
14．2  直播平臺(tái)功能預(yù)覽 502
14．2．1  直播流程 503
14．2．2  直播核心頁(yè)面 503
14．3  頁(yè)面的布局和結(jié)構(gòu) 504
14．3．1  首頁(yè) 504
14．3．2  發(fā)起直播頁(yè)面 505
14．3．3  觀看直播頁(yè)面 505
14．4  搭建WebRTC服務(wù)端――Koa 506
14．5  實(shí)現(xiàn)多人在線直播功能 512
14．6  實(shí)現(xiàn)彈幕客戶端與服務(wù)端通信 517
14．6．1  客戶端與服務(wù)端通信的過(guò)程 517
14．6．2  客戶端代碼設(shè)計(jì)――React 518
14．6．3  服務(wù)端代碼設(shè)計(jì) 520
14．7  本章小結(jié) 521