利用Proxy，如何优雅实现JSBridge模块化封装

时间 2020-02-07

标签利用 proxy 如何优雅实现 jsbridge 模块化封装栏目软件设计繁體版

原文原文链接

背景

关于JSBridge的一些基础知识，在网络上有不少文章能够参考：java

最近公司在作一个项目，经过把咱们本身的Webview植入第三方APP，而后咱们的业务所有经过H5实现。至于为何不直接用第三方APP WebView,主要是身处金融行业，须要作一些风控相关功能。 ios

因为是Hybrid APP的性质，因此web与Native的通讯是没法避免的；而为何我要封装JSBridge，主要在于下面两点：git

公司APP的JSBridge提供了数据的序列化和全局函数的注入，而咱们此次因为包大小考虑，这一块须要H5本身来实现；
原生提供的接口协议太多，记住麻烦；
回调的写法不太人性化，指望Promise;

因为本次项目只涉及到Andriod，因此没有关于ios的处理，但我自认为他们只是协议的不一样，Web的处理能够相同。github

原理浅谈

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

Webview加载时会将原生提供的JSBridge方法注入到window对象上，好比：window.JSBridge.getDeviceInfo就是原生提供的能够读取一些设备标识信息的接口；
H5经过window调用原生接口，基本都须要传参，好比此次处理成功或则处理失败的结果回调的，还有一些参数设置，拿上面给的方法来举例：编程
```
window.JSBridge.getDeviceInfo({
  token: '*&^%$$#*',
  onOk(data) {
    save(data);
  }，
  onError(error) {
    console.log(error.message);
  }
});
```
原生响应H5的调用成功或失败后，就执行H5传递过来的回调函数；
过程结束；

看上面的通讯过程，貌似很简单。但这里面存在一些协议的问题：segmentfault

首先H5与原生端的通讯消息，是只支持字符串的，若是要传JS对象，那就先序列化；
序列化带来的后果又是，对象中的函数就没法传递；
而就算函数传过去了，也是存在问题的，因为安全的限制，webview和js的执行没有在一个容器中，回调这种局部函数是找不到的，因此是须要将回调函数注册到全局；

因此下面就来解决这些问题数组

一步一步的具体实现

接口协议封装

什么意思喃？看下面的图： promise

因为APP端协议及分包问题, 存在多个Bridge, 好比MBDevice、MBControl、MBFinance，上面列出来的只是一小部分，对于web来讲记忆这些接口是一件很费事的事；还有就是之前我调APP的JSBridge, 总有下面这样的代码：安全

window.JSBridge && window.JSBridge.getDeviceInfo && window.JSBridge.getDeviceInfo({ ... })

至于上面，因此加了一层封装，实现的核心就是Proxy和Map，具体实现看下面的伪代码：

const MBSDK = {
};

// sdk 提供的方法白名单
const whiteList = new Map([
  ['setMaxTime', 'MBVideo'],
  ['getDeviceInfo', 'MBDevice.getInfo'],
  ['close', 'MBControl'],
  ['getFinaceInfo', 'MBFinance.getInfo'],
]);

const handler = {
  get(target, key) {
    if (!whiteList.has(key)) {
      throw new Error('方法不存在');
    }
    const parentKey = whiteList.get(key);
    function callback() {
      return [...parentKey.split('.'), key];
    }
    return new Proxy(callback, applyHandler); // funcHandler后面再展开
  },
};
export default new Proxy(MBSDK, handler);

基于上面的封装，调用时，代码就是下面这样

sdk.setMaxTime({
      maxTime: 10,
    }).then(() => {
      console.log('设置成功');
    }, () => {
      window.alert('调用失败');
    });

序列化与回调注册

上面已经列了为何须要回调函数全局注册和序列化，这里主要说一下实现原理，总得来讲分两步;

回调函数剥离，全局注册；
参数序列化；

回调函数剥离和参数序列化

其实很好实现，直接展开运算符搞定：

const { onOk, onError, ...others } = params; // 回调函数剥离
  const str = JSON.stringify(others); // 参数序列化

函数全局注册

看了不少文章的一些实现，思路基本一致，好比下面这样

window.bridgeCallbacks = {};
const callBacks = window.bridgeCallbacks;
const { onOk, onError, ...others } = params; // 回调函数剥离

const callbackId = generateId(); // 产生一个惟一的随机数Id

callBacks[`success_${callbackId}`] = onOk;
callBacks[`onError${callbackId}`] = onError;

others.success = `window.bridgeCallbacks.success_${callbackId}`
// ....
// 调用jdk代码

这是一种很容易想到的问题，但却存在一些问题，好比：

bridgeCallbacks全局会注册不少属性，由于Native调用并无清理，而onOk这种不少时候是一个闭包，因为有引用，最后致使的问题就是内存泄露；
就算处理了第一步的问题，webview无响应怎么办，那回调就会被一直挂起，确少超时响应逻辑
callbackId的惟一性很差保证;

基于以上考虑，我换了一个方案，采用回调队列，由于APP端说过，回调是按顺序的，不会插队；

class CallHeap {
  constructor() {
    this.okQueue = [];
    this.errorQueue = [];
  }
  success = (args) => {
    // 成对弹出回调：成功时，不止要处理成功的回调，失败的也要同时弹出，
    const target = this.okQueue.shift();
    this.errorQueue.shift();
    target && target(args);
  }
  error = (args) => {
    const target = this.errorQueue.shift();
    this.okQueue.shift();
    target && target(args);
  }
  addQueue(onOk = Null, onError = Null) {
    this.okQueue.push(onOk);
    this.errorQueue.push(onError);
  }
}

