WebViewJavascriptBridge源码分析

最近抽时间看了一遍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 ' ]  =
  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值