跨容器Hybrid離線組件方案

　　關鍵詞：跨容器、Hybrid、離線

　　摘要：今天主要討論的是離線組件跨容器方案，想了解在線頁面如何跨webview容器，能夠看 http://www.cnblogs.com/yexiaochai/p/5204847.html 這篇文章。

　　若是你還不瞭解離線和在線有什麼區別，請自行查閱其餘文檔。我這裏只會簡單的介紹一下從代碼層面，而不是離線和在在線的各自優點和區別。先請看圖：

左邊是 online page , 特色是頁面在服務端。每一個容器裏執行的是同一份代碼；而且代碼只有在運行時才知道本身在哪一個容器中運行。

右邊是 offline page , 特色是每一個容器都有一份代碼在本地，代碼是獨立的，互不干擾。在編譯器就能夠知道將要在哪一個容器運行。

不一樣的特色意味着徹底不一樣的思路和方案。

 

思路： 既然編譯期便知道本身未來運行在哪一個容器，那天然是須要在編譯器作點文章。首先，對於不一樣的容器，waimai也好，nuomi也罷，又或者，手百，攜程等，不一樣容器下的H5頁面哪些是相同的，哪些又是不同的。

咱們知道，同一份業務來說，90%都是同樣的，主要很小一部分定製功能，以及每一個容器的jsbridge提供的接口是不同的。

因而，咱們將大部分相同的業務抽離出來。加入了adapter層。

adapter 對業務經過統一的端能力接口，而針對不一樣的容器具備不一樣的實現。這樣每次新增一個容器的成本便只須要針對容器，從新實現一遍adapter即可快速遷移。

fis3 release waimai :  adapter/waimai + bussiness   =>  waimai bussiness .

其餘組件類推。

 

代碼路徑：https://github.com/liaobin312716/cross-platform-h5-page

目前代碼還不是很完善，而且主要是外賣和糯米組件爲主，後續會考慮更多的組件接入。