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

时间: 2020-02-06阅读: 96标签: 模块

背景

关于JSBridge的一些基础知识,在网络上有很多文章可以参考:

最近公司在做一个项目,通过把我们自己的Webview植入第三方APP,然后我们的业务全部通过H5实现。至于为什么不直接用第三方APP WebView,主要是身处金融行业,需要做一些风控相关功能。

由于是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);
  }
});

原生响应H5的调用成功或失败后,就执行H5传递过来的回调函数;

过程结束;

看上面的通信过程,貌似很简单。但这里面存在一些协议的问题:

首先H5与原生端的通信消息,是只支持字符串的,如果要传JS对象,那就先序列化;

序列化带来的后果又是,对象中的函数就无法传递;

而就算函数传过去了,也是存在问题的,由于安全的限制,webview和js的执行没有在一个容器中,回调这种局部函数是找不到的,所以是需要将回调函数注册到全局;

所以下面就来解决这些问题


一步一步的具体实现

接口协议封装

什么意思喃?看下面的图:


由于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 , 如有不严谨之处,还请及时指正。

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7428

Nodejs数据加密与crypto模块

nodejs 中的 crypto 模块提供了各种各样加密算法的 API。这篇文章记录了常用加密算法的种类、特点、用途和代码实现。其中涉及算法较多,应用面较广,每类算法都有自己适用的场景。为了使行文流畅,列出了本文记录的几类常用算法

NodeJS模块os

nodejs 提供了os.platform()和os.type(),可以用来识别操作系统平台。推荐使用: os.platform();平均负载是指:单位时间内,系统处于可运行状态和不可中断状态的平均进程数。

NodeJS模块Buffer

Buffer 作为 nodejs 中重要的概念和功能,为开发者提供了操作二进制的能力。本文记录了几个问题,来加深对 Buffer 的理解和使用:

Nodejs模块之events

读了 events 模块的文档,研究了几个有意思的问题:事件驱动模型,优雅的错误处理,监听器器队列顺序处理,内存管理与防止泄漏

无编译/无服务器,实现浏览器的 CommonJS 模块化

平时经常会逛 Github,除了一些 star 极高的大项目外,还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣,或是有不错的技术点,读起来都让人有所收获

Node.js 模块系统源码探微

Node.js 的出现使得前端工程师可以跨端工作在服务器上,当然,一个新的运行环境的诞生亦会带来新的模块、功能、抑或是思想上的革新,本文将带领读者领略 Node.js (以下简称 Node) 的模块设计思想以及剖析部分核心源码实现。

css模块的解决办法 演进

CSS预处理器最大的好处就是可以支持模块引入,用js的方式来编写CSS,编译之后,终究还是一个文件,因此不可避免的会出现冲突样式;BEM就是为了解决命名冲突以及更好的语义化而生的

NodeJS模块os - 与操作系统“打交道”

nodejs 提供了os.platform()和os.type(),可以用来识别操作系统平台。推荐使用: os.platform(),平均负载是指:单位时间内,系统处于可运行状态和不可中断状态的平均进程数。它和 cpu 使用率没有直接关系。

nodejs内置模块有哪些?

nodejs内置模块指的是除默认提供的语法之外,提供的美容,无需下载,直接引入,引入只写名称即可。

node.js模块的安装分哪两种方式?

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全