浅谈 JavaScriptCore

Posted 2020-08-14 小敏的博客

 

来源：XcodeMen（王瑞华）   

链接：http://t.cn/RVqQI5p

 

本文由我们团队的王瑞华童鞋撰写。

 

---

 

OS X Mavericks 和 ios 7 引入了 javascriptCore 库，它把 WebKit 的 JavaScript 引擎用 Objective-C 封装，提供了简单，快速以及安全的方式接入世界上最流行的语言。在项目的实际开发中，由于需要与 H5 端有交互，所以采用了JavaScriptCore的交互方式，借此参与该项目的机会，对JavaScriptCore也有了一些简单的了解。

 

JSContext/JSValue

 

JSContext 是 JavaScript 的执行环境。所有 JavaScript 执行发生的背景，以及所有 JavaScript 值被绑在这一个上下文中。JSContext 类似于 UIWindow 的概念，所有的执行都在改环境中发生:

 

JSContext *context = [[JSContext alloc] init];

[context evaluateScript:@"var num = 5 + 5"];

[context evaluateScript:@"var names = [‘Grace‘, ‘Ada‘, ‘Margaret‘]"];

[context evaluateScript:@"var triple = function(value) { return value * 3 }"];

JSValue *tripleNum = [context evaluateScript:@"triple(num)"];

NSLog(@"Tripled: %d", [tripleNum toInt32]);

// Tripled: 30

 

代码最后一行，每个 JSValue 起源于 JSContext 和 持有它的强引用。当一个 JSValue 实例方法创造一个新的 JSValue时，该新 JSValue 起源于同一个 JSContext。 JSValue 包装了每一个可能的 JavaScript 值：字符串和数字；数组、对象和方法；甚至错误和特殊的 JavaScript 值诸如 null 和 undefined。

 

OBJECTIVE-C TYPE	JAVASCRIPT TYPE
nil	undefined
NSNull	null
NSString	string
NSNumber	number, boolean
NSDictionary	Object object
NSArray	Array object
NSDate	Date object
NSBlock (1)	Function object (1)
id (2)	Wrapper object (2)
Class (3)	Constructor object (3)

 

下标支持

 

作为下标传递的对象键将被转换为一个 JavaScript 值， 然后值转换为一个用作获取属性名称的字符串。

 

JSValue *names = context[@"names"];

JSValue *initialName = names[0];

NSLog(@"The first name: %@", [initialName toString]);

// The first name: Grace

 

该简易方法对应于以下两个方法：

 

- (JSValue *)objectForKeyedSubscript:(id)key;

- (JSValue *)objectAtIndexedSubscript:(NSUInteger)index;

 

调用方法

 

JSValue 包装了一个 JavaScript 函数，我们可以从 Objective-C 代码中使用 Foundation 类型作为参数来直接调用该函数。

 

JSValue *tripleFunction = context[@"triple"];

JSValue *result = [tripleFunction callWithArguments:@[@5] ];

NSLog(@"Five tripled: %d", [result toInt32]);

 

JavaScript 调用

 

上面说明的 OC 调用 JavaScript 的方法。那么接下来，说明 JavaScript 访问 OC 定义的对象和方法。我粗浅的认为就是在遵守该协议后，JavaScript 就可以调用 OC 实现的方法和属性等。

 

让 JSContext 访问我们的本地客户端代码的方式主要有两种：JSExport 协议和block。

 

JSExport 协议

 

JSExport 提供一个将 OC 中的类、实例方法和属性等导出为 JavaScript 函数的方法。

 

该协议只包含了一个方法：

 

JSExportAs(PropertyName, Selector)

 

即当导出到 JavaScript 时，重命名一个 selector。

 

这就需要熟悉它的做法，当带有一个或多个参数的 seletor 转变为 JavaScript 的属性名字时，在默认情况下一个属性名字将采用以下方式生成：

 

• 所有的冒号将从 Selector 当中移除掉

• 任何一个后边跟着冒号的小写字母开头的单词将被改换为大写。

 

在这种默认的转换方式下，一个 selector 如 doFoo:withBar: 将被导为doFooWithBar 。这种默认的改变有可能被 JSExportAs 宏 所改写，例如将 doFoo:withBar: 导出为 doFoo 。实际写法如下：

 

@protocol MyClassJavaScriptMethods

    JSExportAs(doFoo,

    - (void)doFoo:(id)foo withBar:(id)bar

    );

@end

 

请注意 JSExport 宏只可能适用于带有一个或更多的参数的selector。

 

Blocks

 

当一个 Objective-C block 被赋给 JSContext 里的一个标识符，JavaScriptCore 会自动的把 block 封装在 JavaScript 函数里。如下：

 

JSContext *context = [[JSContext alloc] init];

    context[@"simplifyString"] = ^(NSString *input) {

        NSMutableString *mutableString = [input mutableCopy];

        CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformToLatin, NO);

        return mutableString;

    };

