阅读时间10分钟

前言

在2013年，智能手机才刚刚开始进入千元机时代，手机硬件和手机 App 开发成本远远高于2020年现在的市场平均价，并且企业网站移动化还是一个新概念。

企业和政府开始重视门户网站在移动端浏览器的体验，例如中国政府网，联想，微软，w3c，csdn, 探路者等等，他们在寻找企业网站移动化解决方案的过程中，在经过预算，技术，产品体验以及服务质量的综合对比，最后选择云适配（Allmobilize ）方案，而这个方案的特点是在原有的 pc 前端工程中引入"一行代码实现网站移动化"，这行代码实际上是在网页 head 标签之后立刻引入一个 js 的外部脚本，而这个 js 脚本有哪些值得学习的研发知识呢？

<script src="htpp://cdn.example.com/allmobilize.js"></script>

一些案例

Allmobilize 方案特点

一行代码，快速部署

只需在网页嵌入一行 JavaScript 代码，便实现网站移动化，客户学习接受成本低

<script charset="utf-8" src="http://cdn.example.com/allmobilize.min.js" >

自动化更新，内容实时同步

适配后的移动网站内容自动与PC端实时同步更新，完全无需人力同步维护，同步率99.9%，同步响应时间平均0.01秒以内。

网址不变，统一URL

移动网址和PC网址始终一致，无需进行二次推广，有助提升网站在移动搜索引擎上的排名；统一URL，也利于彰显企业形象，提高客户信任度。

原理解析与实现

总结为三个核心步骤：

1. 阻止浏览器渲染原始 PC 网页渲染。

2. 创建网页移动端新的阅读视图模板。

3. 移动端视图模板与 PC 视图数据融合，渲染。

一、阻止浏览器渲染原始PC网页渲染

假如访问 https://www.kuaishou.com/ ，浏览器如果正常进行渲染，看到的将是这个电脑版网页，如果引入一行脚本，最终的预期结果是阻止浏览器渲染电脑版网页，显示一个移动端的视图，那脚本内怎么实现呢？

1. 1 阻止资源加载，样式和脚本执行

已知 DOM 文档的加载步骤：

（1）解析 htm l结构

（2）加载外部脚本和样式表文件

（3）解析并执行脚本代码

（4）构造 HTML DOM 模型，DOMContentLoaded执行点 // 【此时加工 img,ifram,script, link 等标签】

（5）加载图片等外部文件

（6）页面加载完毕

如果要达到阻止资源加载，样式和脚本执行的目的，那么就需要将网页 dom 不能被浏览器正常识别：

//所有 img, iframe, script,video 等等标签 增加 prefix
window.addEventListener("DOMContentLoaded", function () {
//使用 JavaScript 所有 img, iframe, script,style 等标签增加特殊的 prefix, 从而这些资源都不会被浏览器正常渲染
}, false)

href 修改后 x-href

原始

<link rel="shortcut icon" href="//static.yximgs.com/udata/pkg/fe/favicon.70ff1fcc.ico" type="image/x-icon">

调整后

<link rel="shortcut icon" x-href="//static.yximgs.com/udata/pkg/fe/favicon.70ff1fcc.ico" type="image/x-icon">

src 修改为 x-src

原始

<img src="//static.yximgs.com/udata/pkg/fe/kwai_qrcode.a6dfe547.png" alt="二维码" class="image">

调整后

<img x-src="//static.yximgs.com/udata/pkg/fe/kwai_qrcode.a6dfe547.png" alt="二维码" class="image">

script 增加 type="text/x-script"

原始

<script>
console.log('快手，拥抱每一种生活')
</script>

调整后

<script type="text/x-script">
console.log('快手，拥抱每一种生活')
</script>

style 增加 media="x-media"

原始

<style>
.logo{background:orange;
}
</style>

调整后

<style media="x-media">
.logo{background:orange;}
</style>

2.1 阻止图片、新窗口、和一些会延迟加载的对象的加载

Web Api 中的 window.stop() 恰好能实现目的，IE 也通过 document.execCommand('stop') 支持

//IE
document.execCommand('stop');
//Chrome 和 Firefox
window.stop();

二、创建移动端渲染内容

第一步中，我们已经成功阻止浏览器渲染原始 PC 网页渲染，那么第二步我们需要创建移动端体验视图。

那用户应该看到什么样的新网页内容呢？不同的网页地址又是怎么进行区分的呢？

2.1 通过正则映射新的网页配置

在 allmobilize.js 首先设计多组以正则表达式为键，移动端网页内容配置为值的字典，以下为例:

{
"^\/docs\/(News|news)\.asp":{'template': 'general', 'crawlData':function($){var title = $('.header .title').text();return {title:title}}},
"\/detail\/(.+)$":{'template': 'detail','crawlData':function($){var content = $('.content').text();return {content:content}}}
}

代码中会对符合 "^\/docs\/(News|news)\.asp" 或 "\/detail\/(.+)$" 正则规则的网页进行适配。其中的 template 和 crawlData 分别对应一个前端模板（已构建在 allmobilize 脚本中，这些模板实际就是一个全新的 html，有自己的 css, js 和 html ）和抓取数据的函数，例如新页面模板或数据配置等等, 其中 $ 的操作的 dom 模型上下文实际为原有的 pc 的 dom 模型，这样就做到了与 pc dom 的文字，数据同步

