在Swift中使用JavaScript的方法和技巧

時間 2019-11-08

原文原文鏈接

JSContext/JSValuehtml

JSContext即JavaScript代碼的運行環境。一個Context就是一個JavaScript代碼執行的環境，也叫做用域。當在瀏覽器中運行JavaScript代碼時，JSContext就至關於一個窗口，能輕鬆執行建立變量、運算乃至定義函數等的JavaScript代碼： git

//Objective-CJSContext *context = [[JSContext alloc] init];[context evaluateScript:@"var num = 5 + 5"];[context evaluateScript:@"var names = ['Grace', 'Ada', 'Margaret']"];[context evaluateScript:@"var triple = function(value) { return value * 3 }"];JSValue *tripleNum = [context evaluateScript:@"triple(num)"];

//Swiftlet context = JSContext()context.evaluateScript("var num = 5 + 5")context.evaluateScript("var names = ['Grace', 'Ada', 'Margaret']")context.evaluateScript("var triple = function(value) { return value * 3 }")let tripleNum: JSValue = context.evaluateScript("triple(num)")

像JavaScript這類動態語言須要一個動態類型（Dynamic Type），因此正如代碼最後一行所示，JSContext裏不一樣的值均封裝在JSValue對象中，包括字符串、數值、數組、函數等，甚至還有Error以及null和undefined。 github

JSValue包含了一系列用於獲取Underlying Value的方法，以下表所示： json

JavaScript Type	JSValue method	Objective-C Type	Swift Type
string	toString	NSString	String!
boolean	toBool	BOOL	Bool
number	toNumbertoDoubletoInt32 toUInt32 數組	NSNumberdoubleint32_t uint32_t 瀏覽器	NSNumber!DoubleInt32 UInt32 閉包
Date	toDate	NSDate	NSDate!
Array	toArray	NSArray	[AnyObject]!
Object	toDictionary	NSDictionary	[NSObject : AnyObject]!
Object	toObjecttoObjectOfClass:	custom type	custom type

想要檢索上述示例中的tripleNum值，只需使用相應的方法便可：函數

//Objective-CNSLog(@"Tripled: %d", [tripleNum toInt32]);// Tripled: 30

//Swiftprintln("Tripled: \(tripleNum.toInt32())")// Tripled: 30

下標值（Subscripting Values）oop

經過在JSContext和JSValue實例中使用下標符號能夠輕鬆獲取上下文環境中已存在的值。其中，JSContext放入對象和數組的只能是字符串下標，而JSValue則能夠是字符串或整數下標。 ui

//Objective-CJSValue *names = context[@"names"];JSValue *initialName = names[0];NSLog(@"The first name: %@", [initialName toString]);// The first name: Grace

//Swiftlet names = context.objectForKeyedSubscript("names")let initialName = names.objectAtIndexedSubscript(0)println("The first name: \(initialName.toString())")// The first name: Grace

而Swift語言畢竟才誕生不久，因此並不能像Objective-C那樣自如地運用下標符號，目前，Swift的方法僅能實現objectAtKeyedSubscript()和objectAtIndexedSubscript()等下標。

函數調用（Calling Functions）

咱們能夠將Foundation類做爲參數，從Objective-C/Swift代碼上直接調用封裝在JSValue的JavaScript函數。這裏，JavaScriptCore再次發揮了銜接做用。

//Objective-CJSValue *tripleFunction = context[@"triple"];JSValue *result = [tripleFunction callWithArguments:@[@5] ];NSLog(@"Five tripled: %d", [result toInt32]);

//Swiftlet tripleFunction = context.objectForKeyedSubscript("triple")let result = tripleFunction.callWithArguments([5])println("Five tripled: \(result.toInt32())")

異常處理（Exception Handling）

JSContext還有一個獨門絕技，就是經過設定上下文環境中exceptionHandler的屬性，能夠檢查和記錄語法、類型以及出現的運行時錯誤。exceptionHandler是一個回調處理程序，主要接收JSContext的reference，進行異常狀況處理。

//Objective-Ccontext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
   NSLog(@"JS Error: %@", exception);};[context evaluateScript:@"function multiply(value1, value2) { return value1 * value2 "];// JS Error: SyntaxError: Unexpected end of script

