跨終端 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 KissyGallery組件大賽”冠軍。

本書源于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章完整介紹了如何通過腳本錄制和回放來實現跨終端動作同步。

?

轉載于:https://blog.51cto.com/bvbroadview/1440009

總結

以上是生活随笔為你收集整理的跨终端 Web的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。