跨終端 Web

跨終端 Web（移動優先|響應式|HTML5|Hybrid|桌面+移動應用|一線前端負責人聯袂推薦）

徐凱  著  

ISBN 978-7-121-23345-6

2014年6月出版

訂價：55.00元

240頁

16開

編輯推薦

√聚焦開創性話題，完整呈現與詳盡剖析這一突破終端碎片化難局的解決方案

√鬼道及團隊傾力打造，三大電商前端技術掌門及一線互聯網高工讚譽力推

√跨越手機、平板、桌面和電視等不一樣終端在呈現本質與商業模式上的差別，強調業務本質和核心人機交互流程

√面向將來人機交互，學會如何選擇響應式Web、服務端響應式Web、多個URL Web，Hybrid或Native應用

√融合Web頁面和客戶端應用，用一套數據多個高品質低成本呈現的移動優先思想來變革前端開發方式、架構和發佈機制

√從天貓實際業務場景出發，覆蓋大量已經一線實踐檢驗的技術、思路、方法、流程和先進經驗

內容提要

移動互聯網不可阻擋地進入了咱們的生活。做者將本身在百度和天貓期間的跨終端Web的開發實踐轉化爲書中的技術方案和實現，呈現給各位讀者。第1章提出了跨終端Web的概念以及實現跨終端Web的多重途徑，第2章主要介紹Mobile Web的技術基礎，第3～7章是全書的核心，按照開發流程組織逐步講解了實現跨終端Web所須要的各種技術基礎設施，第8章主要介紹了Hybrid App的發展歷程、實現細節以及成熟的框架，第9章介紹的跨終端存儲方案（Storage）是做者曾經的冠軍做品，第10章完整介紹瞭如何經過腳本錄製和回放來實現跨終端動做同步。

《跨終端 Web》講解深刻淺出，通暢易懂，適合有必定PC Web基礎，但願迅速瞭解Mobile Web，致力於PC和Mobile Web技術融合的讀者。

目錄

1  跨終端Web       1

1.1  終端VS.設備 1

1.2  一個貫穿全書的例子   2

1.3  後續章節        3

1.4  移動優先        4

1.4.1  移動流量暴增    4

1.4.2  聚焦業務本質    5

1.4.3  人機交互擴展    7

1.4.4  再說書名    8

1.5  不僅是響應式        8

1.5.1  響應式         8

1.5.2  多站點         13

1.5.3  多模板         13

1.5.4  多平臺         15

1.6  解決方案        16

2  Mobile Web        17

2.1  HTML5    18

2.2  HTML      19

2.2.1  移動頁面模板    19

2.2.2  Viewport      21

2.2.3  touch-icon   26

2.2.4  其餘    27

2.3  觸屏事件        27

2.3.1  觸屏事件一覽    27

2.3.2  通用觸屏事件    28

2.4  調試        31

2.4.1  遠程調試    31

2.4.2  設備調試    43

2.5  兼容性   44

2.5.1  OS版本碎片化   44

2.5.2  國內的特殊狀況         46

2.5.3  WebView     46

2.5.4  更多工具    46

2.6  文檔        48

3  基準  51

3.1  GBS          51

3.2  MGBS      53

3.2.1  準備    53

3.2.2  操做系統分級    54

3.2.3  屏幕分辨率分級         65

3.2.4  瀏覽器分級         71

3.2.5  MGBS  73

3.3  GTE          75

3.3.1  分層設計    76

3.3.2  核心層         76

3.3.3  數據層         78

4  檢測  81

4.1  終端        81

4.1.1  什麼是終端         81

4.1.2  分類    82

4.2  終端檢測        82

4.2.1  場景    82

4.2.2  原理    83

4.2.3  實現    85

4.3  遺留問題        86

4.3.1  硬件信息    86

4.3.2  更精準的終端檢測    86

5  接口  87

5.1  跨終端流程複用   87

5.1.1  示例1 87

5.1.2  示例2 88

5.2  IF     89

5.2.1  始於一次重構    90

5.2.2  新的環境    95

5.2.3  模型    95

5.2.4  解決方案    96

5.2.5  架構    96

5.2.6  路線圖         99

5.3  if-spec 2.0       102

5.3.1  JSON Schema       102

5.3.2  Demo  109

5.3.3  meta    113

5.3.4  if-spec 1.0    114

5.4  if-mock 2.0      116

5.5  if-guide 2.0      118

5.6  總結        122

6  定位  125

6.1  定位        126

6.1.1  Hash    126

6.1.2  History API  127

6.1.3  視圖定位    129

6.2  數據        129

7  預覽  131

7.1  客戶端   132

7.2  服務端   133

7.3  示例        136

8  Hybrid App          139

8.1  Hybrid簡史    139

8.1.1  背景    139

8.1.2  簡史    140

8.1.3  現狀    142

8.2  Hybrid技術    144

8.2.1  Native調用Web          144

8.2.2  Web調用Native          144

8.2.3  Bridge 146

8.3  Hybrid框架    150

8.3.1  PhoneGap    151

8.3.2  Titanium      152

8.4  Device API       153

8.4.1  動做傳感器         156

8.4.2  環境傳感器         158

8.4.3  音頻    159

8.4.4  視頻    160

8.5  小結        160

9  存儲  161

9.1  狀態持久化   162

9.2  技術方案        163

