跨容器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

目前代码还不是很完善，而且主要是外卖和糯米组件为主，后续会考虑更多的组件接入。