原生App与javascript交互之JSBridge接口原理、设计与实现

前期调研

调研对象：
支付宝，微信，云之家

调研文档：
Android中JS与Java的极简交互库 SimpleJavaJsBridge

设计需求

1. 阅读类型的业务功能页面需要由前端H5实现，需要做到服务端可控；

2. 页面界面更改减少重新发布新版本的频率；

3. 功能页面部分原型需求无法实现，需要原生功能支持；

4. 对未来业务功能的拓展，方便迭代；

作用和意义

1. 定制化JSBridge实际上是拓展NativeApp的hybrid程度, 参照微信和支付宝，可打造APP强力的生态圈；

2. jsBridge在支付，钱包，媒体拓展，图片处理，活动页面，用户地理位置网络状态都能得到原生强有力支持；

3. 对于阅读性页面有更多拓展；

优秀的通信设计方案

1. 前端和Native对对方的细节知道的越少越好，减少耦合度，暴露的接口尽量控制在5个以内;

2. js与Native之间的通信，最好定义一套通信协议或者规则，减少js代码为兼容不同系统而过多if;

3. 主动发送消息给对方时，对方尽量对该消息进行反馈，即使无需求对某些功能做反馈，减少if判断的兼容代码;

实现方式(交互形式)

Native 调用 JS

使用前端暴露在window下的一个方法或者一个对象的方法;
_handlerFromApp(message)
JSBridge._handlerFromApp(message)

方法名: handlerFromApp
参数:

message: {
  cbId  : "cb_(:id)_(:timeStamp)",      //回调函数的id
  status: 0,                            //状态数据 (0:失败, 1:成功)
  msg   : "ok",                         //反馈的消息
  data  : {
    //...                               //一些处理后的数据
  } 
}

以下提供的部分参考方法
未对其进行真实测试，因为我使用的是iframe的方法，但原理几乎相同
建议封装后提供给Native开发工程师放入对应的APP包中，在webView读取页面的时候用对应的Native语言注入页面，避免页面在前端导入被抓取;

var doc = JSBridge || window;
var uniqueId = 1;
var invokeCBMap = {};
var listenCBMap = {};

//
fu