上一篇文章介绍了通过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, nonato