JsBridge 源码分析

来源：互联网发布：windows程序设计教材编辑：程序博客网时间：2024/06/07 03:02

原文可参考我的简书： http://www.jianshu.com/p/fce3e2f9cabc

源码：
https://github.com/lzyzsd/JsBridge

1 背景

近年来混合框架很火，一些大型的公司如BAT的移动客户端app几乎都采用了混合架构。这样实现有什么好处呢？首先就必须了解采用webview开发和采用原生开发的客户端的优缺点。这里我仅列举个人的观点：

1.1 使用webview:

优点：便于敏捷开发、便于维护和可以热修复和定制
缺点：UI没原生的美观

1.2 使用原生开发：

优点：当然是可以方便使用原生UI
缺点：无法热修复等

貌似很多公司都采用类似的原理实现，本文选了个相近的JsBridge来分析下混合框架下app开发的架构。

2 准备工作（可以忽略）

2.1 传送的消息结构见Message类：

private String callbackId; //callbackIdprivate String responseId; //responseIdprivate String responseData; //responseDataprivate String data; //data of messageprivate String handlerName; //name of handler

2.2 工具类：BridgeUtil

几个函数命名上可以大致猜出，函数功能，作如下注释。具体想了解细节请看源代码。

public static String parseFunctionName(String jsUrl){  //jsUrl中解析函数名}public static String getDataFromReturnUrl(String url) {//return数据中获取data}public static String getFunctionFromReturnUrl(String url) {}/** * js 文件将注入为第一个script引用 * @param view * @param url */public static void webViewLoadJs(WebView view, String url){//从url中加载js}public static void webViewLoadLocalJs(WebView view, String path){//加载本地path路径的js}public static String assetFile2Str(Context c, String urlStr){}

3寻找入口

3.1 入口处

当我们阅读源码时，不知道从何入手时，要先想到寻找入口。（由于本文的源码不多，如果直接阅读的也行。）源码文件较多时，我们该如何入手呢？首先我们需要查找怎么使用（调用处就是一个很好的入口），然后层层抽丝剥茧。看源代码demo部分：

        webView.setDefaultHandler(new DefaultHandler());        webView.registerHandler("submitFromWeb", new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                Log.i(TAG, "handler = submitFromWeb, data from web = " + data);                function.onCallBack("submitFromWeb exe, response data 中文 from Java");            }        });        webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {            @Override            public void onCallBack(String data) {            }        });        webView.send("hello");    }    @Override    public void onClick(View v) {        if (button.equals(v)) {            webView.callHandler("functionInJs", "data from Java", new CallBackFunction() {                @Override                public void onCallBack(String data) {                    // TODO Auto-generated method stub                    Log.i(TAG, "reponse data from js " + data);                }            });        }    }

3.2 初始化部分

webView.setDefaultHandler(new DefaultHandler());一句设置了一个DefaultHandler。

4 客户端调用JavaSript（android 端例子）

原理：是使用本身webview.loadUrl("javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');" );调用时序图如下图：

Paste_Image.png

发觉按这个图，阅读基本上就了解了android 端调用JavaSript的流程。这里补充说一下js 的_dispatchMessageFromNative()函数中调用的handler的名字“functionInJs”是客户端、web前端提前约定好的。而最后调用的_doSend()就是javasript回调给java的了。

4.1 doSend()方法

//native private void doSend(String handlerName, String data, CallBackFunction responseCallback) {Message m = new Message();if (!TextUtils.isEmpty(data)) {m.setData(data);}if (responseCallback != null) {String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis())); //生成id，后自增，以便区分，不过源码中貌似没有用到responseCallbacks.put(callbackStr, responseCallback);m.setCallbackId(callbackStr);}if (!TextUtils.isEmpty(handlerName)) {m.setHandlerName(handlerName);}queueMessage(m);}

4.2 queueMessage()

private void queueMessage(Message m) {if (startupMessage != null) { //本地调用javasript为nullstartupMessage.add(m);} else {dispatchMessage(m);}}

本地调用javasript时，startupMessage 为null。很简单，直接跳到dispatchMessage函数

4.3 dispatchMessage（）

void dispatchMessage(Message m) {String messageJson = m.toJson();//escape special characters for json stringmessageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");messageJson = messageJson.replaceAll("(?<={FNXX==XXFN})(\")", "\\\\\"");String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);if (Thread.currentThread() == Looper.getMainLooper().getThread()) {this.loadUrl(javascriptCommand);}

if前面的都是初始化回调数据的，if语句才是精华，java调用js代码。注意javascriptCommand的值String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson); 其中JS_HANDLE_MESSAGE_FROM_JAVA为常量"javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');" 。也即调用了WebViewJavascriptBridge._handleMessageFromNative(messageJson ).

4.4 js _dispatchMessageFromNative()

function _dispatchMessageFromNative(messageJSON) {        setTimeout(function() {            var message = JSON.parse(messageJSON);            var responseCallback;            //java call finished, now need to call js callback function            if (message.responseId) {                responseCallback = responseCallbacks[message.responseId];                if (!responseCallback) {                    return;                }                responseCallback(message.responseData);                delete responseCallbacks[message.responseId];            } else {                //直接发送                if (message.callbackId) {                    var callbackResponseId = message.callbackId;                    responseCallback = function(responseData) {                        _doSend({                            responseId: callbackResponseId,                            responseData: responseData                        });                    };                }                var handler = WebViewJavascriptBridge._messageHandler;                if (message.handlerName) {                    handler = messageHandlers[message.handlerName];                }                //查找指定handler                try {                    handler(message.data, responseCallback);                } catch (exception) {                    if (typeof console != 'undefined') {                        console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);                    }                }            }        });}

java回调的Message对象messageJson 的responseId为null，故直接走else语句。handler = messageHandlers[message.handlerName]; 通过队列拿到handler。handlerName为“functionInJs”。这个的初始化是在这：

connectWebViewJavascriptBridge(function(bridge) {              ....            bridge.registerHandler("functionInJs", function(data, responseCallback) {                document.getElementById("show").innerHTML = ("data from Java: = " + data);                var responseData = "Javascript Says Right back aka!";                responseCallback(responseData);            });        })

5 web前端调用native

Paste_Image.png

5.1 实现原理

参照时序图，大致了解了调用过程。实现原理的思想也比较简单，利用js的iFrame（不显示）的src动态变化，触发java层webClient的shouldOverrideUrlLoading，然后让本地去调用javasript。

5.2 _doSend(message, responseCallback)

 //sendMessage add message, 触发native处理 sendMessage    function _doSend(message, responseCallback) {        if (responseCallback) {            var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();            responseCallbacks[callbackId] = responseCallback;            message.callbackId = callbackId;        }        sendMessageQueue.push(message);        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;    }

js 调用java时，会调用到 _doSend()函数。在该函数中使用sendMessageQueue队列把消息存起来，并且改变Iframe的src，提醒native java端来取消息。
Iframe的初始化在这里：

 _createQueueReadyIframe(doc);    var readyEvent = doc.createEvent('Events');    readyEvent.initEvent('WebViewJavascriptBridgeReady');    readyEvent.bridge = WebViewJavascriptBridge;    doc.dispatchEvent(readyEvent);

5.3 js端 _fetchQueue()

// 提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容function _fetchQueue() {var messageQueueString = JSON.stringify(sendMessageQueue);sendMessageQueue = [];//android can't read directly the return data, so we can reload iframe src to communicate with javamessagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);}

java端拦截到_doSend()函数更改的iFrame的src后，经过一系列本地调用，中间略，通过loadUrl又调js层的 _fetchQueue()。在该函数中才是真正的调用java函数。

6 参考文献：

1 http://www.cnblogs.com/wingyip/p/5426477.html
2http://zjutkz.net/2016/04/17/%E5%A5%BD%E5%A5%BD%E5%92%8Ch5%E6%B2%9F%E9%80%9A%EF%BC%81%E5%87%A0%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84hybrid%E9%80%9A%E4%BF%A1%E6%96%B9%E5%BC%8F/
3 http://blog.csdn.net/sk719887916/article/details/47189607

0 0