JsBridgeAdapter
web
端 bridge
适配器,适用于对接任意 native
端 bridge
方案
基于动态函数制作
目的
市面上的 jsBridge
方案大多为 native
端方案,缺乏 web
端对接 native
的方案
此处基于对 jsBridge
调用、注册要求的理解,制作了此适配器
适用于对接任意 native
端 bridge
方案,并具有以下特点
示例
假设 native
提供的 bridge
调用方式与 native
侧执行方式为以下等价代码
windowAndroidBridge = { }
使用适配器的对接代码如下
const bridge = 'android' // 模拟 native 环境下 bridge 延时就绪的情况let isReady = false // 此处配置 bridge 对象如何对接 native 端,主要为以下两点// 1、如何做支持检测// 2、如何执行bridge bridge // bridge 未就绪时bridge // falsebridge // 调用无反应 // bridge 就绪后isReady = truebridge // truebridge // log 'login success'
定制交互的执行方式
假设 native
提供的交互如下,由于某种原因,我们期望在 调用前对参数进行处理,或者参数位置对调 等
使用 customize
来定制 bridge
交互以完成上述需求
windowAndroidBridge = { console }
... bridge bridge // log '1, 2'bridge // log '2, 3'bridge // log '2, 1'bridge // log '3, 5' 由下到上执行,所以并不是 '4, 6'
自定义交互
Api
是一个简易优化过后的动态函数,它具有比动态函数更直观的参数名称和声明方式如 isSupported
和 runner
配置项
注意:使用 Api
生成的自定义交互不受 bridge.config.support
的影响
基本使用方式如下
...... const test = a + b test // true // 3 bridge bridge // truebridge // 3
自定义交互也可以设置 isSupported
支持检测器
......let isReady = false const test = isReady a + b bridge test // false // 无反应bridge // falsebridge // 无反应 isReady = truetest // true // 3bridge // truebridge // 3
如果配置时只提供了 isSupported
,而 runner
为非函数,那么 isSupported
执行结果依然会为 false
...const test = truebridgetest // falsebridge // false
调整 Api 的默认配置
...// 假设 bridge 尚未就绪 let isReady = false Apidefault isReadyApidefault console const test = test // false isReady = true // warn '你可能忘了提供执行体'
Api
的动态函数模式
Api
的动态函数模式使用 getRunner
配置以启用动态函数模式
注意:当使用动态函数模式时,isSupported
和 runner
将不生效
...let isReady = false const test = { if !isReady return null return a + b } test // false // 没反应 isReady = truetest // true // 3
交互的版本控制
以下使用 compare-versions 来做演示
首先,我们仅控制接口的支持性,不改变接口的行为
...... // 此处假设原生版本号let version = '1.0.1' // 该交互仅在版本 1.2.0 及其以上生效const test = > -1 runner: bridge test // falseversion = '1.2.1'test // true
接下来,在了解了动态函数、以及 Api
的动态函数模式后,我们可以实现完全的版本控制
windowAndroidBridge = { console }
...let version = '1.0.1'let isReady = false bridge bridge // false,因为 bridge 未就绪 isReady = truebridge // false 因为版本号条件未满足 version = '1.2.0'bridge // truebridge // log '1 2' version = '1.2.6'bridge // log '2 1 version = '1.3.3'bridge // false 因为版本号条件未满足
异步检测
当 bridge.config.support
为异步函数时,bridge.support/call
方法均为异步
... const delay = const TestBridge = { return 'Test Log' } const bridge = bridge const test = bridge bridge await bridge // log 'true' after 1000msawait test // log 'true' after 1000ms await bridge // log 'Test Log' after 1000msawait // log 'Test Log' after 1000ms
同时,Api
与 DynamicFunction
函数享有类似的异步功能
... const delay = const test = getRunner: async { await return a + b } await test // log 'true' after 1000msawait // log '3' after 1000ms
其他功能
bridge.has(apiName)
检测 bridge
中交互是否已注册
...bridgebridge // truebridge // false...
bridge.get(apiName)
获取 bridge
中已注册交互的执行体
...bridge const test = bridge test // true // 3
uniqueId([prefix = ''])
生成一个随机的、唯一的 id 值
生成规则如下
let uuid = 0 const uniqueId = `___`
globalize(localFunc[, config])
将局部函数转为全局函数,执行后得到生成的全局函数名,默认全局函数名通过 uniqueId()
生成
let a + b // 转换为全局函数后默认执行后不会自动销毁let globalFuncName = windowglobalFuncName1 2 // 3globalFuncName in window // true // 自定义转为全局函数后的函数名let customizedGlobalFuncName = customizedGlobalFuncName === 'test' // truewindow // 3 // 声明全局函数仅执行一次后自动销毁let globalFuncName2 = windowglobalFuncName21 2 // 3globalFuncName2 in window // false