搞懂jsBridge的运行机制

更新日期: 2021-09-06阅读: 1.8k标签: 机制

我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一下我司项目中的jsBridge源码,来从前端角度大概了解一下它是怎么实现的。

js调用方式

先来看一下,js是怎么来调用某个原生方法的,首先初始化的时候会调用window.WebViewJavascriptBridge.init方法:

window.WebViewJavascriptBridge.init()

然后如果要调用某个原生方法可以使用下面的函数

function native (funcName, args = {}, callbackFunc, errorCallbackFunc) {
    // 校验参数是否合法
    if (args && typeof args === 'object' && Object.prototype.toString.call(args).toLowerCase() === '[object object]' && !args.length) {
        args = JSON.stringify(args);
    } else {
        throw new Error('args不符合规范');
    }
    // 判断是否是手机环境
    if (getIsMobile()) {
        // 调用window.WebViewJavascriptBridge对象的callHandler方法
        window.WebViewJavascriptBridge.callHandler(
            funcName,
            args,
            (res) => {
                res = JSON.parse(res);
                if (res.code === 0) {
                    return callbackFunc(res);
                } else {
                    return errorCallbackFunc(res);
                }
            }
        );
    }
}

传入要调用的方法名、参数和回调即可,它先校验了一下参数,然后会调用window.WebViewJavascriptBridge.callHandler方法。

此外也可以提供回调供原生调用:

window.WebViewJavascriptBridge.registerHandler(funcName, callbackFunc);

接下来看一下window.WebViewJavascriptBridge对象到底是啥。

安卓

WebViewJavascriptBridge.js文件内是一个自执行函数,首先定义了一些变量:

// 定义变量
var messagingIframe;
var sendMessageQueue = [];// 发送消息的队列
var receiveMessageQueue = [];// 接收消息的队列
var messageHandlers = {};// 消息处理器

var CUSTOM_PROTOCOL_SCHEME = 'yy';// 自定义协议
var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';

var responseCallbacks = {};// 响应的回调
var uniqueId = 1;

根据变量名简单翻译了一下,具体用处接下来会分析。接下来定义了WebViewJavascriptBridge对象:

var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
    init: init,
    send: send,
    registerHandler: registerHandler,
    callHandler: callHandler,
    _fetchQueue: _fetchQueue,
    _handleMessageFromNative: _handleMessageFromNative
};

可以看到就是一个普通的对象,上面挂载了一些方法,具体方法暂时不看,继续往下:

var doc = document;
_createQueueReadyIframe(doc);

调用了_createQueueReadyIframe方法:

function _createQueueReadyIframe (doc) {
    messagingIframe = doc.createElement('iframe');
    messagingIframe.style.display = 'none';
    doc.documentElement.appendChild(messagingIframe);
}

这个方法很简单,就是创建了一个隐藏的iframe插入到页面,继续往下:

// 创建一个Events类型(基础事件模块)的事件(Event)对象
var readyEvent = doc.createEvent('Events');
// 定义事件名为WebViewJavascriptBridgeReady
readyEvent.initEvent('WebViewJavascriptBridgeReady');
// 通过document来触发该事件
doc.dispatchEvent(readyEvent);

这里定义了一个自定义事件,并直接派发了,其他地方可以像通过监听原生事件一样监听该事件:

document.addEventListener(
    'WebViewJavascriptBridgeReady',
    function () {
        console.log(window.WebViewJavascriptBridge)
    },
    false
);

这里的用处我理解就是当该jsBridge文件如果是在其他代码之后引入的话需要保证之前的代码能知道window.WebViewJavascriptBridge对象何时可用,如果规定该jsBridge必须要最先引入的话那么就不需要这个处理了。

到这里自执行函数就结束了,接下来看一下最开始的init方法:

function init (messageHandler) {
    if (WebViewJavascriptBridge._messageHandler) {
        throw new Error('WebViewJavascriptBridge.init called twice');
    }
    // init调用的时候没有传参,所以messageHandler=undefined
    WebViewJavascriptBridge._messageHandler = messageHandler;
    // 当前receiveMessageQueue也只是一个空数组
    var receivedMessages = receiveMessageQueue;
    receiveMessageQueue = null;
    for (var i = 0; i < receivedMessages.length; i++) {
        _dispatchMessageFromNative(receivedMessages[i]);
    }
}

从初始化的角度来看,这个init方法似乎啥也没做。接下来我们来看callHandler方法,看看是如何调用安卓的方法的:

function callHandler (handlerName, data, responseCallback) {
    _doSend({
        handlerName: handlerName,
        data: data
    }, responseCallback);
}

处理了一下参数又调用了_doSend方法:

