JSCore的基本使用

邏輯教育-楚陽發表於2018-12-15
JS

一、簡單介紹

JSCore全稱為JavaScriptCore，是蘋果公司在iOS中加入的一個新的framework。該framework為OC與JS程式碼相互操作的提供了極大的便利。該工程預設是沒有匯入工程中的，需要我們手動新增。

圖片描述

新增完成後，我們可以看到JavaScriptCore.h中包含以下5個主要的檔案。

#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"複製程式碼

JSContext: 代表JavaScript的執行環境。你可以建立JSContent在OC環境中執行JavaScript指令碼，同時也可以在JavaScript指令碼中訪問OC中的值或者方法。
JSValue：是OC和JavaScript值相互轉化的橋樑。他提供了很多方法把OC和JavaScript的資料型別進行相互轉化。其一一對應關係如下表所示：

圖片描述

JSManagedValue：JSValue的包裝類。JS和OC物件的記憶體管理輔助物件。由於JS記憶體管理是垃圾回收，並且JS中的物件都是強引用，而OC是引用計數。如果雙方相互引用，勢必會造成迴圈引用，而導致記憶體洩露。我們可以用JSManagedValue儲存JSValue來避免。
JSVirtualMachine： JS執行的虛擬機器。可以支援並行的JavaScript執行，管理JavaScript和OC轉換中的記憶體管理。
JSExport：一個協議，如果JS物件想直接呼叫OC物件裡面的方法和屬性，那麼這個OC物件只要實現這個JSExport協議就可以了。
下面我們通過例項案例來學習JSCore的用法。

推薦一個iOS高階交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。——點選：加入

二、OC中呼叫JS方法

案例一：我在js中定義了一個函式add(a,b)，我們需要在OC中進行呼叫。

-(void)OCCallJS{
    self.context = [[JSContext alloc] init];
    
    NSString *js = @"function add(a,b) {return a+b}";
    [self.context evaluateScript:js];
    JSValue *addJS = self.context[@"add"];
    
    JSValue *sum = [addJS callWithArguments:@[@(10),@(17)]];
    NSInteger intSum = [sum toInt32];
    NSLog(@"intSum: %zi",intSum);
}複製程式碼

三、JS中呼叫OC方法

JS中呼叫OC有兩種方法，第一種為block呼叫，第二種為JSExport protocol。
案例二：我們在OC中定義了一個如下方法，我們需要在JS中對它進行呼叫

-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
    return  a+b;
}複製程式碼

3.1、block呼叫

-(void)JSCallOC_block{
    self.context = [[JSContext alloc] init];
    
    __weak typeof(self) weakSelf = self;
    self.context[@"add"] = ^NSInteger(NSInteger a, NSInteger b){
        return [weakSelf add:a and:b];
    };
    JSValue *sum = [self.context evaluateScript:@"add(4,5)"];
    NSInteger intSum = [sum toInt32];
    NSLog(@"intSum: %zi",intSum);
}複製程式碼

3.2、JSExport protocol

第一步：定義一個遵守JSExport的AddJSExport協議。

@protocol AddJSExport <JSExport>
//用巨集轉換下，將JS函式名字指定為add；
JSExportAs(add, - (NSInteger)add:(NSInteger)a and:(NSInteger)b);
@property (nonatomic, assign) NSInteger sum;
@end複製程式碼

第二步：新建一個物件AddJSExportObj，去實現以上協議。

AddJSExportObj.h
@interface AddJSExportObj : NSObject<AddJSExport>
@property (nonatomic, assign) NSInteger sum;
@end
AddJSExportObj.m
@implementation AddJSExportObj
-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
    return a+b;
}
@end複製程式碼

第三步：在VC中進行JS呼叫

-(void)JSCallOC_JSExport{
    self.context = [[JSContext alloc] init];
    
    //異常處理
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exception){
        [JSContext currentContext].exception = exception;
        NSLog(@"exception:%@",exception);
    };
    
    self.addObj = [[AddJSExportObj alloc] init];
    
    self.context[@"OCAddObj"] = self.addObj;//js中的OCAddObj物件==>OC中的AddJSExportObj物件
    [self.context evaluateScript:@"OCAddObj.sum = OCAddObj.add(2,30)"];
    NSLog(@"%zi",self.addObj.sum);
}複製程式碼

四、一個從服務端下發JS指令碼，執行本地方法的實現思路

案例三:本地定義了一系列方法，可以通過服務端下發js指令碼去控制具體去執行那些方法。這樣就可以在遠端實現對於客戶端的控制。
第一步：預置本地方法

-(void)initJS{
    __weak typeof(self) weakSelf = self;
    self.context[@"execute1"] = ^(){
        [weakSelf execute1];
    };
    self.context[@"execute2"] = ^(){
        [weakSelf execute2];
    };
}
-(void)execute1{
    NSLog(@"execute1");
}

-(void)execute2{
    NSLog(@"execute2");
}複製程式碼

第二步：服務端下發指令碼

-(NSString *)getJS{
    //可以從服務端下發
    //return @"execute1()";
    return @"execute2()";
}複製程式碼

第三步：根據服務端下發指令碼執行

-(void)executeByJs{
    [self initJS];
    NSString *js = [self getJS];
    [self.context evaluateScript:js];
}複製程式碼

五、JSCore在Web容器中的使用

在UIWebView中，我們可以在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中，通過KVC的方式獲取到當前容器的JSContent物件，通過該物件，我們就可以方便的進行hybrid操作。

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];複製程式碼

案例演示：在html中調研OC程式碼中的分享功能和呼叫相機功能。
第一步:HelloWord.html程式碼如下：

function jsCallNative(){
    WBBridge.callCamera();
}
function jsCallNative2(){
    var shareInfo = "分享內容";
    var str = WBBridge.share(shareInfo);
    alert(str);
}

<input type="button" onclick="jsCallNative()" value="jsCallNative" />
<br/>
<input type="button" onclick="jsCallNative2()" value="jsCallNative2" />
<br/>複製程式碼

第二步：實現一個遵守JSExport的協議WebViewJSExport

@protocol WebViewJSExport <JSExport>
- (void)callCamera;
- (NSString*)share:(NSString*)shareString;
@end複製程式碼

第三步：當前VC需要實現WebViewJSExport

@interface ViewController ()<UIWebViewDelegate,WebViewJSExport>
@property (nonatomic, strong) JSContext *context;
@property (nonatomic, strong) UIWebView *webView;
@end
@implementation ViewController
-(void)initWebView{
    self.context = [[JSContext alloc] init];
    
    _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    _webView.delegate = self;
    [self.view addSubview:_webView];
    
    NSURL *url = [[NSURL alloc] initWithString:@"http://localhost:8080/myDiary/HelloWorld.html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    _context = context;
    
    // 將本物件與 JS 中的 WBBridge 物件橋接在一起，在 JS 中 WBBridge 代表本物件
    [_context setObject:self forKeyedSubscript:@"WBBridge"];
    _context.exceptionHandler = ^(JSContext* context, JSValue* exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"異常資訊：%@", exceptionValue);
    };
}

- (void)callCamera{
    NSLog(@"呼叫相機");
}

- (NSString*)share:(NSString*)shareString{
    NSLog(@"分享::::%@",shareString);
    return @"分享成功";
}
@end複製程式碼

這樣我們就可以在webView中呼叫我們native組建了，實現了一個簡單的hybird功能。這就補充了在UIWebView實現hybird功能的方式。還有一種方式就是iOS H5容器的一些探究（一）：UIWebView和WKWebView在的比較和選擇一文中見過的載入隱藏iframe，來攔截請求的方式。

補充
對於WKWebView，目前還沒有能夠拿到JSContent的物件的方式。

六、參考資料

javascriptcore官方資料

JavaScriptCore 使用

iOS7新JavaScriptCore框架入門介紹

七、聯絡方式

推薦一個iOS高階交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。——點選：加入

如果覺得對你還有些用，就關注小編+喜歡這一篇文章。你的支援是我繼續的動力。

下篇文章預告：Weex開發之路（一）：開發環境搭建

文章來源於網路，如有侵權，請聯絡小編刪除。


相關文章