JSCore的基本使用

xiaolin 8年前發布 | 6K 次閱讀 iOS開發移動開發 JavaScript

一、簡單介紹

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"</code></pre>
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的用法。 
  二、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 






//用宏轉換下，將JS函數名字指定為add；
JSExportAs(add, - (NSInteger)add:(NSInteger)a and:(NSInteger)b);
@property (nonatomic, assign) NSInteger sum;
@end


   
  第二步：新建一個對象AddJSExportObj，去實現以上協議。 
  AddJSExportObj.h
@interface AddJSExportObj : NSObject






@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);
}






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






- (void)callCamera;
- (NSString*)share:(NSString*)shareString;
@end


   
  第三步：當前VC需要實現WebViewJSExport 
  @interface ViewController ()






@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功能的方式。 
  補充 
  對于WKWebView，目前還沒有能夠拿到JSContent的對象的方式。 
  六、參考資料 
  javascriptcore官方資料 
  JavaScriptCore 使用 
  iOS7新JavaScriptCore框架入門介紹 
    
  來自：http://www.cocoachina.com/ios/20161117/18117.html


                    
                         本文由用戶 xiaolin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1479367061958.html
                         iOS開發 移動開發 JavaScript

JSCore的基本使用

一、簡單介紹

import "JSValue.h"

import "JSManagedValue.h"

import "JSVirtualMachine.h"

import "JSExport.h"</code></pre>

二、OC中調用JS方法

三、JS中調用OC方法

3.1、block調用

3.2、JSExport protocol

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

五、JSCore在Web容器中的使用

六、參考資料

相關經驗

相關資訊

相關文檔

目錄