阅读时间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网页渲染

假如访问 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
大范围进行人力外包, 进一步降低成本

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

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

前言