Cordova夫壁，對(duì)這個(gè)名字大家可能比較陌生拾枣，大家肯定聽過 PhoneGap 這個(gè)名字，Cordova 就是 PhoneGap 被 Adobe 收購(gòu)后所改的名字盒让。（Cordova網(wǎng)址以及框架下載地址：http://cordova.apache.org/）
Cordova 是一個(gè)可以讓 JS 與原生代碼(包括 Android 的 java梅肤，iOS 的 Objective-C 等)互相通信的一個(gè)庫(kù)，并且提供了一系列的插件類邑茄，比如 JS 直接操作本地?cái)?shù)據(jù)庫(kù)的插件類姨蝴。
這些插件類都是基于 JS 與 Objective-C 可以互相通信的基礎(chǔ)的，這篇文章說說 Cordova 是如何做到 JS 與 Objective-C 互相通信的肺缕，解釋如何互相通信需要弄清楚下面三個(gè)問題：
一左医、JS 怎么跟 Objective-C 通信授帕？
二、Objective-C 怎么跟 JS 通信炒辉？
三豪墅、JS 請(qǐng)求 Objective-C，Objective-C 返回結(jié)果給 JS黔寇，這一來一往是怎么串起來的偶器？
Cordova 現(xiàn)在最新版本是 2.7.0，本文也是基于 2.7.0 版本進(jìn)行分析的缝裤。
一屏轰、JS 怎么跟 Objective-C 通信
JS 與 Objetive-C 通信的關(guān)鍵代碼如下：(點(diǎn)擊代碼框右上角的文件名鏈接，可直接跳轉(zhuǎn)該文件在 github 的地址)
JS 發(fā)起請(qǐng)求? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cordova.js （github 地址）
function iOSExec() {
...
if (!isInContextOfEvalJs && commandQueue.length == 1)? {
// 如果支持 XMLHttpRequest憋飞，則使用 XMLHttpRequest 方式
if (bridgeMode != jsToNativeModes.IFRAME_NAV) {
// This prevents sending an XHR when there is already one being sent.
// This should happen only in rare circumstances (refer to unit tests).
if (execXhr && execXhr.readyState != 4) {
execXhr = null;
}
// Re-using the XHR improves exec() performance by about 10%.
execXhr = execXhr || new XMLHttpRequest();
// Changing this to a GET will make the XHR reach the URIProtocol on 4.2.
// For some reason it still doesn't work though...
// Add a timestamp to the query param to prevent caching.
execXhr.open('HEAD', "/!gap_exec?" + (+new Date()), true);
if (!vcHeaderValue) {
vcHeaderValue = /.*\((.*)\)/.exec(navigator.userAgent)[1];
}
execXhr.setRequestHeader('vc', vcHeaderValue);
execXhr.setRequestHeader('rc', ++requestCount);
if (shouldBundleCommandJson()) {
// 設(shè)置請(qǐng)求的數(shù)據(jù)
execXhr.setRequestHeader('cmds', iOSExec.nativeFetchMessages());
}
// 發(fā)起請(qǐng)求
execXhr.send(null);
} else {
// 如果不支持 XMLHttpRequest霎苗，則使用透明 iframe 的方式，設(shè)置 iframe 的 src 屬性
execIframe = execIframe || createExecIframe();
execIframe.src = "gap://ready";
}
}
...
}
JS 使用了兩種方式來與 Objective-C 通信榛做，一種是使用 XMLHttpRequest 發(fā)起請(qǐng)求的方式唁盏，另一種則是通過設(shè)置透明的 iframe 的 src 屬性，下面詳細(xì)介紹一下兩種方式是怎么工作的：
XMLHttpRequest bridge
JS 端使用 XMLHttpRequest 發(fā)起了一個(gè)請(qǐng)求：execXhr.open('HEAD', "/!gap_exec?" + (+new Date()), true); 检眯，請(qǐng)求的地址是 /!gap_exec厘擂；
并把請(qǐng)求的數(shù)據(jù)放在了請(qǐng)求的 header 里面，見這句代碼：execXhr.setRequestHeader('cmds', iOSExec.nativeFetchMessages()); 锰瘸。
而在 Objective-C 端使用一個(gè) NSURLProtocol 的子類來檢查每個(gè)請(qǐng)求刽严，如果地址是 /!gap_exec 的話，則認(rèn)為是 Cordova 通信的請(qǐng)求避凝，直接攔截舞萄，攔截后就可以通過分析請(qǐng)求的數(shù)據(jù)，分發(fā)到不同的插件類(CDVPlugin 類的子類)的方法中：
UCCDVURLProtocol 攔截請(qǐng)求? ? ? ? ? ? ? ? ? ? ? ? ? ? UCCDVURLProtocol.m （github 地址）
+ (BOOL)canInitWithRequest:(NSURLRequest*)theRequest
{
NSURL* theUrl = [theRequest URL];
NSString* theScheme = [theUrl scheme];
// 判斷請(qǐng)求是否為 /!gap_exec
if ([[theUrl path] isEqualToString:@"/!gap_exec"]) {
NSString* viewControllerAddressStr = [theRequest valueForHTTPHeaderField:@"vc"];
if (viewControllerAddressStr == nil) {
NSLog(@"!cordova request missing vc header");
return NO;
}
long long viewControllerAddress = [viewControllerAddressStr longLongValue];
// Ensure that the UCCDVViewController has not been dealloc'ed.
UCCDVViewController* viewController = nil;
@synchronized(gRegisteredControllers) {
if (![gRegisteredControllers containsObject:
[NSNumber numberWithLongLong:viewControllerAddress]]) {
return NO;
}
viewController = (UCCDVViewController*)(void*)viewControllerAddress;
}
// 獲取請(qǐng)求的數(shù)據(jù)
NSString* queuedCommandsJSON = [theRequest valueForHTTPHeaderField:@"cmds"];
NSString* requestId = [theRequest valueForHTTPHeaderField:@"rc"];
if (requestId == nil) {
NSLog(@"!cordova request missing rc header");
return NO;
}
...
}
...
}
Cordova 中優(yōu)先使用這種方式管削，Cordova.js 中的注釋有提及為什么優(yōu)先使用 XMLHttpRequest 的方式倒脓，及為什么保留第二種 iframe bridge 的通信方式:
// XHR mode does not work on iOS 4.2, so default to IFRAME_NAV for such devices.
// XHR mode’s main advantage is working around a bug in -webkit-scroll, which
// doesn’t exist in 4.X devices anyways
iframe bridge
在 JS 端創(chuàng)建一個(gè)透明的 iframe，設(shè)置這個(gè) ifame 的 src 為自定義的協(xié)議含思，而 ifame 的 src 更改時(shí)把还，UIWebView 會(huì)先回調(diào)其 delegate 的 webView:shouldStartLoadWithRequest:navigationType: 方法，關(guān)鍵代碼如下：
UIWebView攔截加載? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CDVViewController.m（github 地址）
// UIWebView 加載 URL 前回調(diào)的方法茸俭，返回 YES吊履，則開始加載此 URL，返回 NO调鬓，則忽略此 URL
- (BOOL)webView:(UIWebView*)theWebView
shouldStartLoadWithRequest:(NSURLRequest*)request
navigationType:(UIWebViewNavigationType)navigationType
{
NSURL* url = [request URL];
/*
* Execute any commands queued with cordova.exec() on the JS side.
* The part of the URL after gap:// is irrelevant.
*/
// 判斷是否 Cordova 的請(qǐng)求艇炎，對(duì)于 JS 代碼中 execIframe.src = "gap://ready" 這句
if ([[url scheme] isEqualToString:@"gap"]) {
// 獲取請(qǐng)求的數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行分析腾窝、處理
[_commandQueue fetchCommandsFromJs];
return NO;
}
...
}
二缀踪、Objective-C 怎么跟 JS 通信
熟悉 UIWebView 用法的同學(xué)都知道 UIWebView 有一個(gè)這樣的方法 stringByEvaluatingJavaScriptFromString:居砖，這個(gè)方法可以讓一個(gè) UIWebView 對(duì)象執(zhí)行一段 JS 代碼，這樣就可以達(dá)到 Objective-C 跟 JS 通信的效果驴娃，在 Cordova 的代碼中多處用到了這個(gè)方法奏候，其中最重要的兩處如下：
獲取 JS 的請(qǐng)求數(shù)據(jù)
獲取 JS 的請(qǐng)求數(shù)據(jù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CDVCommandQueue.m（github 地址）
- (void)fetchCommandsFromJs
{
// Grab all the queued commands from the JS side.
NSString* queuedCommandsJSON = [_viewController.webView
stringByEvaluatingJavaScriptFromString:
@"cordova.require('cordova/exec').nativeFetchMessages()"];
[self enqueCommandBatch:queuedCommandsJSON];
if ([queuedCommandsJSON length] > 0) {
CDV_EXEC_LOG(@"Exec: Retrieved new exec messages by request.");
}
}
把 JS 請(qǐng)求的結(jié)果返回給 JS 端
把 JS 請(qǐng)求的結(jié)果返回給 JS 端? ? ? ? ? ? ? ? ? ? ? ? ? CDVCommandDelegateImpl.m（github 地址）
- (void)evalJs:(NSString*)js scheduledOnRunLoop:(BOOL)scheduledOnRunLoop
{
js = [NSString stringWithFormat:
@"cordova.require('cordova/exec').nativeEvalAndFetch(function(){ %@ })",
js];
if (scheduledOnRunLoop) {
[self evalJsHelper:js];
} else {
[self evalJsHelper2:js];
}
}
- (void)evalJsHelper2:(NSString*)js
{
CDV_EXEC_LOG(@"Exec: evalling: %@", [js substringToIndex:MIN([js length], 160)]);
NSString* commandsJSON = [_viewController.webView
stringByEvaluatingJavaScriptFromString:js];
if ([commandsJSON length] > 0) {
CDV_EXEC_LOG(@"Exec: Retrieved new exec messages by chaining.");
}
[_commandQueue enqueCommandBatch:commandsJSON];
}
- (void)evalJsHelper:(NSString*)js
{
// Cycle the run-loop before executing the JS.
// This works around a bug where sometimes alerts() within callbacks can cause
// dead-lock.
// If the commandQueue is currently executing, then we know that it is safe to
// execute the callback immediately.
// Using? ? (dispatch_get_main_queue()) does *not* fix deadlocks for some reaon,
// but performSelectorOnMainThread: does.
if (![NSThread isMainThread] || !_commandQueue.currentlyExecuting) {
[self performSelectorOnMainThread:@selector(evalJsHelper2:)
withObject:js
waitUntilDone:NO];
} else {
[self evalJsHelper2:js];
}
}
三、怎么串起來
先看一下 Cordova JS 端請(qǐng)求方法的格式：
// successCallback : 成功回調(diào)方法
// failCallback? ? : 失敗回調(diào)方法
// server? ? ? ? ? : 所要請(qǐng)求的服務(wù)名字
// action? ? ? ? ? : 所要請(qǐng)求的服務(wù)具體操作
// actionArgs? ? ? : 請(qǐng)求操作所帶的參數(shù)
cordova.exec(successCallback, failCallback, service, action, actionArgs);
傳進(jìn)來的這五個(gè)參數(shù)并不是直接傳送給原生代碼的唇敞，Cordova JS 端會(huì)做以下的處理：
1.會(huì)為每個(gè)請(qǐng)求生成一個(gè)叫 callbackId 的唯一標(biāo)識(shí)：這個(gè)參數(shù)需傳給 Objective-C 端蔗草，Objective-C 處理完后，會(huì)把 callbackId 連同處理結(jié)果一起返回給 JS 端疆柔。
2.以 callbackId 為 key咒精，{success:successCallback, fail:failCallback} 為 value，把這個(gè)鍵值對(duì)保存在 JS 端的字典里旷档，successCallback 與 failCallback 這兩個(gè)參數(shù)不需要傳給 Objective-C 端模叙，Objective-C 返回結(jié)果時(shí)帶上 callbackId，JS 端就可以根據(jù) callbackId 找到回調(diào)方法鞋屈。
3.每次 JS 請(qǐng)求范咨，最后發(fā)到 Objective-C 的數(shù)據(jù)包括：callbackId, service, action, actionArgs。
關(guān)鍵代碼如下：
JS 端處理請(qǐng)求? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cordova.js（github 地址）
function iOSExec() {
...
// 生成一個(gè) callbackId 的唯一標(biāo)識(shí)厂庇，并把此標(biāo)志與成功渠啊、失敗回調(diào)方法一起保存在 JS 端
// Register the callbacks and add the callbackId to the positional
// arguments if given.
if (successCallback || failCallback) {
callbackId = service + cordova.callbackId++;
cordova.callbacks[callbackId] =
{success:successCallback, fail:failCallback};
}
actionArgs = massageArgsJsToNative(actionArgs);
// 把 callbackId，service宋列，action昭抒，actionArgs 保持到 commandQueue 中
// 這四個(gè)參數(shù)就是最后發(fā)給原生代碼的數(shù)據(jù)
var command = [callbackId, service, action, actionArgs];
commandQueue.push(JSON.stringify(command));
...
}
// 獲取請(qǐng)求的數(shù)據(jù)评也，包括 callbackId, service, action, actionArgs
iOSExec.nativeFetchMessages = function() {
// Each entry in commandQueue is a JSON string already.
if (!commandQueue.length) {
return '';
}
var json = '[' + commandQueue.join(',') + ']';
commandQueue.length = 0;
return json;
};
原生代碼拿到 callbackId炼杖、service、action 及 actionArgs 后盗迟，會(huì)做以下的處理：
1.根據(jù) service 參數(shù)找到對(duì)應(yīng)的插件類
2.根據(jù) action 參數(shù)找到插件類中對(duì)應(yīng)的處理方法坤邪，并把 actionArgs 作為處理方法請(qǐng)求參數(shù)的一部分傳給處理方法
3.處理完成后，把處理結(jié)果及 callbackId 返回給 JS 端罚缕，JS 端收到后會(huì)根據(jù) callbackId 找到回調(diào)方法艇纺，并把處理結(jié)果傳給回調(diào)方法
關(guān)鍵代碼：
Objective-C 返回結(jié)果給JS端? ? ? ? ? ? ? ? ? ? ? ? ? CDVCommandDelegateImpl.m（github 地址）
?- (void)sendPluginResult:(CDVPluginResult*)result callbackId:(NSString*)callbackId
{
CDV_EXEC_LOG(@"Exec(%@): Sending result. Status=%@", callbackId, result.status);
// This occurs when there is are no win/fail callbacks for the call.
if ([@"INVALID" isEqualToString : callbackId]) {
return;
}
int status = [result.status intValue];
BOOL keepCallback = [result.keepCallback boolValue];
NSString* argumentsAsJSON = [result argumentsAsJSON];
// 將請(qǐng)求的處理結(jié)果及 callbackId 通過調(diào)用 JS 方法返回給 JS 端
NSString* js = [NSString stringWithFormat:
@"cordova.require('cordova/exec').nativeCallback('%@',%d,%@,%d)",
callbackId, status, argumentsAsJSON, keepCallback];
[self evalJsHelper:js];
}
JS 端根據(jù) callbackId 回調(diào)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cordova.js（github 地址）
// 根據(jù) callbackId 及是否成功標(biāo)識(shí)，找到回調(diào)方法邮弹，并把處理結(jié)果傳給回調(diào)方法
callbackFromNative: function(callbackId, success, status, args, keepCallback) {
var callback = cordova.callbacks[callbackId];
if (callback) {
if (success && status == cordova.callbackStatus.OK) {
callback.success && callback.success.apply(null, args);
} else if (!success) {
callback.fail && callback.fail.apply(null, args);
}
// Clear callback if not expecting any more results
if (!keepCallback) {
delete cordova.callbacks[callbackId];
}
}
}
通信效率
Cordova 這套通信效率并不算低黔衡。我使用 iPod Touch 4 與 iPhone 5 進(jìn)行真機(jī)測(cè)試：JS 做一次請(qǐng)求，Objective-C 收到請(qǐng)求后不做任何的處理腌乡，馬上把請(qǐng)求的數(shù)據(jù)返回給 JS 端盟劫，這樣能大概的測(cè)出一來一往的時(shí)間(從 JS 發(fā)出請(qǐng)求，到 JS 收到結(jié)果的時(shí)間)与纽。每個(gè)真機(jī)我做了三組測(cè)試侣签，每組連續(xù)測(cè)試十次塘装，每組測(cè)試前我都會(huì)把機(jī)器重啟，結(jié)果如下：
iPod Touch 4(時(shí)間單位：毫秒)：
這三十次測(cè)試的平均時(shí)間是：(11.0 + 15.2 + 13.2) / 3 = 13.13 毫秒
iPhone 5(時(shí)間單位：毫秒)
這三十次測(cè)試的平均時(shí)間是：(2.7 + 2.8 + 2.7) / 3 = 2.73 毫秒
這通信的效率雖然比不上原生調(diào)原生影所，但是也是屬于可接受的范圍了蹦肴。
Cordova網(wǎng)址以及框架下載地址：http://cordova.apache.org/
