iOS源码解析—WebViewJavascriptBridge

简介

一个OC和JS交互的桥接机制，主要包含3个类，JS端window.WebViewJavascriptBridge，OC端WebViewJavascriptBridge和WebViewJavascriptBridgeBase。桥接类支持JS调用OC方法，OC调用JS方法。JS调用OC通过重定向url并取handlerName来调用，OC调用JS通过stringByEvaluatingJavaScriptFromString调用。

1. OC端初始化、注册func：

   • 通过初始化方法生成1个WebViewJavascriptBridge以及WebViewJavascriptBridgeBase。webview的delegate改为WebViewJavascriptBridge，WebViewJavascriptBridge的_webViewDelegate是外部传入的webviewController。

     + (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)messageHandler resourceBundle:(NSBundle*)bundle
     {
      WebViewJavascriptBridge* bridge = [[self alloc] init];
      [bridge _platformSpecificSetup:webView webViewDelegate:webViewDelegate handler:messageHandler resourceBundle:bundle];
      return bridge;
     }
     
     - (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(id<UIWebViewDelegate>)webViewDelegate handler:(WVJBHandler)messageHandler resourceBundle:(NSBundle*)bundle 
     {
      _webView = webView;
      _webView.delegate = self;
      _webViewDelegate = webViewDelegate;
      _base = [[WebViewJavascriptBridgeBase alloc] initWithHandler:(WVJBHandler)messageHandler resourceBundle:(NSBundle*)bundle];
      _base.delegate = self;
     }

   • messageHandler是默认处理函数，当JS调用OC时，根据方法名找不到OC的block时，或者通过send()方法调用OC时，调用该默认messageHandler。

   • messageHandlers是键值对，存放了OC注册的方法以及对应的方法名。startupMessageQueue是数组，存放了JS端WebViewJavascriptBridge.js.txt脚本执行之前，OC调用的JS方法信息message。

     -(id)initWithHandler:(WVJBHandler)messageHandler resourceBundle:(NSBundle*)bundle
     {
      self = [super init];
      _resourceBundle = bundle;
      self.messageHandler = messageHandler;
      self.messageHandlers = [NSMutableDictionary dictionary];
      self.startupMessageQueue = [NSMutableArray array];
      self.responseCallbacks = [NSMutableDictionary dictionary];
      _uniqueId = 0;
      return(self);
     }

   • 注册OC方法，调用registerHandler:name handler:(WVJBHandler)handler，往messageHandlers键值对中存。

     - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
      _base.messageHandlers[handlerName] = [handler copy];
     }

2. JS端初始化、注册func

   • 加载JS脚本

     webView加载完之后，进入webViewDidFinishLoad回调，调用injectJavascriptFile，执行WebViewJavascriptBridge.js脚本。并且把startupMessageQueue中的message批量处理掉。

     - (void)injectJavascriptFile:(BOOL)shouldInject {
          ...
          NSString *filePath = [bundle pathForResource:@"WebViewJavascriptBridge.js" ofType:@"txt"];
          NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
          [self _evaluateJavascript:js];
          [self dispatchStartUpMessageQueue];
     }
     
     - (void)dispatchStartUpMessageQueue {
      if (self.startupMessageQueue) {
          for (id queuedMessage in self.startupMessageQueue) {
              [self _dispatchMessage:queuedMessage];
          }
          self.startupMessageQueue = nil;
      }
     }

   • WebViewJavascriptBridge.js脚本创建window.WebViewJavascriptBridge对象。_handleMessageFromObjC是OC调用JS的入口。

     window.WebViewJavascriptBridge = {
     init: init,
      send: send,
      registerHandler: registerHandler,
      callHandler: callHandler,
      _fetchQueue: _fetchQueue,
      _handleMessageFromObjC: _handleMessageFromObjC
     }

   • 同时创建一些变量，receiveMessageQueue是数组，存放了init方法调用之前，OC调用JS的信息Message队列。messageHandlers是键值对，存放JS端注册的方法。sendMessageQueue是Message队列，存放JS调用OC的方法。

     var messagingIframe
     var sendMessageQueue = []
     var receiveMessageQueue = []
     var messageHandlers = {}

   • 注册JS响应方法，调用registerHandler方法注册。

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

   • init方法初始化，同时messageHandler是初始化完的回调block，处理默认逻辑，和OC的messageHandler功能一样。同时批量处理receiveMessageQueue中的消息。

     function init(messageHandler) {
     WebViewJavascriptBridge._messageHandler = messageHandler
     var receivedMessages = receiveMessageQueue
     receiveMessageQueue = null
     for (var i=0; i<receivedMessages.length; i++) {
             _dispatchMessageFromObjC(receivedMessages[i])
     }
     }

