您的位置:首页 > 移动开发 > IOS开发

ios - cordova 简介

2016-06-28 15:30 465 查看
Cordova 是一个可以让 JS 与原生代码(包括 Android 的 java,iOS 的 Objective-C 等)互相通信的一个库,并且提供了一系列的插件类,比如 JS 直接操作本地数据库的插件类。

这些插件类都是基于 JS 与 Objective-C 可以互相通信的基础的,这篇文章说说 Cordova 是如何做到 JS 与 Objective-C 互相通信的,解释如何互相通信需要弄清楚下面三个问题:

一、JS 怎么跟 Objective-C 通信?

二、Objective-C 怎么跟 JS 通信?

三、JS 请求 Objective-C,Objective-C 返回结果给 JS,这一来一往是怎么串起来的?

一、JS 怎么跟 Objective-C 通信

JS 与 Objetive-C 通信的关键代码如下:(点击代码框右上角的文件名链接,可直接跳转该文件在 github 的地址)

JS 发起请求                                                         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()) {

              // 设置请求的数据

                execXhr.setRequestHeader('cmds', iOSExec.nativeFetchMessages());

            }

            // 发起请求

            execXhr.send(null);

        } else {

          // 如果不支持 XMLHttpRequest,则使用透明 iframe 的方式,设置 iframe 的 src 属性

            execIframe = execIframe || createExecIframe();

            execIframe.src = "gap://ready";

        }

    }

  ...

}

JS 使用了两种方式来与 Objective-C 通信,一种是使用 XMLHttpRequest 发起请求的方式,另一种则是通过设置透明的
iframe 的 src 属性,下面详细介绍一下两种方式是怎么工作的:

 

XMLHttpRequest bridge

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
类的子类)的方法中:

 UCCDVURLProtocol 拦截请求                             UCCDVURLProtocol.m (github
地址)
+ (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;

        }

          ...

    }

    ...

}

iframe bridge

在 JS 端创建一个透明的 iframe,设置这个 ifame 的 src 为自定义的协议,而 ifame 的 src 更改时,UIWebView 会先回调其 delegate 的 webView:shouldStartLoadWithRequest:navigationType: 方法,关键代码如下:

                                       UIWebView拦截加载                                         CDVViewController.m(github
地址)

// 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;

    }

    ...

}

 

- (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 请求的结果返回给 JS 端
                                          把 JS 请求的结果返回给 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 端请求方法的格式:

// 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。

关键代码如下:

                                           JS 端处理请求                                                     cordova.js(github
地址)
function 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 找到回调方法,并把处理结果传给回调方法

关键代码:

                                             Objective-C 返回结果给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];

  // 将请求的处理结果及 callbackId 通过调用 JS 方法返回给 JS 端

    NSString* js = [NSString stringWithFormat:

                              @"cordova.require('cordova/exec').nativeCallback('%@',%d,%@,%d)",

                              callbackId, status, argumentsAsJSON, keepCallback];

    [self evalJsHelper:js];

}

                                             JS 端根据 callbackId 回调                              cordova.js(github
地址)

// 根据 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 收到结果的时间)。每个真机我做了三组测试,每组连续测试十次,每组测试前我都会把机器重启,结果如下:

iPod Touch 4(时间单位:毫秒):



这三十次测试的平均时间是:(11.0 + 15.2 + 13.2) / 3 = 13.13 毫秒

iPhone 5(时间单位:毫秒)



这三十次测试的平均时间是:(2.7 + 2.8 + 2.7) / 3 = 2.73 毫秒
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: