在Swift中使用JavaScript的方法和技巧
本文作者Nate Cook是一位獨立的Web及移動應用開發者,是繼Mattt大神之後NSHipster的主要維護者,也是非常知名活躍的Swift博主,並且還是支援自動生成Swift線上文件的SwiftDoc.org網站創造者。在本文中,他介紹了在Swift中使用JavaScript的方法和技巧,對於iOS和Web應用工程師有著非常實用的價值,以下為譯文:
在RedMonk釋出的2015年1月程式語言排行榜中,Swift採納率排名迅速飆升,從剛剛面世時的68位躍至22位,Objective-C仍然穩居TOP
10,而JavaScript則憑藉著其在iOS平臺上原生體驗優勢成為了年度最火熱的程式語言。
而早在2013年蘋果釋出的OS X Mavericks和iOS 7兩大系統中便均已加入了JavaScriptCore框架,能夠讓開發者輕鬆、快捷、安全地使用JavaScript語言編寫應用。不論叫好叫罵,JavaScript霸主地位已成事實。開發者們趨之若鶩,JS工具資源層出不窮,用於OS
X和iOS系統等高速虛擬機器也蓬勃發展起來。
JSContext/JSValue
JSContext即JavaScript程式碼的執行環境。一個Context就是一個JavaScript程式碼執行的環境,也叫作用域。當在瀏覽器中執行JavaScript程式碼時,JSContext就相當於一個視窗,能輕鬆執行建立變數、運算乃至定義函式等的JavaScript程式碼:
//Objective-C JSContext *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)"];
//Swift let 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。
JSValue包含了一系列用於獲取Underlying Value的方法,如下表所示:
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-C NSLog(@"Tripled: %d", [tripleNum toInt32]); // Tripled: 30
//Swift println("Tripled: \(tripleNum.toInt32())") // Tripled: 30
下標值(Subscripting Values)
通過在JSContext和JSValue例項中使用下標符號可以輕鬆獲取上下文環境中已存在的值。其中,JSContext放入物件和陣列的只能是字串下標,而JSValue則可以是字串或整數下標。
//Objective-C JSValue *names = context[@"names"]; JSValue *initialName = names[0]; NSLog(@"The first name: %@", [initialName toString]); // The first name: Grace
//Swift let 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-C JSValue *tripleFunction = context[@"triple"]; JSValue *result = [tripleFunction callWithArguments:@[@5] ]; NSLog(@"Five tripled: %d", [result toInt32]);
//Swift let tripleFunction = context.objectForKeyedSubscript("triple") let result = tripleFunction.callWithArguments([5]) println("Five tripled: \(result.toInt32())")
異常處理(Exception Handling)
JSContext還有一個獨門絕技,就是通過設定上下文環境中exceptionHandler的屬性,可以檢查和記錄語法、型別以及出現的執行時錯誤。exceptionHandler是一個回撥處理程式,主要接收JSContext的reference,進行異常情況處理。
//Objective-C context.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
//Swift context.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-C context[@"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('안녕하새요!')"]);
//Swift let 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 class context[@"Person"] = [Person class]; // load Mustache.js NSString *mustacheJSString = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil]; [context evaluateScript:mustacheJSString];
//Swift // export Person class context.setObject(Person.self, forKeyedSubscript: "Person") // load Mustache.js if 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 } ]
//JavaScript var 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 string NSString *peopleJSON = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil]; // get load function JSValue *load = context[@"loadPeopleFromJSON"]; // call with JSON and convert to an NSArray JSValue *loadResult = [load callWithArguments:@[peopleJSON]]; NSArray *people = [loadResult toArray]; // get rendering function and create template JSValue *mustacheRender = context[@"Mustache"][@"render"]; NSString *template = @"{{getFullName}}, born {{birthYear}}"; // loop through people and render Person object as string for (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 string if 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
相關文章
- JavaScript的方法和技巧JavaScript
- JavaScript 中 this 的使用技巧總結JavaScript
- Swift中 Nil Coalescing 運算子的使用技巧Swift
- Swift開發必備技巧:static和class的使用Swift
- 在JavaScript中借用方法JavaScript
- 在 Swift 5 中如何使用原始字串Swift字串
- JavaScript 中 try...catch 的 10 個使用技巧JavaScript
- JavaScript Promise 的使用技巧JavaScriptPromise
- TypeScript在React高階元件中的使用技巧TypeScriptReact元件
- 關於逗號( , )在JS中的使用技巧JS
- 在JavaScript中判斷整型的N種方法JavaScript
- 在 Linux中find命令使用技巧Linux
- KeyPath在Swift中的妙用Swift
- Chrome 中的 JavaScript 斷點設定和除錯技巧ChromeJavaScript斷點除錯
- 正確使用Github 的方法 + Git 和 GitHub 教程和技巧Github
- javascript(js)中的 substring和substr方法JavaScriptJS
- Javascript陣列中shift()和push(),unshift()和pop()操作方法使用JavaScript陣列
- JavaScript 中陣列 sort() 方法的基本使用JavaScript陣列
- Swift中String和Character的使用與總結Swift
- [譯]使用 JavaScript 物件 Rest 和 Spread 的7個技巧JavaScript物件REST
- swift 中的 AnyObject 和 AnySwiftObject
- swift中 Selector的使用Swift
- Swift 中的指標使用Swift指標
- Swift 中的泛型使用Swift泛型
- 在幕後看看Swift中的Map,Filter和Reduce的實現SwiftFilter
- 在 Go 中使用切片的容量和長度的技巧Go
- JavaScript使用技巧精萃JavaScript
- 淺談 JavaScript 中 Array 型別的方法使用JavaScript型別
- VIM 搜尋命令使用方法和技巧
- Protobuf在微信小遊戲開發中的使用技巧遊戲開發
- 這裡有你在程式設計面試中取得成功所需的技巧和方法...程式設計面試
- 在 JavaScript 中,exec() 和 match() 區別JavaScript
- 使用jQuery在javascript中自定義事件jQueryJavaScript事件
- Swift中的方法名的那點事Swift
- PHP 中`Closure`和`Callable`的區別以及在 Redis 訂閱方法中的使用PHPRedis
- javascript中&&運算子和||運算子的使用JavaScript
- Swift中的值和指標Swift指標
- Swift中的CGRect、CGSize和CGPointSwift