《跨终端 Web》- 读书笔记（一）

引言

这本书是从 2017-02-16 开始起读，由于 React-Native 的兴起，使得跨平台开发 App 的成本越来越低，而对于这新兴的技术，我也总是想找机会来学习一下。恰巧公司要开始进行新的尝试，想利用 React 和 React-Native 的共同点，来研究出一套适合三端的框架，即：Web / Android / iOS。

在有限的空间和时间上，快速开发出功能、业务均相似甚至是相同的产品。起初查找资料，资料不多而且大都也都处在尝试的阶段（据了解携程出了一套类似的框架 moles，不过并没有开源）。说实话，第一个反应就是松耦合，组件之间尽可能的松耦合，统一接口和入口，根据不同的平台编写不同的组件内部实现，同时组件的内部尽可能的内聚。

经过实践之后发现，目前以我的技术和能力，这种构想对于我来说还是很有挑战，目前仍然在摸着石头过河，如果各位大神有什么好的想法，希望可以留下联系方式互相交流。

回归主题，在读这本书的过程中，作者的思路和经验给了我一些关于跨终端的启发以及帮助我对知识进行扫盲。

这系列的文章，同样的也包括我在读完这本书之后的总结和提炼。

跨终端 Web

1. 跨终端是怎么来的呢？

由于移动互联网的发展，网站的页面从 PC 端逐渐的扩展到了移动端，包括移动设备的浏览器、App 的 WebView 等等，也就是说现在的页面可以运行在同一个设备上不同的终端下，因此定义为“跨终端”。

同时，根据作者所提到的，“跨”强调了在多个终端上信息传递、相互协作等动态内涵。主要从两方面来体现：一是产品从移动端触发，层层迭代；二是用户的入口永远只有一个，而内容展示的形式却各有不同。

第二点可以用一个例子来解释，就是同一个访问链接 URL ，用户使用 PC 访问和使用手机访问，应该根据 UA 判断返回最适合的终端展现的页面。

2. 移动端将成为主流终端：

由于本书出版较早，因此这本书还用一定的篇幅来介绍移动端的优势和数据，总之，就目前的形式和数据来看，移动端会渐渐成为主流的浏览方式。

3. 团队协作：

对于团队来说，产品的开发不能再以终端来协作，而是应该以业务模块来共同协作，这是由于同一个业务无须因为终端的不同而分给不同的团队，反之会增加成本、造成业务的差异性，资源被浪费。

4. “跨终端不只是响应式”：

跨终端 ≠ 响应式，响应式本身就与跨终端有着内在的本质的联系，同时响应式只是实现跨终端的其中一种方式。书中介绍到四种方式来处理跨终端：

响应式；多站点；多模板；多平台；

5. 响应式：

书中主要介绍了响应式的 @media 的处理条件，可以以 BootStrap 定义的 @media 尺寸作为区分的标准，也可以使用作者提供的尺寸。然而，我推荐的是根据具体的项目、适用范围和具体网站的布局情况作为区分 @media 的标准，不可一概而论。

1. minWidth = 1300px;2. minWidth = 600px & maxWidth = 1299px;3. minWidth = 400px & maxWidth = 599px;4. maxWidth = 399px;

了解更多详情：自适应网页设计

虽然响应式可以很好地解决不同终端的展示的问题，但是却增加了移动端的 DOM 冗余的问题。

6. 多站点：

顾名思义，就是根据每个终端都创建不同的站点与之对应，当用户请求时，根据 UA 或者屏幕宽度来分发不同的站点，这么做的问题是会加大服务器端维护跳转的成本，而且多站点就意味着多工程，代码冗余，同时对于用户来说域名太多，对站点的辨识度就会降低。

7. 多模板：

多模板是响应式和多站点相结合的一种方案。如将模板分为 Tiny / Normal，根据宽度去展示给用户。虽然解决了 DOM 冗余，但是由于每个页面都可能存在多模板，需要页面渲染前对模板动态加载和首次服务器渲染等环节进行优化。

8. 多平台：

Native App 是实现了跨终端 Web 的一种途径，优、缺点十分的明显。

优点是高性能、丰富的系统级功能的调用，标准的发布渠道；

缺点是发布成本过高、开发成本高和签字的风险。

未完待续…