浅谈 JavaScriptCore

来源：XcodeMen（王瑞华）

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

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

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。

下标支持

作为下标传递的对象键将被转换为一个 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/