WebViewJavaScriptBridge深入剖析

前言

前一篇文章中，我们大致的讲述了一下JavaScriptCore这个库在iOS开发中的应用。在文中最后的阶段，我们提到了WebViewJavaScriptBridge这个库。提到这个库，可能有一些人就要说了，现在都什么时代了，谁还会用这个库啊？全是坑！不错，早在三年前，这个库有过一段辉煌的时光，在苹果除了WKWebView之后，渐渐的使用这个库的人越来越少，尽管这个库也是支持了WKWebView的。

但是一个事物的存在就有他的价值，就算使用也不是那么频繁了，尽管他有很多的坑。但是对于一个开发者来说，我们应该取其精华去其糟粕，现如今出的很多的交互的bridge依旧是有部分交互逻辑沿用了WebViewJavaScriptBridge的思想。

这里就不得不提味精大神的一片文章，这篇文章里面深入浅出的谈了谈现如今Hybrid开发时常用的一些桥方法。有兴趣的可以去关注一下。废话不多说，那么我们今天就从源码开始解析这个库的使用以及原理。

简介

简单的来说，在最开始的UIWebView时，原生跟JS之间的交互一般是两种方式：

  • Native -> JS:这种方式很简单，只是是原生调用stringByEvaluatingJavaScriptFromString：方法，传入要执行的JS代码就可以实现；

  • JS -> Native：这种方式是在网页上面加载一串Custom URL Scheme的URL，然后通过原生去UIWebView的代理方法webView:shouldStartLoadWithRequest:navigationType:中拦截相应的URL做处理。

当然这个其实也就是WebViewJavaScriptBridge的理论核心。但是上面这种实现方法为什么没有人使用呢?原因就是，通过在代理方法里面拦截，我们就必不可少的要写很多的if else的代码。在项目中的混合插件越来越多的时候，就导致了这个代理方法里面的逻辑越来越臃肿，越来越难以维护。

那么WebViewJavaScriptBridge的作用就是以更加优雅的方式，去实现Native与JS之间的互调。让Native能像调用OC的方法一样调用JS，同时JS也能像调用JS方法一样去调用OC。这就在OC和JS中间搭起了一座友谊的桥梁。

使用

这里使用我就不多说了，直接pod 'WebViewJavascriptBridge'就可以引入到项目了。

附上源码地址：WebViewJavaScriptBridge

目录结构

WebViewJavaScriptBridge目录结构
  • WebViewJavaScriptBridgeBase：bridge的核心类，用来初始化以及消息的处理；
  • WebViewJavaScriptBridge：判断WebView的类型，并通过不同的类型进行分发。针对UIWebView和WebView做的一层封装，主要从来执行JS代码，以及实现UIWebView和WebView的代理方法，并通过拦截URL来通知WebViewJavaScriptBridgeBase做的相应操作；
  • WKWebViewJavaScriptBridge：主要是针对WKWebView做的一些封装，主要也是执行JS代码和实现WKWebView的代理方法的。同上面这个类类似；
  • WebViewJavaScriptBridge_JS：里面主要写了一些JS的方法，JS端与Native”互动“的JS端的方法基 本上都在这个里面；

主要流程

WebViewJavaScriptBridge参与交互的流程包括三个部分：初始化、JS调用Native、Native调用JS。接下来我们就一一分析其中的过程。

1、初始化

这里必须要说一下，WebViewJavaScriptBridge的这个设计很巧妙，他在JS端和Native端，都各自初始化了一个WebViewJavaScriptBridge对象，就像是两边各自安排了一个”通讯兵“，让这两个对象去完成消息的收发工作。同时两边还各自维护一个管理相应事件的messageHandlers容器、一个管理回调的callbackId容器。所以这里的初始化，我们得分为两个部分的初始化，一个部分是Native端的初始化，一个是JS端的初始化。这里我们都以UIWebView为例子讲解，WKWebView其实也是相类似的原理，可以类比一下。

（1）、Native端的初始化
  • 首先初始化WebViewJavaScriptBridge并且设置好代理
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];

然后其内部初始化了WebViewJavaScriptBridgeBase类和相关的属性

- (void) _setupInstance:(WKWebView*)webView {
    _webView = webView;
    _webView.navigationDelegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}
  • 注册handler，这个handler是提供给JS调用的
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];

注册其实就是在messageHandlers这个NSMutableDictionary里面保存一下

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    _base.messageHandlers[handlerName] = [handler copy];
}
  • 当我们通过loadRequest加载URL之后，网页一加载就会执行网页JS中的bridge的初始化方法setupWebViewJavascriptBridge函数
function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

这里主要做了两件事情，一个是保存要执行的一直自定义初始化函数，比如注册JS中的handler，第二个就是通过添加一个iframe加载初始化链接https://__bridge_loaded__。

  • 接着Native端会拦截https://__bridge_loaded__这个URL
    WebViewJavaScriptBridge类中的拦截方法
  • 在webview中执行本地WebViewJavaScriptBridge_JS中的代码，初始化window.WebViewJavaScriptBridge对象：首先在JS中创建一个WebViewJavaScriptBridge对象，设置成window一个属性，然后定义几个用于管理消息的全局变量，接着给WebViewJavaScriptBridge对象定义几个处理消息的方法和函数，执行Native端startupMessageQueue中保存的消息，也就是本地JS文件还未加载时就发送了的消息。
