非常容易懂的JavaScript和OC交互文章

JavaScript和OC交互

交互的方式有这几种

1. JavaScriptCore框架里面，使用JSContext的evaluateScript
2. webView使用[webView evaluateScript:@"你的JS脚本"]
3. webView里面使用JSContext和OC交互(WKWebView没法拿到JSContext)

1. 前提准备

说明之前，在这里假定你有一定的JavaScript基础。并且已经搭建了简单的测试环境（到Xcode新建项目，把一个JSContext实例给ViewController就行，并且放一个play.js脚本）

下面是JSValue.h里面的文档

   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)  

1. JS给OC传递的所有数据都是JSValue这个OC实例对象
2. OC给JS传递的数据如果有需要可以包装成JSValue给JS使用。

我们假定现在有下面的代码，一个play.js，一个JSContext.m

play.js                      

function foo(value){         
    console.log(value);      
}                                                                   

class Person{
    constructor(name){
        this.name=name;
    }
    eat(someting){
        console.log(this.name+' eat ' +someting);
    }
}

//模仿一下UIViewController
class JSViewController{
    constructor(){
        this.ocObj=null;  //存放待会OC传递过来的视图控制器
        this.ocView=null; //存放JS获取OC视图控制器的视图
    }
    
    setOCObj(obj){
        this.ocObj=obj;
        console.log(obj);
    }
}
let nickel = new Person('nickel');
let list = [1,3,4,5];
let number = 100;
let jsController = new JSViewController();
-------------------------------------------------------------------------------
ViewController.m

-(void)viewDidLoad{
    self.jsContext     = [[JSContext alloc] init];
    //获取脚本路径
    NSString *playPath = [[NSBundle mainBundle] pathForResource:@"play" ofType:@"js"];
    //根据路径加载为NSString
    NSString *playtool = [NSString stringWithContentsOfFile:playPath encoding:NSUTF8StringEncoding error:nil];
    //增加sourceURL 你可以在Safari-开发-Simulator里面进行给play.js打断点，不设置sourceURL只能使用控制台，没法打断点
    NSURL *playURL     = [NSURL URLWithString:playPath];
    [self.jsContext evaluateScript:playtool withSourceURL:playURL];
    
    //已经加载了脚本，开始测试
    JSValue *value = [self.jsContext evaluateScript:@"foo"];
    NSLog(@"%@",value);
}

-------------------------------------------------------------------------------
Xcode控制台输出：
20xx-0x-0x xx:xx:xx.xxx JSOCDemo[37618:8885371] function foo(value){
    console.log(value);
}

---

2. JSValue的使用

现在看看我们怎么OC 调用JS

代码	结果
JSValue *oc_nickel=[self.jsContext evaluateScript:@"nickel"]	oc_nickel是实例变量nickel
JSValue *oc_person=[self.jsContext evaluateScript:@"Person"]	oc_person是JS的Person 类
JSValue *oc_foo=[self.jsContext evaluateScript:@"foo"]	oc_foo 是JS的foo 函数
JSValue *oc_number=[self.jsContext evaluateScript:@"number"]	oc_number是number 变量
JSValue *oc_list=[self.jsContext evaluateScript:@"list"]	oc_list 是JS的list 变量

但是我们一般不会拿到一个Person 类，而是取得一个nickel 实例，foo 函数，number 变量等来使用。拿到变量后怎么使用呢？

代码	结果
[oc_nickel invokeMethod:@"eat" withArguments:@[@"apple"]]	Safari 控制台输出： nickel eat apple
[oc_foo callWithArguments:@[@"test string"]]	Safari 控制台输出：test string
[oc_list invokeMethod:@"pop" withArguments:@[]]	Safari 控制台输出：[1,3,4]

nickel 是一个Person 类的实例，所以"唤醒实例的某个方法"使用invokeMethod:withArguments:
foo 是一个函数，所以"执行这个JS函数"使用callWithArguments:
oc_list 是一个JS 数组，也是一个数组实例，所以"调用实例方法"使用invokeMethod:withArguments:

---

3. JSContext的使用

现在看看我们怎么OC调用JS
例如我们在play.js最后加上

let value = oc_getName('apple');
console.log(value);

oc_getSomething是OC方法，如果JS想要调用OC这个方法怎么办呢？

在ViewController.m里面我们可以这样做就行了

self.jsContext[@"oc_getName"] = ^id(JSValue *js_name){
        //JS 执行oc_getName('apple') 后，js_name 就是'apple'，
        //只不过需要 toString 一下变成NSString，事实上，你不toString 也是可以的，但是容易出错
        return [NSString stringWithFormat:@"name is %@",[js_name toString]];
    };

---

4. 数据的相互传递

假设我们需要把ViewController 传递给JS 进行保存，然后让JS 调用其sayHello: 这个方法该怎么做呢？
代码如下

ViewController.m

-(void)viewDidLoad{
    ...
    [self testPassValue];
}

-(void)sayHello:(NSString *)name{
    NSLog(@"你好,%@",name);
}

-(void)testPassValue{
    JSValue *jsController=[self.jsContext evaluateScript:@"jsController"];
    
    //这里直接把self作为参数传递给JS
    //请在Safari-开发-Simulator 选择相应的JSContext，打开控制台查看，截图如下
    [jsController invokeMethod:@"setOCObj" withArguments:@[self]];
    
    //下面让JS调用OC 我们需要先定义一个方法，让JS能够调用这个控制器的相应方法并传递一个字符串参数
    self.jsContext[@"jsCallOC"] = ^void(JSValue *obj,JSValue *method,JSValue *parameter){
        //首先把JSValue *obj 转化为OC 对象
        id newObj = [obj toObject];
        //调用对象的方法
        SEL sel = NSSelectorFromString([method toString]);
        [newObj performSelector:sel withObject:[parameter toString]]];
    }
}

-------------------------------------------------------------------------------
Xcode控制台输出：
20xx-0x-0x xx:xx:xx.xxx JSOCDemo[37618:8885371] 你好,apple;

这是Safari 输出

结论
JS 把OC 实例对象作为参数传递给OC，需要先toObject 然后才可以调用这个实例对象的方法
JS 把JS对象 传递给OC，也需要先toObject 然后才可以使用，但是你打印，会发现变成了NSDictionary
OC 把NSDictionary 传递给JS，就变成一个JS 的实例对象了，你同样可以打印看看

但是OC 对象持有JS 实例，JS 内存里面又有这个OC 对象，很容易就内存泄漏了，你需要手动释放一方。上面的举例就已经泄露了，你不妨试一试怎么解决这个问题。

上面就是两者交互的详细内容了，可能有写的不好的地方。

联系我

无论是否有疑问欢迎和我一起讨论没我会迅速回复你
地址：feelings0811@wutnew.net 或者 https://github.com/cx478815108