标签:des android style blog http io color os ar
一.PhoneGap的简单介绍
1.Cordova,对这个名字大家可能比较陌生,大家肯定听过 PhoneGap 这个名字,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字。
2.Cordova 是一个可以让 JS 与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的插件类。
3.这些插件类都是基于 JS 与 Objective-C 可以互相通信的基础的,这篇文章说说 Cordova 是如何做到 JS 与 Objective-C 互相通信的,解释如何互相通信需要弄清楚下面三个问题:
(1)JS 怎么跟 Objective-C 通信
(2)Objective-C 怎么跟 JS 通信
(3)JS 请求 Objective-C,Objective-C 返回结果给 JS,这一来一往是怎么串起来的
Cordova 现在最新版本是 2.7.0,本文也是基于 2.7.0 版本进行分析的。
二.JS 怎么跟 Objective-C 通信
1.JS 与 Objetive-C 通信的关键代码如下:(cordova.js)
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()) { // 设置请求的数据 execXhr.setRequestHeader(‘cmds‘, iOSExec.nativeFetchMessages()); } // 发起请求 execXhr.send(null); } else { // 如果不支持 XMLHttpRequest,则使用透明 iframe 的方式,设置 iframe 的 src 属性 execIframe = execIframe || createExecIframe(); execIframe.src = "gap://ready"; } } ... }
2.JS 使用了两种方式来与 Objective-C 通信
XMLHttpRequest 发起请求的方式;
通过设置透明的 iframe 的 src 属性;
下面详细介绍一下两种方式是怎么工作的:
JS 端使用 XMLHttpRequest 发起了一个请求:execXhr.open(‘HEAD‘, "/!gap_exec?" + (+new Date()), true);
请求的地址是 /!gap_exec
;
并把请求的数据放在了请求的 header 里面,见这句代码:execXhr.setRequestHeader(‘cmds‘, iOSExec.nativeFetchMessages())
而在 Objective-C 端使用一个 NSURLProtocol 的子类来检查每个请求,如果地址是 /!gap_exec
的话,则认为是 Cordova 通信的请求,直接拦截,拦截后就可以通过分析请求
数据,分发到不同的插件类(CDVPlugin 类的子类)的方法中:
+ (BOOL)canInitWithRequest:(NSURLRequest*)theRequest { NSURL* theUrl = [theRequest URL]; NSString* theScheme = [theUrl scheme]; // 判断请求是否为 /!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; } // 获取请求的数据 NSString* queuedCommandsJSON = [theRequest valueForHTTPHeaderField:@"cmds"]; NSString* requestId = [theRequest valueForHTTPHeaderField:@"rc"]; if (requestId == nil) { NSLog(@"!cordova request missing rc header"); return NO; } ... } ... }
Cordova 中优先使用这种方式,Cordova.js 中的注释有提及为什么优先使用 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
(2)iframe bridge
在 JS 端创建一个透明的 iframe,设置这个 ifame 的 src 为自定义的协议,而 ifame 的 src 更改时,UIWebView 会先回调其 delegate 的 webView:shouldStartLoadWithRequest:navigationType:
方法,关键代码如下:
// UIWebView 加载 URL 前回调的方法,返回 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 的请求,对于 JS 代码中 execIframe.src = "gap://ready" 这句 if ([[url scheme] isEqualToString:@"gap"]) { // 获取请求的数据,并对数据进行分析、处理 [_commandQueue fetchCommandsFromJs]; return NO; } ... }
(3)Objective-C 怎么跟 JS 通信
熟悉 UIWebView 用法的同学都知道 UIWebView 有一个这样的方法 stringByEvaluatingJavaScriptFromString:
,这个方法可以让一个 UIWebView 对象执行一段 JS 代码,这样就可以达到 Objective-C 跟 JS 通信的效果,在 Cordova 的代码中多处用到了这个方法,其中最重要的两处如下:
- (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."); } }
- (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]; } }
(4)怎么串联起来
先看一下 Cordova JS 端请求方法的格式:
// successCallback : 成功回调方法 // failCallback : 失败回调方法 // server : 所要请求的服务名字 // action : 所要请求的服务具体操作 // actionArgs : 请求操作所带的参数 cordova.exec(successCallback, failCallback, service, action, actionArgs);
传进来的这五个参数并不是直接传送给原生代码的,Cordova JS 端会做以下的处理:
1)会为每个请求生成一个叫 callbackId 的唯一标识:这个参数需传给 Objective-C 端,Objective-C 处理完后,会把 callbackId 连同处理结果一起返回给 JS 端
2)以 callbackId 为 key,{success:successCallback, fail:failCallback} 为 value,把这个键值对保存在 JS 端的字典里,successCallback 与 failCallback 这两个参数不需要传给 Objective-C 端,Objective-C 返回结果时带上 callbackId,JS 端就可以根据 callbackId 找到回调方法
3)每次 JS 请求,最后发到 Objective-C 的数据包括:callbackId, service, action, actionArgs
关键代码如下:
unction iOSExec() { ... // 生成一个 callbackId 的唯一标识,并把此标志与成功、失败回调方法一起保存在 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 中 // 这四个参数就是最后发给原生代码的数据 var command = [callbackId, service, action, actionArgs]; commandQueue.push(JSON.stringify(command)); ... } // 获取请求的数据,包括 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 后,会做以下的处理:
1)根据 service 参数找到对应的插件类
2)根据 action 参数找到插件类中对应的处理方法,并把 actionArgs 作为处理方法请求参数的一部分传给处理方法
3)处理完成后,把处理结果及 callbackId 返回给 JS 端,JS 端收到后会根据 callbackId 找到回调方法,并把处理结果传给回调方法
关键代码:
- (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]; // 将请求的处理结果及 callbackId 通过调用 JS 方法返回给 JS 端 NSString* js = [NSString stringWithFormat: @"cordova.require(‘cordova/exec‘).nativeCallback(‘%@‘,%d,%@,%d)", callbackId, status, argumentsAsJSON, keepCallback]; [self evalJsHelper:js]; }
// 根据 callbackId 及是否成功标识,找到回调方法,并把处理结果传给回调方法 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 进行真机测试:JS 做一次请求,Objective-C 收到请求后不做任何的处理,马上把请求的数据返回给 JS 端,这样能大概的测出一来一往的时间(从 JS 发出请求,到 JS 收到结果的时间)。每个真机我做了三组测试,每组连续测试十次,每组测试前我都会把机器重启,结果如下:
组\序号 | 第1次 | 第2次 | 第3次 | 第4次 | 第5次 | 第6次 | 第7次 | 第8次 | 第9次 | 第10次 | 组平均时间 |
---|---|---|---|---|---|---|---|---|---|---|---|
第一组 | 10 | 11 | 8 | 13 | 11 | 9 | 14 | 13 | 9 | 12 | 11.0 |
第二组 | 33 | 13 | 9 | 13 | 11 | 8 | 14 | 12 | 15 | 37 | 15.2 |
第三组 | 20 | 19 | 9 | 16 | 11 | 17 | 13 | 9 | 10 | 8 | 13.2 |
这三十次测试的平均时间是:(11.0 + 15.2 + 13.2) / 3 = 13.13 毫秒
组\序号 | 第1次 | 第2次 | 第3次 | 第4次 | 第5次 | 第6次 | 第7次 | 第8次 | 第9次 | 第10次 | 组平均时间 |
---|---|---|---|---|---|---|---|---|---|---|---|
第一组 | 3 | 3 | 4 | 2 | 3 | 2 | 3 | 2 | 2 | 3 | 2.7 |
第二组 | 7 | 2 | 2 | 2 | 2 | 3 | 2 | 2 | 2 | 4 | 2.8 |
第三组 | 6 | 3 | 2 | 3 | 2 | 2 | 2 | 3 | 2 | 2 | 2.7 |
这三十次测试的平均时间是:(2.7 + 2.8 + 2.7) / 3 = 2.73 毫秒
这通信的效率虽然比不上原生调原生,但是也是属于可接受的范围了。
标签:des android style blog http io color os ar
原文地址:http://www.cnblogs.com/IOS-FU/p/4054607.html