3. OC端调用JS端func：

   • 调用callHandler:handlerName data:data responseCallback:responseCallback方法或者send:data responseCallback:responseCallback方法来调用JS方法。内部调用WebViewJavascriptBridgeBase的sendData:data responseCallback:responseCallback handlerName:handlerName方法。

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

   • 如果responseCallback，则创建一个responseCallback，维护到responseCallbacks键值对中。包装一个Message对象，包括data、handlerName和callbackId，一起发送。如果WebViewJavascriptBridge.js未加载，则往startupMessageQueue队列里面添加。如果已加载，则发送给window.WebViewJavascriptBridge对象。

     - (void)_queueMessage:(WVJBMessage*)message {
      if (self.startupMessageQueue) {
          [self.startupMessageQueue addObject:message];
      } else {
          [self _dispatchMessage:message];
      }
     }
     - (void)_dispatchMessage:(WVJBMessage*)message {
         ...
         NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
     [self _evaluateJavascript:javascriptCommand];
     }

   • 执行_handleMessageFromObjC方法，如果WebViewJavascriptBridge未init初始化，则添加到receiveMessageQueue队列，否则执行dispatchMessageFromObjC。

     function _handleMessageFromObjC(messageJSON) {
      if (receiveMessageQueue) {
          receiveMessageQueue.push(messageJSON)
      } else {
          _dispatchMessageFromObjC(messageJSON)
      }
     }

   • dispatchMessageFromObjC，如果有callBackId，则创建一个回调func，通过doSend回调OC，如果没有handlerName，则调用默认的messageHandler，传data。

     function _dispatchMessageFromObjC(messageJSON) {
     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(message.data, responseCallback)
     }

   • 处理回调，js方法调用responseCallback()，传入responseId和responseData，调用doSend方法。doSend方法首先构建一个Message，放入sendMessageQueue中，然后重定向一下scheme://message。

     function _doSend(message, responseCallback) {
     ...
      sendMessageQueue.push(message)
      messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
     }

   • OC端的WebViewJavascriptBridge拦截到url，获取sendMessageQueue数组中的message，执行flushMessageQueue:message方法。

     - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
      ...
      NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
      [_base flushMessageQueue:messageQueueString];
      ...
     }

   • flushMessageQueue:message方法里判断，如果有responseId，则通过responseId从_responseCallbacks键值对中取出OC的回调方法，并且把responseData传给回调方法。

     - (void)flushMessageQueue:(NSString *)messageQueueString{
     for (WVJBMessage* message in messages) {
     NSString* responseId = message[@"responseId"];
         if (responseId) {
             WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
              responseCallback(message[@"responseData"]);
          }
     }
     }

4. JS端调用OC端func：

   • JS调用send和callHandler，然后调用doSend()方法

     _doSend({ handlerName:handlerName, data:data }, responseCallback)

   • _doSend方法中，如果有回调responseCallback，则维护回调responseCallbacks，存放responseCallback。sendMessageQueue里添加message。然后重定向Url。

     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
     }

   • OC端的shouldStartLoadWithRequest:方法拦截到url，通过WebViewJavascriptBridge._fetchQueue()获取message队列，然后调用flushMessageQueue方法处理message。

     - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
     NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
     [_base flushMessageQueue:messageQueueString];
      return NO;
     }

   • flushMessageQueue:messageQueue方法，如果有callbackId，则调用_queueMessage方法，传递回调数据以及responseId。如果有handlerName，则调用相应的OC方法，否则调用默认方法messageHandler。

     - (void)flushMessageQueue:(NSString *)messageQueueString{
     NSString* callbackId = message[@"callbackId"];
     if (callbackId) {
         responseCallback = ^(id responseData) {
             if (responseData == nil) {
                 responseData = [NSNull null];
              }
              WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
             [self _queueMessage:msg];
          };
     }
     WVJBHandler handler;
     if (message[@"handlerName"]) {
         handler = self.messageHandlers[message[@"handlerName"]];
      } else {
         handler = self.messageHandler;
      }
     handler(message[@"data"], responseCallback);
     }

   • _queueMessage方法，调用dispatchMessage方法，接着调用WebViewJavascriptBridge.handleMessageFromObjC方法。

     - (void)_dispatchMessage:(WVJBMessage*)message {
     NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
     [self _evaluateJavascript:javascriptCommand];
     }

   • _handleMessageFromObjC调用dispatchMessageFromObjC(messageJSON)方法，如果message有responseId，则通过responseId和responseCallbacks找到JS回调方法，执行。

     function _dispatchMessageFromObjC(messageJSON) {
     if (message.responseId) {
         responseCallback = responseCallbacks[message.responseId]
          if (!responseCallback) { return; }
          responseCallback(message.responseData)
          delete responseCallbacks[message.responseId]
      }
     }

结尾

​ WebViewJavascriptBridge提供了一种native和js交互的思路，且十分轻量。