1 前言
WebViewJavascriptBridge是iOS/OSX平臺(tái)上支撐Obj-C和UIWebViews/WebViews JavaScript互發(fā)消息的庫。目前主流App幾乎都是某種程度的Hybrid App，該庫因而得到廣泛應(yīng)用兜辞。
2 基礎(chǔ)知識(shí)
在學(xué)習(xí)該庫之前我們必須了解一些基礎(chǔ)知識(shí)忿薇。主要包含前端和Native兩大部分。
2.1 前端部分——HTML
Keypoint:
-
<script>標(biāo)簽包裹的是JavaScript代碼 - window币狠、iframe
- setTimeout(0)
2.2 前端部分——JavaScript
Keypoint：
- JavaScript函數(shù)菱蔬、對(duì)象
資料:
2.3 Native部分-關(guān)于UIWebView
__TVOS_PROHIBITED @protocol UIWebViewDelegate <NSObject>
@optional
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;
@end
UIWebView的代理UIWebViewDelegate篷帅，會(huì)在UIWebView各個(gè)事件節(jié)點(diǎn)收到回調(diào)消息史侣。其中最重要的是- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
當(dāng)UIWebView加載URL page或者iframe設(shè)置src的時(shí)候拴泌，UIWebViewDelegate都會(huì)執(zhí)行該回調(diào)。
3 WebViewJavascriptBridge設(shè)計(jì)
在分析WebViewJavascriptBridge源碼之前惊橱，我們先聊一下WebViewJavascriptBridge設(shè)計(jì)蚪腐。
3.1 整體框架
WebViewJavascriptBridge整體框架如上圖所示。
包含4部分:
- 前端業(yè)務(wù)邏輯
- 前端js bridge基礎(chǔ)設(shè)施
- Native js bridge基礎(chǔ)設(shè)施
- Native業(yè)務(wù)邏輯
3.2 js bridge基礎(chǔ)設(shè)施
總的來說js bridge基礎(chǔ)設(shè)施主要由3部分組成：
- 消息流: FE和Native之間的消息傳遞過程;
- 消息體（message）:message即Native和前端消息流中的消息體税朴，主要有4個(gè)部分：函數(shù)名回季、參數(shù)、回調(diào)ID正林、響應(yīng)ID;
- 消息隊(duì)列（FE message queue）:前端消息隊(duì)列用來暫存前端到Native的消息體泡一。
3.2.1 消息流
消息流如下圖所示。
從圖中我們可以看出消息流有兩個(gè)參與者觅廓，即調(diào)用方和被調(diào)方鼻忠。調(diào)用方發(fā)起請(qǐng)求，收到對(duì)方的回調(diào)消息杈绸。被調(diào)方收到請(qǐng)求帖蔓，執(zhí)行請(qǐng)求矮瘟，發(fā)送回調(diào)消息。Native和FE都可能是調(diào)用方和被調(diào)用方塑娇，所以Native和FE都至少包含兩部分功能：
- send（發(fā)送自己的調(diào)用請(qǐng)求到對(duì)端）
- receive（收到了來自對(duì)端的調(diào)用請(qǐng)求）
3.2.2 消息體
消息體有四個(gè)成員：
- 函數(shù)名
- 參數(shù)
- callbackID
- responseID
其中函數(shù)名和參數(shù)都很好理解澈侠。這里我們主要說一下callbackID和responseID。
調(diào)用方在發(fā)起調(diào)用的同時(shí)設(shè)置回調(diào)塊埋酬，該回調(diào)塊在被調(diào)方執(zhí)行完任務(wù)后再執(zhí)行哨啃。具體的實(shí)現(xiàn)手段是，調(diào)用方在拼接消息體的時(shí)候写妥，把回調(diào)塊管理起來棘催，并設(shè)置一個(gè)唯一的ID, 放到消息體的callbackID上面。 此時(shí)被調(diào)方收到的消息包含callbackID耳标，在執(zhí)行完成對(duì)應(yīng)函數(shù)后醇坝，會(huì)生成一個(gè)應(yīng)答消息，告知對(duì)方自己已經(jīng)執(zhí)行完成次坡，這個(gè)應(yīng)答消息也是一個(gè)消息體呼猪，該消息體的responseID設(shè)置為其所應(yīng)答消息的callbackID，表示對(duì)該消息的應(yīng)答砸琅。這時(shí)宋距，調(diào)用方收到應(yīng)答消息，檢查responseID症脂，匹配后找到之前對(duì)應(yīng)的回調(diào)塊并執(zhí)行谚赎。
樣例如圖所示：
4 WebViewJavascriptBridge實(shí)現(xiàn)
4.1 消息流和消息隊(duì)列實(shí)現(xiàn)
消息流（前端到Native）
前端到Native的消息流由隱藏的iframe發(fā)起。每次調(diào)用js bridge函數(shù)時(shí)設(shè)置iframe的src诱篷，然后壶唤，Native的UIWebViewDelegate收到- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType回調(diào)，在回調(diào)上加一些額外的邏輯區(qū)分棕所，Native就知道前端發(fā)起了js bridge函數(shù)調(diào)用闸盔。
消息流（Native到前端）
Native到前端的消息流比較簡(jiǎn)單。它是由UIWebView本身完成琳省。UIWebView的- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script可以直接執(zhí)行js命令迎吵。Native要調(diào)用前端的方法時(shí)，可以把方法轉(zhuǎn)化為js命令直接調(diào)用针贬。
消息隊(duì)列（FE message queue）
前端消息隊(duì)列用來暫存前端到Native的消息體击费。
相關(guān)的點(diǎn)如下：
- 前端設(shè)置iframe的src之前會(huì)先把消息存到消息隊(duì)列；
- Native收到回調(diào)后桦他，調(diào)用相關(guān)js命令從前端獲取消息隊(duì)列蔫巩，得到消息隊(duì)列后，按照消息隊(duì)列的每條消息執(zhí)行相應(yīng)操作——函數(shù)調(diào)用。
4.2 前端js bridge源碼
4.2.1 send
參考前端到Native消息流批幌。send通過iframe設(shè)置src和messageQueue緩存消息體實(shí)現(xiàn)础锐。
// 前端調(diào)用Native
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
var message = { handlerName:handlerName, data:data };
if (responseCallback) { // 回調(diào)管理
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = 'wvjbscheme://__WVJB_QUEUE_MESSAGE__';
}
// 獲取并清空message queue，暴露給OC
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
return messageQueueString;
}
4.2.2 receive
參考Native到前端的消息流荧缘。receive通過registerHandler注冊(cè)js bridge函數(shù)皆警，通過_handleMessageFromObjC方法執(zhí)行messageHandlers里面的函數(shù)體。
// 前端注冊(cè)js bridge方法供OC調(diào)用截粗，比OC直接調(diào)用js普通方法好在對(duì)回調(diào)的支持上面信姓。
var messageHandlers = {};
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
// OC調(diào)用處理，暴露給OC
function _handleMessageFromObjC(messageJSON) {
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.responseId) { // 回調(diào)管理（responseId匹配查找）=> message有responseId表示是一個(gè)回調(diào)調(diào)用
responseCallback = responseCallbacks[message.responseId]; // 這個(gè)responseId必須要與當(dāng)時(shí)消息寄送時(shí)所填寫的responseId一致
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
var message = { handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData };
sendMessageQueue.push(message);
messagingIframe.src = 'wvjbscheme://__WVJB_QUEUE_MESSAGE__';
};
}
// messageHandlers在這里
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
}
}
4.3 Native js bridge源碼
4.3.1 send
參考Native到前端的消息流绸罗。Native的send是先拼接出js命令意推，再直接執(zhí)行stringByEvaluatingJavaScriptFromString。
- (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];
}
//命令拼接
- (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];
});
}
}
//命令執(zhí)行
- (NSString*) _evaluateJavascript:(NSString*)javascriptCommand
{
return [_webView stringByEvaluatingJavaScriptFromString:javascriptCommand];
}
4.3.2 receive
參考FE到Native消息流珊蟀。
//Native js bridge方法管理（給js用的）
- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
_base.messageHandlers[handlerName] = [handler copy];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
// core code {
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isQueueMessageURL:url]) {
// 獲取JS的messageQueue
NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];
}
return NO;
}
// core code }
}
-(NSString *)webViewJavascriptFetchQueyCommand {
return @"WebViewJavascriptBridge._fetchQueue();";
}
- (void)flushMessageQueue:(NSString *)messageQueueString{
if (messageQueueString == nil || messageQueueString.length == 0) {
NSLog(@"WebViewJavascriptBridge: WARNING: ObjC got nil while fetching the message queue JSON from webview. This can happen if the WebViewJavascriptBridge JS is not currently present in the webview, e.g if the webview just loaded a new page.");
return;
}
// 拿到消息菊值，按照消息handler
id messages = [self _deserializeMessageJSON:messageQueueString];
for (WVJBMessage* message in messages) {
if (![message isKindOfClass:[WVJBMessage class]]) {
NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
continue;
}
[self _log:@"RCVD" json:message];
NSString* responseId = message[@"responseId"];
if (responseId) { // 如果是應(yīng)答消息則執(zhí)行并結(jié)束
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
} else { // 如果是普通調(diào)用消息，則根據(jù)是否需要對(duì)其應(yīng)答做相應(yīng)處理
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
// 在messageHandlers里面查找handler
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
// 執(zhí)行handler
handler(message[@"data"], responseCallback);
}
}
}
5總結(jié)
本文從JS bridge的基礎(chǔ)知識(shí)講到WebViewJavascriptBridge的源碼實(shí)現(xiàn)育灸。涉及的點(diǎn)有消息流腻窒，消息體，消息隊(duì)列等磅崭。其中比較有意思的是回調(diào)實(shí)現(xiàn)原理儿子。算是對(duì)自己閱讀代碼的一個(gè)記錄。
