JavaScript和OC交互

交互的方式有這幾種

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

1. 前提準(zhǔn)備

說(shuō)明之前，在這里假定你有一定的JavaScript基礎(chǔ)。并且已經(jīng)搭建了簡(jiǎn)單的測(cè)試環(huán)境（到Xcode新建項(xiàng)目，把一個(gè)JSContext實(shí)例給ViewController就行，并且放一個(gè)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傳遞的所有數(shù)據(jù)都是JSValue這個(gè)OC實(shí)例對(duì)象
2. OC給JS傳遞的數(shù)據(jù)如果有需要可以包裝成JSValue給JS使用。

我們假定現(xiàn)在有下面的代碼，一個(gè)play.js，一個(gè)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;  //存放待會(huì)OC傳遞過(guò)來(lái)的視圖控制器
        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"];
    //根據(jù)路徑加載為NSString
    NSString *playtool = [NSString stringWithContentsOfFile:playPath encoding:NSUTF8StringEncoding error:nil];
    //增加sourceURL 你可以在Safari-開(kāi)發(fā)-Simulator里面進(jìn)行給play.js打斷點(diǎn)，不設(shè)置sourceURL只能使用控制臺(tái)，沒(méi)法打斷點(diǎn)
    NSURL *playURL     = [NSURL URLWithString:playPath];
    [self.jsContext evaluateScript:playtool withSourceURL:playURL];
    
    //已經(jīng)加載了腳本，開(kāi)始測(cè)試
    JSValue *value = [self.jsContext evaluateScript:@"foo"];
    NSLog(@"%@",value);
}

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

2. JSValue的使用

現(xiàn)在看看我們?cè)趺?code>OC 調(diào)用JS

但是我們一般不會(huì)拿到一個(gè)Person 類，而是取得一個(gè)nickel 實(shí)例，foo 函數(shù)，number 變量等來(lái)使用。拿到變量后怎么使用呢？

nickel 是一個(gè)Person 類的實(shí)例，所以"喚醒實(shí)例的某個(gè)方法"使用invokeMethod:withArguments:
foo 是一個(gè)函數(shù)，所以"執(zhí)行這個(gè)JS函數(shù)"使用callWithArguments:
oc_list 是一個(gè)JS 數(shù)組，也是一個(gè)數(shù)組實(shí)例，所以"調(diào)用實(shí)例方法"使用invokeMethod:withArguments:

3. JSContext的使用

現(xiàn)在看看我們?cè)趺?code>OC調(diào)用JS
例如我們?cè)趐lay.js最后加上

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

oc_getSomething是OC方法，如果JS想要調(diào)用OC這個(gè)方法怎么辦呢？

在ViewController.m里面我們可以這樣做就行了

self.jsContext[@"oc_getName"] = ^id(JSValue *js_name){
        //JS 執(zhí)行oc_getName('apple') 后，js_name 就是'apple'，
        //只不過(guò)需要 toString 一下變成NSString，事實(shí)上，你不toString 也是可以的，但是容易出錯(cuò)
        return [NSString stringWithFormat:@"name is %@",[js_name toString]];
    };

4. 數(shù)據(jù)的相互傳遞

假設(shè)我們需要把ViewController 傳遞給JS 進(jìn)行保存，然后讓JS 調(diào)用其sayHello: 這個(gè)方法該怎么做呢？
代碼如下

ViewController.m

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

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

-(void)testPassValue{
    JSValue *jsController=[self.jsContext evaluateScript:@"jsController"];
    
    //這里直接把self作為參數(shù)傳遞給JS
    //請(qǐng)?jiān)赟afari-開(kāi)發(fā)-Simulator 選擇相應(yīng)的JSContext，打開(kāi)控制臺(tái)查看，截圖如下
    [jsController invokeMethod:@"setOCObj" withArguments:@[self]];
    
    //下面讓JS調(diào)用OC 我們需要先定義一個(gè)方法，讓JS能夠調(diào)用這個(gè)控制器的相應(yīng)方法并傳遞一個(gè)字符串參數(shù)
    self.jsContext[@"jsCallOC"] = ^void(JSValue *obj,JSValue *method,JSValue *parameter){
        //首先把JSValue *obj 轉(zhuǎn)化為OC 對(duì)象
        id newObj = [obj toObject];
        //調(diào)用對(duì)象的方法
        SEL sel = NSSelectorFromString([method toString]);
        [newObj performSelector:sel withObject:[parameter toString]]];
    }
}

-------------------------------------------------------------------------------
Xcode控制臺(tái)輸出：
20xx-0x-0x xx:xx:xx.xxx JSOCDemo[37618:8885371] 你好,apple;

這是Safari 輸出

結(jié)論
JS 把OC 實(shí)例對(duì)象作為參數(shù)傳遞給OC，需要先toObject 然后才可以調(diào)用這個(gè)實(shí)例對(duì)象的方法
JS 把JS對(duì)象 傳遞給OC，也需要先toObject 然后才可以使用，但是你打印，會(huì)發(fā)現(xiàn)變成了NSDictionary
OC 把NSDictionary 傳遞給JS，就變成一個(gè)JS 的實(shí)例對(duì)象了，你同樣可以打印看看

但是OC 對(duì)象持有JS 實(shí)例，JS 內(nèi)存里面又有這個(gè)OC 對(duì)象，很容易就內(nèi)存泄漏了，你需要手動(dòng)釋放一方。上面的舉例就已經(jīng)泄露了，你不妨試一試怎么解決這個(gè)問(wèn)題。

上面就是兩者交互的詳細(xì)內(nèi)容了，可能有寫的不好的地方。

聯(lián)系我

無(wú)論是否有疑問(wèn)歡迎和我一起討論沒(méi)我會(huì)迅速回復(fù)你
地址：feelings0811@wutnew.net 或者 https://github.com/cx478815108