window.WebViewJavascriptBridge = {
        registerHandler: registerHandler,
        callHandler: callHandler,
        disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
        _fetchQueue: _fetchQueue,
        _handleMessageFromObjC: _handleMessageFromObjC
    };

2、JS调用原生

  • JS中调用callHandler()方法，发消息给原生
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                log('JS got response', response)
            })

然后我们看看callHandler是怎么定义的

function callHandler(handlerName, data, responseCallback) {
        if (arguments.length == 2 && typeof data == 'function') {
            responseCallback = data;
            data = null;
        }
        _doSend({ handlerName:handlerName, data:data }, responseCallback);
    }

那么这个_doSend是干嘛的？我们顺着往下看

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;
    }

这下我们清楚了，原来我们在传入handlerName和data被包装成了一个message传入到_doSend函数，然后生成一个callbackId，也一道包装到message中去。这样三个数据都被打包成了一个message传到Native。
当然为什么要传入一个callbackId进去呢？这是因为用于处理原生回调的responseCallback是一个函数，是不能直接传给原生的，所以这里就把这个responseCallback存到了一个全局的responseCallbacks对象的属性里面去，属性名就是responseCallback对应的id。这个地方就是为了后面Native回调JS时，根据id找到对应的responseCallback。

  • 在上图中的最后一步指的是JS会在iframe中加载发送消息的URL，此时原生就可以在相应的代理中拦截到这个URL，然后就知道JS端给我传递消息了，然后Native端会去调用JS，把sendMessageQueue中的message取出来，转成JSON string的格式。接着原生把JSON string解析成字典，取出相应的data、callbackId和handlerName。最后根据handlerName去先前的messageHanlers里面取出相对应的block（handler），然后调用这个block，data作为第一个参数，第二个参数是根据callbackId创建的responseCallback（block），然后原生就可以在block（handler）中处理接收到的data以及回调JS了。

  • 如果说需要原生给JS回调的话，当这个responseCallback被回调的时候，会执行下面的代码

- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
    NSMutableDictionary* message = [NSMutableDictionary dictionary];
    
    if (data) {
        message[@"data"] = data;
    }
    
    if (responseCallback) {
        NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
        self.responseCallbacks[callbackId] = [responseCallback copy];
        message[@"callbackId"] = callbackId;
    }
    
    if (handlerName) {
        message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
}

这里就是直接创建了一个message（NSMutableDictionary）对象，把data、callbackId和handlerName封装之后转换成为JSON string，最后调用WebViewJavascriptBridge._handleMessageFromObjC('%@')这个方法，把message传给JS。

- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

在JS接收到了这个message之后，会根据里面的callbackId找到之前的responseCallback，把data作为参数，回调这个responseCallback。

2、Native调用JS

其Native调用JS和上面JS调用Native是有很多的相似之处的。当然，其实也是可以直接通过web view执行JS脚本去实现的。但是WebViewJavaScriptBridge使用了一套更加规范的调用方式。接下来来介绍一下这种方式。

  • Native调用callHandler()方法，把消息发送给JS
[_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];

这个方法跟JS里面的这个方法名是一样的，当然实际的作用其实也是相似的。
在这里都是将handlerName、data和responseCallback对应的id包装成一个message。然后把这个message对象转成JSON string。最后在调用WebViewJavascriptBridge._handleMessageFromObjC(messageJSON)方法把数据给到JS。这里至于为什么也是传id，其实原理跟上面是一样的，block也是不能直接传给JS的，所以这里把responseCallback的这个block存到了全局的responseCallbacks字典里面去了，key就是responseCallback对应的id。JS回调Native的时候，就会来这个字典里面去取对应的block。其实思想都是差不多的。

  • JS端拿到了这个message之后，会将它解析成为JS对象，然后去使用data、callbackId和handlerName。然后根据handlerName去messageHandlers里面去对应的handler函数，然后去执行这个函数。第一个参数是传过来的data，第二个参数就是根据callbackId创建的responseCallback的function。这里就可以在handler里面处理接收到的回调了。
  • 这里与前面JS调Native时Native回调JS的处理不太一样，因为JS调Native是不能直接调的。但是怎么去通知Native呢？其实他这里就是直接走了JS调用Native的流程，就是上面提到的这个流程。不过还是有不同的：
    • 一是message里面的东西不一样了；
    • 二是Native对message的处理：

      • 跟上面JS调用Native不一样的就是message里面现在不需要你传一个callbackId了，因为这里本来就是JS回调给Native的，再传这个，两边就一直在回调来回调去了。但是呢，多了一个responseId，这是因为Native执行JS回调的时候，会根据这个responseId从responseCallbacks中去取对应的block

        ```
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
```
        • Native在收到JS回调之后，会根据responseId找到之前保存的responseCallback的block，然后把message中的responseData（其实就是data）作为参数回调给这个responseCallback。与JS调用Native不同的其实就是这里的responseCallback只有一个data参数了，是没有用于再次回调JS的block了。

总结

至此，WebViewJavaScriptBridge的整体核心流程就基本上讲完了。这样看看，其实其中的原理还算是简单，但是很巧妙。两边都维护了一个WebViewJavaScriptBridge的对象，消息都封装成为一个message，然后所有的callback，都巧妙的转换成了id。通过直接传递id，然后根据id分别去对应的地方去寻找到对应的callback。这种方式，其实也是值得我们去学习和使用的。
接下来我会继续的去研究现在比较火爆的JSCore的交互方式，对于Hybrid开发有想法的朋友，欢迎留言跟我交流。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343