很早以前就听闻<JavaScriptCore/JavaScriptCore.h>的大名了，只是没有正面接触过，有的也只是间接接触过，比如ReactNative，它渲染界面的核心就是<JavaScriptCore/JavaScriptCore.h>。但是今天就不得不和它有一次正面的接触了，公司要做一个功能，需要Native和js方法之间的互调，所以，本篇文章就说说如何实现。当然，本篇文章说的都是基础。

JSContext

这个东西是干什么的？看看苹果官方给的解释：A JSContextobject represents a JavaScript execution environment. You create and use JavaScript contexts to evaluate JavaScript scripts from Objective-C or Swift code, to access values defined in or calculated in JavaScript, and to make native objects, methods, or functions accessible to JavaScript.翻译一下，大概意思就是：JSContext就是整个JavaScript的上下文，拥有这个上下文，就可以访问JavaScript中的对象或者方法，也可以使用本地的对象或者方法来供JavaScript调用。说白了，通过JSContext就可以实现交互。

获取JSContext

通常情况下可以在webView加载完以后获取:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}

获取到JSContext就可以和js交互了。

js调用原生方法

JSContext提供了两种方式，可以让js调用原生的方法，一种是block，一种是JSExport协议。

使用block交互

例如，有如下网页:

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    <body>
        <button type="button" onclick="playAudio()">播放音频</button>
    </body>
</html>

点击webView中的播放按钮，然后调用原生的播放功能，我们这里定义播放按钮的方法为playAudio，所以在Objective-C这样调用：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"playAudio"] = ^() {
        NSLog(@"js调用本地开始播放");
    };
}

点击播放按钮，控制台如下输出：

2017-04-14 17:42:42.692 JSCoreDemo[30994:1357505] js调用本地开始播放

这里需要注意的是js中的方法名和block中的字符串一定要一样。

这种情况下，是js调用原生是不传参数的，那传参又该如何呢？

例如，如下网页：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        function jsPlayAudio() {
            nativePlayAudio("http://www.baidu.com");
        }
    </script>
</head>
    <body>
        <button type="button" onclick="jsPlayAudio()">给Native传参</button>
    </body>
</html>

这里是显调用js的jsPlayAudio方法，然后调用原生的nativePlayAudio方法，并且传过去一个字符串。在Objective-C这样调用：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"nativePlayAudio"] = ^() {
        NSArray *args = [JSContext currentArguments];
        for (JSValue obj in args) {
            NSLog(@"js传过来的参数是：%@",obj);
        }
    };
}

运行结果如下：

2017-04-14 17:49:19.051 JSCoreDemo[31131:1367134] js传过来的参数是：http://www.baidu.com

通过[JSContext currentArguments]可以获取到所有的参数，因为参数有可能不是一个。所有的参数都会被包装成JSValue对象，查看JSValue可以看出，JSValue可以转换为：Object、Bool、Double、Int32、UInt32、Number、String、Date、Array、Dictionary等类型。并且JSValue还提供了一系列的判断是否是某一类型的方法。具体转换类型如下：

  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)
使用JSExport交互

使用block交互有一个问题，加入我们在js中不是直接调用方法，而是调用某个对象的某个方法，这个时候再使用block就不行了，这就使用到了JSExport。

例如，如下网页：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        function jsPlayAudio() {
            nativeObj.playAudio();
        }
    </script>
</head>
    <body>
        <button type="button" onclick="jsPlayAudio()">给Native传参</button>
    </body>
</html>

nativeObj是在js中定义的对象，当然，js可能并没有创建这个对象。那该如何使用呢？

这里需要我们定义一个协议，并继承JSExport协议，在协议中添加方法，如下：

BridgeModel.h

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol BridgeProtocol <JSExport>
-  (void)playAudio;
@end
@interface BridgeModel : NSObject<BridgeProtocol>
@end

BridgeModel.m

#import "BridgeModel.h"
@implementation BridgeModel
-  (void)playAudio {
    NSLog(@"js调用本地开始播放");
}
@end

需要如此使用：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    
    BridgeModel *model = [[BridgeModel alloc] init];
    context[@"nativeObj"] = model;
}

记住，js中的对象名和Objective-C中的对象名要一致。并且协议方法一定不能是@optional。

输出如下：

2017-04-14 18:12:41.545 JSCoreDemo[31708:1402262] js调用本地开始播放

我们再来看看传参该如何处理：

例如，如下网页：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        function jsPlayAudio() {
            nativeObj.playAudioWithUrlAndType("http://www.baidu.com",666);
        }
    </script>
</head>
    <body>
        <button type="button" onclick="jsPlayAudio()">给Native传参</button>
    </body>
</html>

这里传了两个参数。

来看Objective-C:

@protocol BridgeProtocol <JSExport>
- (void)playAudioWithUrl:(NSString *)url AndType:(NSInteger)type;
@end
- (void)playAudioWithUrl:(NSString *)url AndType:(NSInteger)type {
    NSLog(@"js调用本地开始播放--%@--%ld",url,type);
}

协议中我们定义了一个方法，playAudioWithUrl和AndType拼起来正好是js中的方法，所以，只要原生的方法拼起来和js中的方法一致就可以调用。

输出如下：

2017-04-14 18:22:45.854 JSCoreDemo[31973:1416619] js调用本地开始播放--http://www.baidu.com--666

原生调用js

使用原生调用js方法就很简单了。

例如，如下网页：

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        function endAudio(str) {
            alert('停止'+str);
        }
        function endAudio(str) {
            alert('停止');
        }
    </script>
</head>
    <body>
        <button type="button" onclick="jsPlayAudio()">给Native传参</button>
    </body>
</html>

直接使用JSContext就可以调用：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    [context evaluateScript:@"endAudio()"];
    [context evaluateScript:@"endAudio(abc)"];    
}

当然，想调用某个js对象的方法，也可以直接调用：

[context evaluateScript:@"jsObj.endAudio(abc)"];

另外，你也可以传JSValue对象：

NSString *js = [NSString stringWithFormat:@"endAudio(%@)",[JSValue valueWithDouble:1.11 inContext:context]];
[context evaluateScript:js];

小结

好了，基本的Objective-C和js交互已经说完了，至于更强大的功能，就由你慢慢专研吧。