2.2 打开一个新文档

var currentPageConf = {template,crawlData}; //假设已匹配当前网页路由的配置
let newDocHtml = currentPageConf.getTemplate().render(currentPageConf.crawlData($))
// 打开一个要写入的文档
document.open('text/html','replace');
// 方法将一个文本字符串写入一个由 document.open() 打开的文档流（document stream）
document.write(newDocHtml);
// 用于结束由 对文档的 Document.write() 写入操作，这种写入操作一般由 Document.open() 打开。
document.close();

三、移动端数据内容实时同步

在第二步涉及的 crawlData 函数当中的 $ 操作,所涉及的 dom 模型上下文实际为原有的 pc 的 dom 模型, 在完成阻止原有网页渲染之后，allmobilize 脚本不仅会创建新视图，同时会提前缓存原有网页的整个 dom 节点，这样就可以通过抓取原有 dom 节点上的数据，完成新网页内数据内容的实时同步更新，最终做到例如电脑版的导航一定是和移动端新网页内容的导航一一对应的。

最后，我们可通过以下的时序图来了解 allmobilize 脚本的整个工作流程，如下图：

总结

这个方案在 2013 年的时候在市场内算一个非常不错的创新，对于一些历史悠久编码不规范包含大量 table布局的 html 网页虽然还是有大量的人工编码，但是最终企业完成网站移动化的实施成本远远降低了，当时联想中国的移动端商城在一周内就完成开发上线。

关于规模化

这项 allmobilize 技术在 2013 年最后是如何达到规模化的，有以下措施：

通过抓取和机器学习积累了不少网站适配的公共脚本和原则，自动生成网站的适配脚本
通过 Web IDE 和积木托拽式的工具快速完成模板文件的创建编码，以及数据提取脚本编码，降低编程门槛
与 CMS 厂商对接合作模板
开源了 HTML5 跨屏前端框架 AmazeUI
大范围进行人力外包, 进一步降低成本

最后感兴趣的同学可以在移动端调试模式下访问 http://www.gov.cn/ 这样的案例网站进行“一行代码适配网站的技术”探秘，希望这项技术对你有所启发。

一行代码实现网站移动化的原理与实现相关推荐

网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
python一行代码完成正态分布检验，附原理详解
在进行数据分析处理的过程中,经常需要判断数据是否符合正太分布,正常的正太分布检验费时费力,本文介绍如何通过python快速实现对正太分布的检验: 前方高能!!!看如何一行代码实现数据的正太分布检验 f ...
一行代码解决网站防挂IFRAME木马方案,小鸽子序列(灵儿)
最近公司和好朋友的网站纷纷被IFRAME了,有的挂上了鸽子,有的疯狂地弹窗,有的给人家增加流量.一个个文件去查找替换那些IFRAME代码,刚松口气,不久又加上去了,哎,什么世道!于是他们向我这个&qu ...
一行代码让网站整体变黑色
转载:https://mp.weixin.qq.com/s?__biz=MzAxOTcxNTIwNQ==&mid=2457918922&idx=1&sn=097bd80a667 ...
css - 一行代码让网站全部页面变成灰色（清明节等日期，很多网站变灰了，是如何实现的？）超级简单
介绍现在很多大厂产品,遇到清明节.南京大屠杀纪念日等节日,网站或软件就会变为灰色. 我们看到很多网站在哀悼时,都变成了灰色,像站酷,百度,B站等等. 实现方法加进去就好了,非常简单. html { ...
一行代码就可以“黑”掉任意网站
如何通过一行代码让网站主题变成暗黑主题呢? 实际上只需要一行代码,就可以轻松解决. 1.在任意网站中,打开浏览器开发者工具(F12),在Console控制台输入如下代码并回车: document.do ...
[zz]一行代码解决iframe挂马（服务器端注入、客户端ARP注入等）
一行代码解决iframe挂马(服务器端注入.客户端ARP注入等) 一行代码解决iframe挂马(包含服务器端注入.客户端ARP注入等) 本文原创:linr@cncert.net 请转载时保留版权信息 ...
一行代码“黑”掉任意网站
文章目录只需一行代码,轻轻一点就可以把任意网站变成暗黑模式. 首先我们先做一个实验,在任意网站中,打开浏览器开发者工具(F12),在 C1onsole 控制台输入如下代码并回车: document. ...
一行代码，揭开CPU执行原理！
计算机如何执行你写的代码? 知乎上有人提问:电脑怎样执行编程语言的? 很多刚刚入坑的小白可能对此完全没有概念,或者模模糊糊知道个大概,我们写下的一行行代码,计算机到底是如何在执行的呢? 我们以x86架 ...
十三种基于直方图的图像全局二值化算法原理、实现、代码及效果（转）
源:十三种基于直方图的图像全局二值化算法原理.实现.代码及效果.

一行代码实现网站移动化的原理与实现

前言