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

移動互聯網的興起和快速普及，給前端開發(fā)人員帶來了新機遇。移動Web前端技術作為整個技術鏈條中重要的一環(huán)，卻亂象叢生。本書是一本梳理移動前端和Native客戶端技術體系的入門實戰(zhàn)書。

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

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

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

本書由iKcamp團隊制作完成，主要成員如下。
陳達孚，2015年研究生畢業(yè)于香港中文大學計算機專業(yè)，現為滬江Web前端架構部成員，主要進行前端新技術調研實踐工作，曾在FDCon 2017上分享“基于React Native三端融合的應用和實踐”。

朱會震，10年Web開發(fā)經驗，曾任CSDN架構師，負責多個核心產品的研發(fā)工作。近幾年專注于移動Web開發(fā)、前端工程化、高效能等方面的研究。現就職于滬江，負責滬江網校Web前端開發(fā)和管理工作。

哈志輝，滬江CCtalk產品線前端架構師，有過多年的前后端開發(fā)及架構經驗。在前后端分離、Webpack構建、React單頁應用及自動化等方面有豐富的經驗。

干珺，曾就職于大眾點評等互聯網公司，現就職于滬江學金網絡。React忠實愛好者，喜歡研究新技術。

戴亮，近十年前后端開發(fā)經驗。2014年加入滬江Web前端架構組，負責UI組件、移動打包平臺等模塊開發(fā)，推動Node.js前后端分離方案的落地。曾在GMTC 2017上分享“滬江基于Node.js大規(guī)模應用實踐”。

嚴明坤，2003年開始從事網站開發(fā)工作，2007年赴上海發(fā)展并專注于前端領域，曾就職于盛大網絡，現就職于滬江。

易未來，原滬江Web前端架構師，現任職萬達網絡科技集團資深開發(fā)工程師。多年前后端開發(fā)經驗，現專注于前端開發(fā)，先后在EMC、攜程、滬江從事相關開發(fā)及管理工作。

周遙，《HTML 5網頁開發(fā)實例詳解》作者，先后在盛大網絡、大眾點評網就職，從事相關開發(fā)及管理工作，現為滬江Web前端橫向負責人。

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