window.bridgeCallbacks = {};
const callBacks = window.bridgeCallbacks;

function applyhandler() {
  const { onOk, onError, ...others } = params; // 回调函数剥离
  if (onOk || onError) {
      const callKey = transferKey || key; // transferKey || key后面会提到
      // 若是全局未注册，则先注册对应的调用域
      if (!callbacks[callKey]) {
        callbacks[callKey] = new CallHeap();
      }
      // 添加回调
      callbacks[callKey].addQueue(onOk, onError);

      others.success = `callBacks.${callKey}.success`;
      others.error = `callBacks.${callKey}.error`;
    }
    // 调用jdk代码
}

基于以上的实现，就能够保证发起多个Native请求，并保证有序回调；若是成功，成功回调被响应时，响应的失败回调也会被弹出，由于回调函数式存在数组中的，因此执行完后，引用就不会再存在。

完整实现

看了上面的代码实现，但核心好像尚未说起，那就是调用参数的拦截。前面咱们用Proxy的get优雅的实现了SDK方法的拦截，这里会接着采用Proxy的apply方法来拦截方法调用的传参，直接看代码吧：

// 结合最上面接口协议封装的代码一块儿看
const applyHandler = {
  apply(target, object, args) {
    // transferKey 用于getFinaceInfo与getDeviceInfo这种数据命名重复的
    const [parentKey, key, transferKey] = target();
    console.log('res', parentKey, key);
    const func = (SDK[parentKey] || {})[key];

    const { onOk, onError, ...params } = args[0] || {};

    if (onOk || onError) {
      const callKey = transferKey || key;
      if (!callbacks[callKey]) {
        callbacks[callKey] = new CallHeap();
      }
      callbacks[callKey].addQueue(onOk, onError);

      others.success = `callBacks.${callKey}.success`;
      others.error = `callBacks.${callKey}.error`;
    }

    return func && (window[parentKey][key])(JSON.stringify(params));;
  }
};

Promise 封装

前面吹过的牛逼还有两个没实现，好比：

promise支持
超时调用

首先来复习一下，怎么封装一个支持Promise的setTimeout函数：

function promiseTimeOut(time) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

promiseTimeOut(1000).then(() => {
  console.log('time is ready');
})

若是对上面这个封装不陌生，那基于回调函数的Promise化就变得简单了

talk is cheap, show me your code

完整实现：

const MBSDK = {
};

// sdk 提供的方法白名单
const whiteList = new Map([
  ['setMaxTime', 'MBVideo'],
  ['getDeviceInfo', 'MBDevice.getInfo'],
  ['close', 'MBControl'],
  ['getFinaceInfo', 'MBFinance.getInfo'],
]);

const applyHandler = {
  apply(target, object, args) {
    // transferKey 用于getFinaceInfo与getDeviceInfo这种数据命名重复的
    const [parentKey, key, transferKey] = target();
    // FYX 编程
    const func = (window[parentKey] || {})[key];
    // 设置一个默认的超时参数，支持配置
    const { timeout = 5000, ...params } = args[0] || {};

    return new Promise((resolve, reject) => {
      const callKey = transferKey || key;
      if (!callbacks[callKey]) {
        callbacks[callKey] = new CallHeap();
      }
      const timeoutId = setTimeout(() => {
        // 超时，主动发起错误回调
        window.callBacks[callKey].error({ message: '请求超时' });
      }, timeout);
      callbacks[callKey].addQueue((data) => {
        clearTimeout(timeoutId);
        resolve(data);
      }, (data) => {
        clearTimeout(timeoutId);
        reject(data);
      });
      params.success = `callBacks.${callKey}.success`;
      params.error = `callBacks.${callKey}.error`;
      func && (window[parentKey][key])(JSON.stringify(params));
    }).catch((error) => {
      console.log('error:', error.message);
    });
  }
};

const handler = {
  get(target, key) {
    if (!whiteList.has(key)) {
      throw new Error('方法不存在');
    }
    const parentKey = whiteList.get(key);
    function callback() {
      return [...parentKey.split('.'), key];
    }
    return new Proxy(callback, applyHandler); // funcHandler后面再展开
  },
};

export default new Proxy(MBSDK, handler);

而调用时，基本上，就能够这样玩了：

sdk.setMaxTime({
      maxTime: 10,
    }).then(() => {
      console.log('设置成功');
    }, () => {
      window.alert('调用失败');
    });

解惑

- func.call(null, JSON.stringify(params))  // 之前的
+ func && (window[parentKey][key])(JSON.stringify(params)); // 如今的

开始函数的调用是采用func.call来实现的，当时我本地mock过，没有问题。但在webview中就弹出了下面这样一个错误：

java bridge method can't be invoked on a non-injected object

通过各类goggle，百度，查到的都是一条关于Andriod的注入漏洞。而至于我这里经过JS的方式把bridge指向的函数地址，赋值给一个变量名，而后再经过变量名来调用就会报上面这个错误，我我的的猜想有两个：一是协议这样规定的；二是this指向问题。

若是有知道为何的大佬，还请不吝赐教，谢谢。

经过这一次的封装，本身对Proxy的应用更加熟练了，将所学的知识运用到工做中，不得不说是一件很是愉快的事情。这也是本身第二篇关于ES6深刻理解的文章；
第一篇：从新认识ES6中的Set

原文见：issue , 若有不严谨之处，还请及时指正。