OC与JS交互之WebViewJavascriptBridge

 

 

上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理，并且简单的实现了一个小的示例DEMO，当然也有一部分遗留问题，使用原生实现过程比较繁琐，代码难以维护。这篇文章主要介绍下开源库WebViewJavascriptBridge的实现原理和使用方法，并用此开源库重写之前的示例，同样，本文的示例代码我会在文章后面给出欢迎star

 

我们在上一篇文章结尾处简要介绍了WebViewJavascriptBridge的实现原理也是基于UIWebView的协议拦截，通过阅读源码发现，中间有很多地方是值得学习的。涉计到消息派遣，数据序列化，异常处理等技术思想

 

一、WebViewJavascriptBridge的实现原理

WebViewJavascriptBridge如其名字定义，就相当于一座桥梁，两端连接了Obj-C和JavaScript。它提供了OC和JS互调的方法接口，方法在互调之前，我们需要向对方注册我们的方法列表

1. OC调用和回调JS

//1.1 JS注册OC的方法并实现回调OC
bridge.registerHandler('JS Echo', function(data, responseCallback) {
　　console.log("JS Echo called with:", data)
　　responseCallback(data)
})

　　

//1.2 OC调用JS方法并实现回调函数
[self.bridge callHandler:@"JS Echo" responseCallback:^(id responseData) {
    NSLog(@"ObjC received response: %@", responseData);
}];

　　

2. JS调用和回调OC

//2.1 OC注册JS的方法并实现回调JS
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC Echo called with: %@", data);
    responseCallback(data);
}];

　　

//2.2 JS调用OC方法并实现回调函数
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
　　console.log("JS received response:", responseData)
})

　　

首先看一张模型图(图片来自网络)

透过模型图，我们可以清楚的看到WebViewJavascriptBridge充当的桥梁是如何工作的

具体用法，参考官方的使用指南

下面我们我们来具体分析WebViewJavascriptBridge实现原理：

先看下库的文件，一共有8个文件，而我们关心的文件只有3个，因为文件5，6是兼容WKWebView，实现原理都是一样的，不需要看，所有的.h文件是声明.m中的方法列表也不需要看

1. WebViewJavascriptBridge.h  
2. WebViewJavascriptBridge.m 
3. WebViewJavascriptBridgeBase.h  
4. WebViewJavascriptBridgeBase.m 
5. WKWebViewJavascriptBridge.h  
6. WKWebViewJavascriptBridge.m  
7. WebViewJavascriptBridge_JS.h  
8. WebViewJavascriptBridge_JS.m

接下来我们需要重点关注文件2，4，8中的代码，值得一提的是文件7，8是 注入JS 相关的文件，之前JS代码是放在一个叫WebViewJavascriptBridge.js.txt的文件，换掉的原因可以在文件8的头部找到相关踪迹，因为大概是和使用者的库及其封装有影响。接下来查看源码的初始化部分：

1. 首先我们有一个bridge对象

@property (nonatomic, strong) WebViewJavascriptBridge *bridge;

2. 然后对齐进行初始化，初始化的过程中我们传入了当前的webView对象，bridge在初始化(文件2)的过程中，把自己作为webView的代理对象，同时设置对应平台的代理(iOS/OSX，这里兼容了两个平台)，这样在webView加载的时候，bridge就可以获取到相关方法的调用和处理。至此我们完成了OC端bridge的初始化

self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];

3. bridge在初始化的时候会触发bridgeBase的初始化(文件4)，实际上消息的处理和回调都是在bridgeBase中完成的，bridge的作用是：进行webView代理的传递，对应平台初始化，调用bridgeBase中消息的注册，调用和回调处理，我们来看下bridgeBase的头文件中的属性，有消息队列数组，消息处理字典，响应回调字典和具体的消息处理对象

@property (assign) id <WebViewJavascriptBridgeBaseDelegate> delegate;
@property (strong, nonatomic) NSMutableArray* startupMessageQueue;
@property (strong