JavaScriptCore 初探

经过前两天的 JavaScript 的粗略学习，来看看 JavaScriptCore 。

JavaScriptCore 是封装了JavaScript和Objective-C桥接的Objective-C API，只要用很少的代码，就可以做到JavaScript调用Objective-C，或者Objective-C调用JavaScript。

• OC 调用 JS

    // JScript
    NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];
    NSString *javaScript = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    // JSContext 初始化
    JSContext *context = [[JSContext alloc] init];
    // 获取
    [context evaluateScript:javaScript];
    // 调用 
    JSValue *function = [context objectForKeyedSubscript:@"testAction"];
    // test result
    JSValue *result = [function callWithArguments:@[@5]];
    NSLog(@"result == %@",result); // ==> 15

test.js

var testAction = function(n) {
    if (n < 1) return;
    if (n === 1) return 1;
    return n + testAction(n - 1);
};

• JS 调用 OC
  UIWebView UIWebViewDelegate

  - (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 通过UIWebView获得网页中的JavaScript执行环境
    JSContext *context = [webView valueForKeyPath:
                          @"documentView.webView.mainFrame.javaScriptContext"];
    // 设置处理异常的block回调
    [context setExceptionHandler:^(JSContext *context, JSValue *exception) {
        NSLog(@"error: %@", exception);
    }];
    // 以 block 形式关联 JavaScript function
    __weak typeof(self) weakSelf = self;
    context[@"alert"] = ^(NSString *str) {
        __strong typeof(weakSelf) strongSelf = weakSelf;
        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Test" message:nil preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *ensureAction = [UIAlertAction actionWithTitle:@"Ensure" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            NSLog(@"Test Ensure");
        }];
        [alertController addAction:ensureAction];
        dispatch_async(dispatch_get_main_queue(), ^{
            [strongSelf presentViewController:alertController animated:YES completion:nil];
        });
    };
}

而 WKWebView 不支持JavaScriptCore的方式但提供message handler的方式为JavaScript 与Objective-C 通信

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

当然得增加此方法的

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
 WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];
[config.userContentController addScriptMessageHandler:self name:@"nativeCustomName"];
// 在用完后记得移除
// [config.userContentController removeScriptMessageHandlerForName:@"nativeCustomName"];

此处再来从 网上对 JavaScriptCore 了解 下 JavaScriptCore 的基本知识点：

• JSValue: 代表一个JavaScript实体，一个JSValue可以表示很多JavaScript 原始类型例如 boolean, integers, doubles，甚至包括对象和函数。
• JSManagedValue: 本质上是一个JSValue，但是可以处理内存管理中的一些特殊情形，它能帮助引用技术和垃圾回收这两种内存管理机制之间进行正确的转换。
• JSContext: 代表JavaScript的运行环境，你需要用JSContext来执行JavaScript代码。所有的JSValue都是捆绑在一个JSContext上的。
• JSExport: 这是一个协议，可以用这个协议来将原生对象导出给JavaScript，这样原生对象的属性或方法就成为了JavaScript的属性或方法，非常神奇。
• JSVirtualMachine: 代表一个对象空间，拥有自己的堆结构和垃圾回收机制。大部分情况下不需要和它直接交互，除非要处理一些特殊的多线程或者内存管理问题。

JSValue

JSValue是我们需要处理的主要数据类型：它可以表示任何可能的Javascript值。一个JSValue被绑定到其存活的JSContext对象中。任何来源于上下文对象的值都是JSValue类型。

[JSValue form Nshipster ](http://nshipster.cn/javascriptcore/)

JSContext

JavaScript 执行的环境，同时也通过 JSVirtualMachine 管理着所有对象的生命周期，每个JSValue都和JSContext相关联并且强引用context。

- (JSValue *)evaluateScript:(NSString *)script;

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

//以 block 形式关联 JavaScript function
self.context[@"log"] = ^(NSString *str) {
        NSLog(@"%@", str);
};

下面这个例子，很好的解释了上面两个方法，以及对 JSValue 的一个大致了解

NSString *jsString = @"function test(a,b) {return a+b}";
[self.context evaluateScript:jsString];
JSValue *testValue = [self.context[@"test"] callWithArguments:@[@5, @1]];
NSLog(@"testValue===%@", [testValue toString]); // 6

JSExport

例如 JS 调用 OC 中的方法的时候，很方便也很熟悉，代理的感觉。

#define JSExportAs(PropertyName, Selector) \
    @optional Selector __JS_EXPORT_AS__##PropertyName:(id)argument; @required Selector

和我们平常使用 Delegate 一样，先定义 protocol ,然后一一对应就好啦

@protocol TestJSExport <JSExport>
/**
 *  testAction JS 中的方法名
 *  void       OC 中的实现方法
 */
JSExportAs (testAction, - (void)testAction);
@end

self.context[@"app"] = self; // 以 JSExport 协议关联 native 的方法

- (void)testAction {
    NSLog(@" JS Call Oc Action");
}

// JS 中的Button 的实现

<input type="button" value="testAction" onclick="app.testAction();" />

暂时记录到此，接下来就是真正的实战啦。

备注参考:

http://nshipster.cn/javascriptcore/
https://hjgitbook.gitbooks.io/ios/content/04-technical-research/04-javascriptcore-note.html