//Swiftcontext.exceptionHandler = { context, exception in
    println("JS Error: \(exception)")}context.evaluateScript("function multiply(value1, value2) { return value1 * value2 ")// JS Error: SyntaxError: Unexpected end of script

JavaScript函數調用

瞭解了從JavaScript環境中獲取不一樣值以及調用函數的方法，那麼反過來，如何在JavaScript環境中獲取Objective-C或者Swift定義的自定義對象和方法呢？要從JSContext中獲取本地客戶端代碼，主要有兩種途徑，分別爲Blocks和JSExport協議。

Blocks （塊）

在JSContext中，若是Objective-C代碼塊賦值爲一個標識符，JavaScriptCore就會自動將其封裝在JavaScript函數中，於是在JavaScript上使用Foundation和Cocoa類就更方便些——這再次驗證了JavaScriptCore強大的銜接做用。如今CFStringTransform也能在JavaScript上使用了，以下所示：

//Objective-Ccontext[@"simplifyString"] = ^(NSString *input) {
   NSMutableString *mutableString = [input mutableCopy];
   CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformToLatin, NO);
   CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformStripCombiningMarks, NO);
   return mutableString;};NSLog(@"%@", [context evaluateScript:@"simplifyString('안녕하새요!')"]);

//Swiftlet simplifyString: @objc_block String -> String = { input in
    var mutableString = NSMutableString(string: input) as CFMutableStringRef
    CFStringTransform(mutableString, nil, kCFStringTransformToLatin, Boolean(0))
    CFStringTransform(mutableString, nil, kCFStringTransformStripCombiningMarks, Boolean(0))
    return mutableString}context.setObject(unsafeBitCast(simplifyString, AnyObject.self), forKeyedSubscript: "simplifyString")println(context.evaluateScript("simplifyString('안녕하새요!')"))// annyeonghasaeyo!

須要注意的是，Swift的speedbump只適用於Objective-C block，對Swift閉包無用。要在一個JSContext裏使用閉包，有兩個步驟：一是用@objc_block來聲明，二是將Swift的knuckle-whitening unsafeBitCast()函數轉換爲 AnyObject。

內存管理（Memory Management）

代碼塊能夠捕獲變量引用，而JSContext全部變量的強引用都保留在JSContext中，因此要注意避免循環強引用問題。另外，也不要在代碼塊中捕獲JSContext或任何JSValues，建議使用[JSContext currentContext]來獲取當前的Context對象，根據具體需求將值當作參數傳入block中。

JSExport協議

藉助JSExport協議也能夠在JavaScript上使用自定義對象。在JSExport協議中聲明的實例方法、類方法，不論屬性，都能自動與JavaScrip交互。文章稍後將介紹具體的實踐過程。

JavaScriptCore實踐

咱們能夠經過一些例子更好地瞭解上述技巧的使用方法。先定義一個遵循JSExport子協議PersonJSExport的Person model，再用JavaScript在JSON中建立和填入實例。有整個JVM，還要NSJSONSerialization幹什麼？

PersonJSExports和Person

Person類執行的PersonJSExports協議具體規定了可用的JavaScript屬性。，在建立時，類方法必不可少，由於JavaScriptCore並不適用於初始化轉換，咱們不能像對待原生的JavaScript類型那樣使用var person = new Person()。

//Objective-C// in Person.h -----------------@class Person;@protocol PersonJSExports <JSExport>
    @property (nonatomic, copy) NSString *firstName;
    @property (nonatomic, copy) NSString *lastName;
    @property NSInteger ageToday;
    - (NSString *)getFullName;
    // create and return a new Person instance with `firstName` and `lastName`
    + (instancetype)createWithFirstName:(NSString *)firstName lastName:(NSString *)lastName;@end@interface Person : NSObject <PersonJSExports>
    @property (nonatomic, copy) NSString *firstName;
    @property (nonatomic, copy) NSString *lastName;
    @property NSInteger ageToday;@end// in Person.m -----------------@implementation Person- (NSString *)getFullName {
    return [NSString stringWithFormat:@"%@ %@", self.firstName, self.lastName];}+ (instancetype) createWithFirstName:(NSString *)firstName lastName:(NSString *)lastName {
    Person *person = [[Person alloc] init];
    person.firstName = firstName;
    person.lastName = lastName;
    return person;}@end

