閱讀時間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/ 這樣的案例網站進行“一行代碼適配網站的技術”探秘，希望這項技術對你有所啟發，