最近抽时间看了一遍WebViewJavascriptBridge这个开源框架,把看到的内容记录下来
源码地址:https://github.com/marcuswestin/WebViewJavascriptBridge
1、对外接口
初始化OC | 初始化JS |
[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webview handler:(WVJBHandler)handler]
[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webview webViewDelegate:(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]
|
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) { ... }, false)
bridge.init(function messageHandler(data, response) { ... })
|
OC发送消息to JS | JS发送消息to OC |
[bridge send:(id)data]
[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]
|
bridge.send("Hi there!")
bridge.send({ Foo:"Bar" })
bridge.send(data, function responseCallback(responseData) { ... })
|
OC注册事件(先) | JS调用事件(后) |
[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler]
|
WebViewJavascriptBridge.callHandler("handlerName")
|
OC调用事件(后) | JS注册事件(先) |
[bridge callHandler:(NSString*)handlerName data:(id)data]
[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]
|
bridge.registerHandler("handlerName", function(responseData) { ... })
|
三类API接口用于OC与JS之间交互:初始化接口;发送消息接口,并且可以添加发送消息完成的回调函数;事件注册和调用接口,需要先在一端注册事件,另一端可以根据事件名称调用函数
除了上述提到的外部方法:还有两个方法十分重要,
JS部分最重要的内部方法: _handleMessageFromObjC;OC部分重要的内部方法:flushMessageQueue
2、类结构图
WebViewJavascriptBridge目前既支持原有的UIWebView,也支持iOS8+之后新的WKWebView,使用时可以二选其一;
WebViewjavascriptBridgeBase是通用类,用于处理从Native到JS的消息注入,消息队列处理和分发,JSON数据的序列化和反序列化,LOG输出;
3、源码分析
3.1 消息发送JS-》Native
[bridge send:(id)data]
[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]
这两个函数最后都是调用_doSend({ data:data }, responseCallback)
function _doSend
(message
, responseCallback
)
{
if (responseCallback ) {
var callbackId = ' cb_ ' + (uniqueId ++ ) + ' _ ' + new Date ( ) . getTime ( )
responseCallbacks [callbackId ] = responseCallback
message [ ' callbackId ' ] =
if (responseCallback ) {
var callbackId = ' cb_ ' + (uniqueId ++ ) + ' _ ' + new Date ( ) . getTime ( )
responseCallbacks [callbackId ] = responseCallback
message [ ' callbackId ' ] =