//Swift// Custom protocol must be declared with `@objc`@objc protocol PersonJSExports : JSExport {
    var firstName: String { get set }
    var lastName: String { get set }
    var birthYear: NSNumber? { get set }
    func getFullName() -> String
    /// create and return a new Person instance with `firstName` and `lastName`
    class func createWithFirstName(firstName: String, lastName: String) -> Person}// Custom class must inherit from `NSObject`@objc class Person : NSObject, PersonJSExports {
    // properties must be declared as `dynamic`
    dynamic var firstName: String
    dynamic var lastName: String
    dynamic var birthYear: NSNumber?
    init(firstName: String, lastName: String) {
        self.firstName = firstName        self.lastName = lastName    }
    class func createWithFirstName(firstName: String, lastName: String) -> Person {
        return Person(firstName: firstName, lastName: lastName)
    }
    func getFullName() -> String {
        return "\(firstName) \(lastName)"
    }}

配置JSContext

建立Person類以後，須要先將其導出到JavaScript環境中去，同時還需導入Mustache JS庫，以便對Person對象應用模板。

//Objective-C// export Person classcontext[@"Person"] = [Person class];// load Mustache.jsNSString *mustacheJSString = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil];[context evaluateScript:mustacheJSString];

//Swift// export Person classcontext.setObject(Person.self, forKeyedSubscript: "Person")// load Mustache.jsif let mustacheJSString = String(contentsOfFile:..., encoding:NSUTF8StringEncoding, error:nil) {
    context.evaluateScript(mustacheJSString)}

JavaScript數據&處理

如下簡單列出一個JSON範例，以及用JSON來建立新Person實例。

注意：JavaScriptCore實現了Objective-C/Swift的方法名和JavaScript代碼交互。由於JavaScript沒有命名好的參數，任何額外的參數名稱都採起駝峯命名法（Camel-Case），並附加到函數名稱上。在此示例中，Objective-C的方法createWithFirstName:lastName:在JavaScript中則變成了createWithFirstNameLastName()。

//JSON[
    { "first": "Grace",     "last": "Hopper",   "year": 1906 },
    { "first": "Ada",       "last": "Lovelace", "year": 1815 },
    { "first": "Margaret",  "last": "Hamilton", "year": 1936 }]

//JavaScriptvar loadPeopleFromJSON = function(jsonString) {
    var data = JSON.parse(jsonString);
    var people = [];
    for (i = 0; i < data.length; i++) {
        var person = Person.createWithFirstNameLastName(data[i].first, data[i].last);
        person.birthYear = data[i].year;
        people.push(person);
    }
    return people;}

動手一試

如今你只需加載JSON數據，並在JSContext中調用，將其解析到Person對象數組中，再用Mustache模板渲染便可：

//Objective-C// get JSON stringNSString *peopleJSON = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil];// get load functionJSValue *load = context[@"loadPeopleFromJSON"];// call with JSON and convert to an NSArrayJSValue *loadResult = [load callWithArguments:@[peopleJSON]];NSArray *people = [loadResult toArray];// get rendering function and create templateJSValue *mustacheRender = context[@"Mustache"][@"render"];NSString *template = @"{{getFullName}}, born {{birthYear}}";// loop through people and render Person object as stringfor (Person *person in people) {
   NSLog(@"%@", [mustacheRender callWithArguments:@[template, person]]);}// Output:// Grace Hopper, born 1906// Ada Lovelace, born 1815// Margaret Hamilton, born 1936

//Swift// get JSON stringif let peopleJSON = NSString(contentsOfFile:..., encoding: NSUTF8StringEncoding, error: nil) {
    // get load function
    let load = context.objectForKeyedSubscript("loadPeopleFromJSON")
    // call with JSON and convert to an array of `Person`
    if let people = load.callWithArguments([peopleJSON]).toArray() as? [Person] {
        // get rendering function and create template
        let mustacheRender = context.objectForKeyedSubscript("Mustache").objectForKeyedSubscript("render")
        let template = "{{getFullName}}, born {{birthYear}}"
        // loop through people and render Person object as string
        for person in people {
            println(mustacheRender.callWithArguments([template, person]))
        }
    }}// Output:// Grace Hopper, born 1906// Ada Lovelace, born 1815// Margaret Hamilton, born 1936

還可參考：http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=214070747&idx=1&sn=57b45fa293d0500365d9a0a4ff74a4e1#rd

和http://www.it165.net/pro/html/201404/11385.html