NSLog(@"%@", [context evaluateScript:@"simplifyString(‘什么!‘)"]);

// shén me!

 

JSManagedValue 与内存管理

 

由于 block 可以保有变量引用，而且 JSContext 也强引用它所有的变量，为了避免强引用循环需要特别小心。OC 采用的是引用计数机制，而 JavaScript采用的垃圾回收机制。基于此项机制，便出现了 JSManagedValue ，它的主要用途是存储一个 JSValue，这样可以避免一个保留环的产生。

 

JavaScript 与 OC 交互的实际实例

 

在开发项目中，我们采用了 JavaScript 的方式完成了与 Native 的交互，使得比单纯的运用 UIWebview 的 stringByEvaluatingJavaScriptFromString: 更加高效。

 

如上所述，让 JSContext 访问我们的本地客户端代码的方式主要有两种：JSExport 协议和block。在我们项目中主要采用了 JSExport 的方式去实现。

 

1. JDRWebViewJSExportProtocol 和 JDRWebViewBaseHandler

 

我们的 JDRWebViewBaseHandler 类实现了 JDRWebViewJSExportProtocol 协议，该协议规定了那些方法或者属性可在 JavaScript 中使用。

 

@protocol JDRWebViewJSExportProtocol

 

JSExportAs

(closeForJS /**H5调用的 Webview 关闭方法的别名**/,

@optional

- (void)close:(id)JSON callback:(JSValue*) callback

);

 

JSExportAs

(goBackForJS /**H5调用的 Webview 关闭方法的别名**/,

@optional

- (void)goBack:(id)JSON callback:(JSValue*) callback

);

@end

 

@interface JDRWebViewBaseHandler : NSObject

@property (nonatomic , weak) JDRWebViewController *webViewController;

 

-(instancetype)initWithWebViewController:(JDRWebViewController *) webViewController NS_DESIGNATED_INITIALIZER;

@end

 

@implementation JDRWebViewBaseHandler

-(instancetype)initWithWebViewController:(JDRWebViewController *) webViewController{

    if (self = [super init]) {

        _webViewController = webViewController;

    }

    return self;

}

 

-(void)goBack:(id)JSON callback:(JSValue *)callback {

    WEAK_SELF(weakSelf);

    dispatch_async(dispatch_get_main_queue(), ^{

        STRONG_SELF(strongSelf, weakSelf);

        //判断 backPressCallBack 是否已经设置 ,如果已经设置监听方法 , 则执行 监听回退的 JS 方法

        if ([strongSelf.webViewController.webView canGoBack]) {

            [(UIWebView*)strongSelf.webViewController.webView stopLoading];

            [(UIWebView*)strongSelf.webViewController.webView goBack];

        }else {

            [strongSelf close:nil callback:nil];

        }

    });

}

-(void)close:(id)JSON callback:(JSValue *)callback {

    //目前关闭 WebView 方法不关注 callback 参数

    WEAK_SELF(weakSelf);

    dispatch_async(dispatch_get_main_queue(), ^{

        STRONG_SELF(strongSelf, weakSelf);

        if ([strongSelf.webViewController.navigationController             popViewControllerAnimated:YES] == nil) {

                [strongSelf.webViewController                             dismissViewControllerAnimated:YES completion:nil];

            }

    });

}

@end

 

2. JSContext 配置

 

然后，我们可以用我们已经创建的 JDRWebViewBaseHandler 类，我们需要将其导出到 JavaScript 环境中。

 

self.JSHandler = [[JDRWebViewBaseHandler alloc] initWithWebViewController:self];    

// 以 JSExport 协议关联 native 的方法 *platform* 是暂时定义的关键字

self.context[@"platform"] = self.JSHandler;

 

3.在 H5 页面中书写 JavaScript 函数调用 OC

 

close: function() {

  platform.coselForJS();

}

 

结语

 

通常对于 JavaScript 与 OC 的交互，会采用 JavaScriptCore 包装一层协议方法，原始一点的方法则是通过截取 UIWebView 的协议实现。随着 iOS 8 之后 WKWebview的出现，又出现了一个新的方式，而对于 WKWebView 来说是不支持直接与 JavaScriptCore 交互的。通常采取 WKUserContentController 采用它的协议方法

 

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

 

如果使用 WKWebview 的话，对于 H5 中的 JavaScript 写法又需要改动为 window.webkit.messageHandlers..postMessage()。WKWebView 对于JavaScript 的调用只提供了一种方法：

 

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler

 

目前项目中考虑到 应用 WKWebview 与 UIWebview + JavaScriptCore 调用方式的差异，暂时放弃了对于 WKWebview的支持。

 

参考

 

1. JavaScriptCore

   http://nshipster.cn/javascriptcore/