通过Proxy如何实现JSBridge模块化封装-创新互联

今天就跟大家聊聊有关通过Proxy如何实现JSBridge模块化封装，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

由于是Hybrid APP的性质，所以web与Native的通信是无法避免的；而为什么我要封装jsBridge，主要在于下面两点：

公司APP的JSBridge提供了数据的序列化和全局函数的注入，而我们这次由于包大小考虑，这一块需要H5自己来实现；

原生提供的接口协议太多，记住麻烦；

回调的写法不太人性化，期望Promise;

由于本次项目只涉及到Andriod，所以没有关于ios的处理，但我自认为他们只是协议的不同，Web的处理可以相同。

原理浅谈

看上图的通信实现（图片来源于文章开头的文章），简单说一下通信过程；

Webview加载时会将原生提供的JSBridge方法注入到window对象上，比如：window.JSBridge.getDeviceInfo就是原生提供的可以读取一些设备标识信息的接口；

H5通过window调用原生接口，基本都需要传参，比如这次处理成功或则处理失败的结果回调的，还有一些参数设置，拿上面给的方法来举例：

window.JSBridge.getDeviceInfo({
 token: '*&^%$$#*',
 onOk(data) {
  save(data);
 }，
 onError(error) {
  console.log(error.message);
 }
});