√聚焦开创性话题，完整呈现与详尽剖析这一突破终端碎片化难局的解决方案
√鬼道及团队倾力打造，三大电商前端技术掌门及一线互联网高工赞誉力推
√跨越手机、平板、桌面和电视等不同终端在呈现本质与商业模式上的差异，强调业务本质和核心人机交互流程
√面向未来人机交互，学会如何选择响应式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技术融合的读者。
" 推荐序
2012年年底，我从云OS运营团队转岗到天猫前端团队，之前和手机硬件厂商、Mobile OS及App市场的合作经历让我重新思考前端的未来和电子商务的技术方向。除了在天猫内部实践基于移动优先（Mobile First）的设计研发外，还和infoQ合作把Qcon北京2013的前端议题定为“跨终端Web”，于是就有了采访稿《从可编程到跨终端——QCon北京2013“跨终端的Web”专题出品人鄢学鵾专访》[ http://www.infoq.com/cn/news/2013/01/qcon-beijing-web-interview]，阐述当时的认知和想法。现在“跨终端Web”已经诞生一年半了，鬼道同学把这些想法和实践都编写成书实在让人惊喜和敬佩，我有幸成为这个成就的见证人，并再次有机会和大家谈谈跨终端Web的初心和思考。
1991年诞生了World Wide Web、HTTP和HTML，1995年诞生了JavaScript、Java和PHP，1996年诞生了CSS，1998年CSS 2.1正式发布，1999年CDN诞生且HTTP 1.1和HTML 4.01正式发布，2000年ECMA-262 3rd正式发布，2001年IE 6发布。作为Web开发者和前端工程师的我们应该对这些大事件相当不陌生，但如果你仔细看看这些年份就会发现我们所使用的绝大部分技术和方案都比IE 6老。在那个时期没有真正意义的前端，常见情况是美工切图，后端嵌套模板，也没有所谓的前端架构，前后端的发布机制几乎一样，那就是门户盛行的时代，Yahoo、新浪、搜狐和网易当道。
IE 6是第一轮浏览器大战的胜者，垄断式的胜利直接导致Web基础设施至少10年的缓慢发展，标准的意义也就不那么明显了。其实1994年就有了W3C，但民间为了解决W3C面对浏览器厂商不给力的混乱状况于1998成立了WaSP（The Web Standards Project），其中一个创始人于2003年发表了影响力巨大的著作《Design with The Standards（网站重构）》，当然在中国产生了估计作者都没有想到的额外影响，那就是出现了重构工程师。2004年Firefox 1.0、Gmail和Google Sugguest发布，2005年AJAX横空出世和Google Maps发布，2006年jQuery和YUI发布。这些事件的到来显示出了低成本的Web在跨浏览器上的巨大威力和人机交互的显著改善，导致当时互联网99%以上内容都是使用Web来呈现的，所以对于当时绝大部分人而言，WWW就是互联网。巨大的需求导致Web开发的规模化和专业分工，这就是前端工程师开始出现并大量集结于以Web业务为主的互联网公司的原因。
我们可以称这个时代为前端工程师1.0，比如在Google、Facebook、Yahoo、阿里巴巴、百度、腾讯等公司中，前端团队小有规模且以Web开发为主，此时的前端工程师们大量使用HTML、CSS、JavaScript开发基于桌面浏览器的网页和应用。这个时代的前端工程师主要具备3个方面的能力，一是跨浏览器的兼容能力，需要理解渐进增强和优雅退化的思想，深入Web标准并结合环境数据制定GBS（Graded Browser Support浏览器分级标准）；二是富交互Web的开发能力，能够基于，甚至开发JavaScript库去实现人和机器的复杂互动；三是性能优化能力，实践表明前端占Web性能80%，类似CDN和按需加载等各种性能优化方案深度地影响了前端架构和发布机制。
虽然今日市面上大部分前端工程师招聘条件还是基于前端工程师1.0的，但我们的环境自2007年iPhone发布起就在悄然却快速地变革，我们可能是家里唯一使用电脑的那个人，而手机在吃饭、走路、约会、上厕所等时都已经成为不可或缺的陪伴。当我还在云OS做运营时，便有一个令人震惊的发现：人类发展五千年到现在的最大共同点可能是每人都有移动智能设备。人们已经处于各种各样碎片化的智能移动设备上，这些设备有触摸屏、相机、麦克风、陀螺仪、加速计等特性，使得人同机器交互的方式发生了巨大的革命，更重要的是它们都和网络连接，没有了离线状态。于是，当一个人在大街上看到奇闻异事随手用手机拍下来并发到微博上，TA的朋友可能在手机、平板电脑或普通电脑的微博上看到并转发，也可能被TA的朋友转到微信或IM等，TA朋友的朋友同样可能在手机、平板电脑或普通电脑的另一种软件上看到这个信息，甚至信息被电视媒体或平面媒体发现并造成更大范围的传播，更多TA不认识的电视或平面媒体通过扫描报道时的二维码又找到TA的微博，这一切可能在瞬间完成。这个小场景告诉我们人和信息是在智能终端（Phone、Pad、Desktop、TV等设备）、软件终端（浏览器、SNS、IM等应用）和传统终端（电视、广播、平面等媒体）间交叉流动的，这是一个去中心的网状结构，也是互联网的本质特性，所以跨终端不仅仅是跨越设备（device），更是跨越人机交互的场景入口（end）。
面对这种终端碎片化的潮流，前端工程师怎么办？解决方案就是基于最重要的前端开发思想渐进增强和优雅退化得出的移动优先：一是毫无疑问绝大部分用户已经或正在成为智能设备用户，我们要为80%的目标用户服务；二是专注于核心业务需求，人的本性、业务本质和商业模式本质基本上不会随着终端改变而改变，所以相同业务在手机、平板、桌面和电视上呈现的本质和商业模式不会有不同，小屏幕终端是我们重新思考业务本质和核心人机交互流程的机会，其挖掘出的本质会改变其他终端；三是针对未来人机交互，现在移动设备引领人机交互的变革潮流，通过必备特性虚拟或增强现实，并逐步引入到桌面和电视等设备中。所以，选择哪个具体技术方案，是响应式Web，还是服务端响应式Web（URL不变，通过服务端在不同设备展现不同模板），还是多个URL Web（不同的终端，不同的URL），还是Hybrid应用（Native和Web混合使用，比如iOS App Store一直就是引用壳里面套个网站），还是Native应用，是依据业务本质、人性需求和人机环境趋势来综合判断的。由于Web的本质特性就是低成本跨平台但对设备先进特性支持不够，而Native应用能够充分利用硬件先进特性但受限于系统平台，导致开发者没有发布能力，所以大多数情况下，可以把跨终端Web作为默认选择。
在跨终端的时代，渐进增强和优雅退化依旧是最重要的前端开发思想，但前端工程师们不能像以前一样仅仅固守在Web上，Web和客户端应用的融合已经成为必然，Web从页面（page）到应用（application）反映了人机交互革命带来新的体验趋势，客户端和动画开发成为了前端工程师的基本功。移动优先的跨终端解决方案核心是一套数据有多个高品质低成本展现方式，这促使前后端分离成为必需，前端工程师不仅仅要关心客户端环境也要关心服务端环境，所以GBS需要升级到GTE（Graded Target Environments，分级目标环境），工程师更关注端到端的数据接口约定（比如正文中的IF就是这种思想下的一种实践方案），这会彻底改变前端的开发方式、架构和发布机制，也会导致前端团队快速膨胀直到前后端比率趋于一致。这是一个巨大的挑战，也是一个前所未有的机会，更是时势的要求。我把这个时代叫作前端工程师2.0。
这篇推荐序被我拖延了很久很久，结尾之时恰逢鬼道同学入职天猫一周年，就拿老乔的话来zhuangbility一下：“你如果出色地完成了某件事，那你应该再做一些其他的精彩事儿。不要在前一件事上徘徊太久，想想接下来该做什么。”这应该是最好的礼物之一。"
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
这是一本从天猫的实际业务场景出发，经过点滴积累、持久坚持而写就的书。书中的内容有可能很快会过时，但作者面对问题时的思考方式、解决问题后的总结习惯永不过时。书中的思考，值得每一位程序员学习并实践。
——支付宝前端负责人玉伯（王保平）
现在人和人大的共同点也许就是都拥有一部智能移动终端，浏览器的大量使用催生了前端工程师职业的出现，智能移动终端的爆炸式普及会推动前端工程师规模的超几何级增长和综合技能的革命性升级。前端工程师要从“兼容多浏览器 + ajax”走入到“跨终端 + 前后端分离”时代，这本书就是开始。
——天猫前端负责人三七（鄢学鲲）
这两年我的工作重心全都放在跨终端领域。我坚定的认为：在跨终端时代，无论是产品设计与运营，还是技术架构和开发模式，都将发生重大的变革。所有Web开发人员即将面临（或者说已然面临）新的挑战。尤其对前端工程师而言，会是一次升级的良机。我建议所有的前端工程师马上开始关注这个领域。
——淘宝前端负责人小马（赵泽欣）
鬼道同学从自身的项目经历出发，总结了跨终端Web开发中遇到的问题，并给出对应的**实践的解决方案，值得从事相关工作的同学去参考和借鉴。
——百度前端高工李玉北