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

阅读时间10分钟

前言

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

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

 

一些案例

 

Allmobilize 方案特点

一行代码，快速部署

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

 

调整后

style 增加 media="x-media"

原始

调整后

 

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/ 这样的案例网站进行“一行代码适配网站的技术”探秘，希望这项技术对你有所启发。