function _doSend (message, responseCallback) {
    // 如果提供了回调的话
    if (responseCallback) {
        // 生成一个唯一的回调id
        var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
        // 回调通过id存储到responseCallbacks对象上
        responseCallbacks[callbackId] = responseCallback;
        // 把该回调id添加到要发送给native的消息里
        message.callbackId = callbackId;
    }
    // 消息添加到消息队列里
    sendMessageQueue.push(message);
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

这个方法首先把调用原生方法时的回调函数通过生成一个唯一的id保存到最开始定义的responseCallbacks对象里,然后把该id添加到要发送的信息上,所以一个message的结构是这样的:

{
    handlerName,
    data,
    callbackId
}

接着把该message添加到最开始定义的sendMessageQueue数组里,最后设置了iframe的src属性:yy://__QUEUE_MESSAGE__/,这其实就是一个自定义协议的url,我简单搜索了一下,native会拦截这个url来做相应的处理,到这里我们就走不下去了,因为不知道原生做了什么事情,简单搜索了一下,发现了这个库:WebViewJavascriptBridge,我司应该是在这个库基础上修改的,结合了网上的一些文章后大概知道了,原生拦截到这个url后会调用js的window.WebViewJavascriptBridge._fetchQueue方法:

function _fetchQueue () {
    // 把我们要发送的消息队列转成字符串
    var messageQueueString = JSON.stringify(sendMessageQueue);
    // 清空消息队列
    sendMessageQueue = [];
    // 安卓无法直接读取返回的数据,因此还是通过iframe的src和java通信
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}

安卓拦截到url后,知道js给安卓发送消息了,所以主动调用js的_fetchQueue方法,取出之前添加到队列里的消息,因为无法直接读取js方法返回的数据,所以把格式化后的消息添加到url上,再次通过iframe来发送,此时原生又会拦截到yy://return/_fetchQueue/这个url,那么取出后面的消息,解析出要其中要执行的原生方法名和参数后执行对应的原生方法,当原生方法执行完后又会主动调用js的window.WebViewJavascriptBridge._handleMessageFromNative方法:

function _handleMessageFromNative (messageJSON) {
    // 根据之前的init方法的逻辑我们知道receiveMessageQueue是会被设置为null的,所以会走else分支
    if (receiveMessageQueue) {
        receiveMessageQueue.push(messageJSON);
    } else {
        _dispatchMessageFromNative(messageJSON);
    }
}

看一下_dispatchMessageFromNative方法做了什么:

function _dispatchMessageFromNative (messageJSON) {
    setTimeout(function () {
        // 原生发回的消息是字符串类型的,转成json
        var message = JSON.parse(messageJSON);
        var responseCallback;
        // java调用完成,发回的responseId就是我们之前发送给它的callbackId
        if (message.responseId) {
            // 从responseCallbacks对象里取出该id关联的回调方法
            responseCallback = responseCallbacks[message.responseId];
            if (!responseCallback) {
                return;
            }
            // 执行回调,js调用安卓方法后到这里顺利收到消息
            responseCallback(message.responseData);
            delete responseCallbacks[message.responseId];
        } else {
            // ...
        }
    });
}

messageJSON就是原生发回的消息,里面除了执行完原生方法后返回的相关信息外,还带着之前我们传给它的callbackId,所以我们可以通过这个id来在responseCallbacks里找到关联的回调并执行,本次js调用原生方法流程结束。但是,明显函数里还有不存在id时的分支,这里是用来干啥的呢,我们前面介绍的都是js调用原生方法,但是显然,原生也可以直接给js发消息,比如常见的拦截返回键功能,当原生监听到返回键事件后它会主动发送信息告诉前端页面,页面就可以执行对应的逻辑,这个else分支就是用来处理这种情况:

function _dispatchMessageFromNative (messageJSON) {
    setTimeout(function () {
        if (message.responseId) {
            // ...
        } else {
            // 和我们传给原生的消息可以带id一样,原生传给我们的消息也可以带一个id,同时原生内部也会通过这个id关联一个回调
            if (message.callbackId) {
                var callbackResponseId = message.callbackId;
                //如果前端需要再给原生回消息的话那么就带上原生之前传来的id,这样原生就可以通过id找到对应的回调并执行
                responseCallback = function (responseData) {
                    _doSend({
                        responseId: callbackResponseId,
                        responseData: responseData
                    });
                };
            }
            // 我们并没有设置默认的_messageHandler,所以是undefined
            var handler = WebViewJavascriptBridge._messageHandler;
            // 原生发送的消息里面有处理方法名称
            if (message.handlerName) {
                // 通过方法名称去messageHandlers对象里查找是否有对应的处理方法
                handler = messageHandlers[message.handlerName];
            }
            try {
                // 执行处理方法
                handler(message.data, responseCallback);
            } catch (exception) {
                if (typeof console !== 'undefined') {
                    console.log('WebViewJavascriptBridge: WARNING: javascript handler threw.', message, exception);
                }
            }
        }
    });
}

比如我们要监听原生的返回键事件,我们先通过window.WebViewJavascriptBridge对象的方法注册一下:

window.WebViewJavascriptBridge.registerHandler('onBackPressed', () => {
    // 做点什么...
})

registerHandler方法如下:

function registerHandler (handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

很简单,把我们要监听的事件名和方法都存储到messageHandlers对象上,然后如果原生监听到返回键事件后会发送如下结构的消息:

{
    handlerName: 'onBackPressed'
}

这样就可以通过handlerName找到我们注册的函数进行执行了。

到此,安卓环境的js和原生互相调用的逻辑就结束了,总结一下就是:

1.js调用原生

生成一个唯一的id,把回调和id保存起来,然后将要发送的信息(带上本次生成的唯一id)添加到一个队列里,之后通过iframe发送一个自定义协议的请求,原生拦截到后调用js的window.WebViewJavascriptBridge对象的一个方法来获取队列的信息,解析出请求和参数后执行对应的原生方法,然后再把响应(带上前端传来的id)通过调用js的window.WebViewJavascriptBridge的指定方法传递给前端,前端再通过id找到之前存储的回调,进行执行。

2.原生调用js

首先前端需要事先注册要监听的事件,把事件名和回调保存起来,然后原生在某个时刻会调用js的window.WebViewJavascriptBridge对象的指定方法,前端根据返回参数的事件名找到注册的回调进行执行,同时原生也会传过来一个id,如果前端执行完相应逻辑后还要给原生回消息,那么要把该id带回去,原生根据该id来找到对应的回调进行执行。

可以看到,js和原生两边的逻辑都是一致的。

ios

ios和安卓基本是一致的,部分细节上有点区别,首先是协议不一样,ios的是这样的:

var CUSTOM_PROTOCOL_SCHEME_IOS = 'https';
var QUEUE_HAS_MESSAGE_IOS = '__wvjb_queue_message__';

然后ios初始化创建iframe的时候会发送一个请求:

var BRIDGE_LOADED_IOS = '__bridge_loaded__';
function _createQueueReadyIframe (doc) {
    messagingIframe = doc.createElement('iframe');
    messagingIframe.style.display = 'none';
    if (isIphone()) {
        // 这里应该是ios需要先加载一下bridge
        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME_IOS + '://' + BRIDGE_LOADED_IOS;
    }
    doc.documentElement.appendChild(messagingIframe);
}

再然后是ios获取我们的消息队列时不需要通过iframe,它能直接获取执行js函数返回的数据:

function _fetchQueue () {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    return messageQueueString;// 直接返回,不需要通过iframe
}

其他部分都是一样的。

总结

本文分析了一下jsBridge的源码,可以发现其实是个很简单的东西,但是平时可能就没有去认真了解过它,总想做一些”大“的事情,以至于沦为了一个”好高骛远“的人,希望各位不要像笔者一样。

链接: https://fly63.com/article/detial/10659

浅析前端页面渲染机制

作为一个前端开发,最常见的运行环境应该是浏览器吧,为了更好的通过浏览器把优秀的产品带给用户,也为了更好的发展自己的前端职业之路,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的

这一次,彻底弄懂 JavaScript 执行机制

javascript是一门单线程语言,Event Loop是javascript的执行机制.牢牢把握两个基本点,以认真学习javascript为中心,早日实现成为前端高手的伟大梦想!

创建js hook钩子_js中的钩子机制与实现

钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子;这样做的好处就是提高了程序的执行效率,减少了if else 的使用同事优化代码结构

小程序的更新机制_如何实现强制更新?

在讲小程序的更新机制之前,我们需要先了解小程序的2种启动模式,分别为:冷启动和热启动。小程序不同的启动方式,对应的更新情况不不一样的。无论冷启动,还是热启动。小程序都不会马上更新的,如果我们需要强制更新,需要如何实现呢?

基于JWT的Token认证机制实现及安全问题

JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成:一个JWT实际上就是一个字符串,它由三部分组成,头部、载荷与签名。

web前端-JavaScript的运行机制

本文介绍JavaScript运行机制,JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。

轮询机制解决后端任务回调问题

现在有一个需求,前端有一个按钮,点击以后会调用后端一个接口,这个接口会根据用户的筛选条件去hadoop上跑任务,将图片的base64转为img然后打包成zip,生成一个下载连接返回给前端,弹出下载框。hadoop上的这个任务耗时比较久

JavaScript预解释是一种毫无节操的机制

js代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义:1.理解声明和定义、2.对于带var和function关键字的在预解释的时候操作不一样的、3.预解释只发生在当前的作用域下

js对代码解析机制

脚本执行js引擎都做了什么呢?1.语法分析 2.预编译 3.解释执行。在执行代码前,还有两个步骤;语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误 ,查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

web认证机制

以前对认证这方面的认识一直不太深刻,不清楚为什么需要token这种认证,为什么不简单使用session存储用户登录信息等。最近读了几篇大牛的博客才对认证机制方面有了进一步了解。

点击更多...

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