9.2.1  總體方案    163

9.2.2  跨終端存儲方案         164

9.2.3  跨域通訊方案    166

9.2.4  安全性         168

9.2.5  遺留問題    168

9.3  使用        168

9.3.1  實例化         169

9.3.2  set/get         169

9.3.3  remove/clear       170

9.3.4  推薦命名    170

10  動做同步         171

10.1  原理      171

10.1.1  案例  171

10.1.2  動做同步  172

10.2  實現      173

10.2.1  Selenium    173

10.2.2  腳本錄製和回放       174

附錄A  GBS   183

附錄B  JSON Schema Core   189

附錄C  JSON Schema Validation   201

附錄D  if-spec 2.0         221

做者簡介         225

做者簡介

鬼道（原名徐凱），2011年畢業於同濟大學計算機系，模式識別方向碩士研究生。曾就任百度，現爲天貓前端通用組技術Leader。曾得到2011年百度最佳新人、2013年天貓技術部最佳新人、2013年天貓最佳小二（成長）。

2013年10月，憑藉跨終端跨域存儲組件Storage得到阿里「2013 Kissy Gallery組件大賽」冠軍。

本書源於2013年7月在D2上的主題分享「移動優先的跨終端Web」，2013年11月在W3CTECH 2013作了第二次分享。

就任天貓期間（2013年至今）帶領團隊完成了天貓工具欄項目並在2013年「雙十一」取得4倍於目標的成績，工具欄也成爲電商站點模仿的熱點。

就任百度期間（2011年至2013年）帶領前端團隊前後完成了全平臺（Web/Android/iOS）移動廣告SDK及其業務站點、移動富媒體廣告SDK、移動統計SDK及業務站點、移動雲測試中心（Alpha 版本）等工做。

新浪微博： @鬼道-徐凱

媒體評論

支付寶前端負責人玉伯（王保平）

這是一本從天貓的實際業務場景出發，通過點滴積累、持久堅持而寫就的書。書中的內容有可能很快會過期，但做者面對問題時的思考方式、解決問題後的總結習慣永不過期。書中的思考，值得每一位程序員學習並實踐。

----------------------------------------------

天貓前端負責人三七（鄢學鯤）

如今人和人最大的共同點也許就是都擁有一部智能移動終端，瀏覽器的大量使用催生了前端工程師職業的出現，智能移動終端的爆炸式普及會推進前端工程師規模的超幾何級增加和綜合技能的革命性升級。前端工程師要從「兼容多瀏覽器 + ajax」走入到「跨終端 + 先後端分離」時代，這本書就是開始。

----------------------------------------------

淘寶前端負責人小馬（趙澤欣）

這兩年個人工做重心全都放在跨終端領域。我堅決的認爲：在跨終端時代，不管是產品設計與運營，仍是技術架構和開發模式，都將發生重大的變革。全部Web開發人員即將面臨（或者說已然面臨）新的挑戰。尤爲對前端工程師而言，會是一次升級的良機。我建議全部的前端工程師立刻開始關注這個領域。

----------------------------------------------

百度前端高工李玉北

鬼道同窗從自身的項目經歷出發，總結了跨終端Web開發中遇到的問題，並給出對應的最佳實踐的解決方案，值得從事相關工做的同窗去參考和借鑑。

前言

移動互聯網不可阻擋地進入了咱們的生活。筆者將本身在百度和天貓期間的跨終端Web的開發實踐轉化爲書中的技術方案和實現，呈現給各位讀者。

本書大綱來自於筆者2013年7月在D2上的主題分享「移動優先的跨終端Web」，2013年11月W3CTECH 2013上作了第二次分享。

面向對象

本書適合有必定PC Web基礎，但願迅速瞭解Mobile Web，致力於PC和Mobile Web技術融合的讀者。

本書的第1章、第3章、第5章面向全部的讀者，即便您對Web技術毫無瞭解，仍能夠順利閱讀下來。本書其餘章節假定您對PC Web前端技術已經有所瞭解，知道HTML、CSS、JavaScript這些名詞的含義，而且動手寫過一個頁面。

章節簡介

第1章闡述了移動互聯網的現狀和遇到的問題，提出了跨終端Web的概念以及實現跨終端Web的多重途徑，破除了「惟Media Query論」，並引入移動移先的概念，豐富跨終端Web的內核。

第2章從對比PC Web的角度介紹了Mobile Web的技術基礎，並對遠程調試、兼容性等開發問題作了詳盡的闡述。

第3～7章是全書的核心，按照開發流程組織，逐步講解了實現跨終端Web所須要的各種技術基礎設施，包括：

     基準，給出了調試和測試過程當中的基準，肯定調試和測試的範圍。

     檢測，探討如何構造一個爲全站服務的終端屬性檢測工具。

     接口，探索實現流程複用的途徑及端到端的接口規範（IF）。

     定位，分別介紹了基於Hash和基於History API的跨終端定位方案。

     預覽，介紹了實現跨終端預覽的方案，並給出一個簡化的實現。

第8章介紹了Hybrid App的發展歷程、實現細節以及成熟的框架，並詳細分析了以傳感器爲核心的Device API。

第9章的跨終端存儲方案（Storage）是筆者參加「2013 Kissy Gallery組件大賽」時的冠軍做品。

第10章完整介紹瞭如何經過腳本錄製和回放來實現跨終端動做同步。