Tips and tricks for using JavaScript in Swift

The author of this article, Nate Cook, is an independent web and mobile application developer. He is the main maintainer of NSHipster after Mattt, a well-known and active Swift blogger, and the creator of SwiftDoc.org, a website that supports automatic generation of Swift online documentation. In this article, he introduces the methods and techniques of using JavaScript in Swift, which is very practical for iOS and web application engineers. The following is the translation:

In the January 2015 programming language rankings released by RedMonk, Swift's adoption rate ranking soared rapidly, jumping from 68th when it was first released to 22nd, Objective-C still ranked ***0th, and JavaScript became the most popular programming language of the year with its native experience advantage on the iOS platform.

[[132047]]

As early as 2013, Apple released OS X Mavericks and iOS 7, which both added JavaScriptCore framework, allowing developers to easily, quickly and safely write applications using JavaScript. Regardless of praise or criticism, JavaScript's dominance has become a fact. Developers flock to it, and JS tool resources are emerging in an endless stream for OS

High-speed virtual machines such as X and iOS have also flourished.

JSContext/JSValue

JSContext is the running environment of JavaScript code. A Context is an environment in which JavaScript code is executed, also called a scope. When running JavaScript code in a browser, JSContext is equivalent to a window that can easily execute JavaScript code to create variables, perform calculations, and even define functions:

 //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)" )

Dynamic languages ​​like JavaScript require a dynamic type, so as shown in the first line of the code, different values ​​in JSContext are encapsulated in JSValue objects, including strings, numbers, arrays, functions, and even Error, null, and undefined.

JSValue contains a series of methods for obtaining Underlying Value, as shown in the following table:

To retrieve the tripleNum value in the above example, just use the corresponding method:

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

 //Swift  
 println( "Tripled: \(tripleNum.toInt32())" )
 // Tripled: 30  

Subscripting Values

By using subscript notation in JSContext and JSValue instances, you can easily get the existing value in the context. Among them, JSContext can only put string subscripts into objects and arrays, while JSValue can be string or integer subscripts.

 //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  

After all, the Swift language was born not long ago, so it cannot use subscript symbols as freely as Objective-C. Currently, Swift methods can only implement subscripts such as objectAtKeyedSubscript() and objectAtIndexedSubscript().

Calling Functions

We can use the Foundation class as a parameter and directly call the JavaScript function encapsulated in JSValue from Objective-C/Swift code. Here, JavaScriptCore plays a connecting role again.

 //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 also has a unique skill, which is to check and record syntax, type, and runtime errors by setting the exceptionHandler property in the context. ExceptionHandler is a callback handler that mainly receives the reference of JSContext and handles exceptions.

 //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 function calls

Now that we know how to get different values ​​and call functions from the JavaScript environment, how do we get custom objects and methods defined in Objective-C or Swift in the JavaScript environment? There are two main ways to get local client code from JSContext, namely Blocks and JSExport protocols.

Blocks

In JSContext, if the Objective-C code block is assigned to an identifier, JavaScriptCore will automatically encapsulate it in a JavaScript function, making it easier to use Foundation and Cocoa classes on JavaScript - this once again proves the powerful connection of JavaScriptCore. Now CFStringTransform can also be used on JavaScript, as shown below:

 //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!  

It should be noted that Swift's speedbump only applies to Objective-C blocks and is useless for Swift closures. To use a closure in a JSContext, there are two steps: first, declare it with @objc_block, and second, convert Swift's knuckle-whitening unsafeBitCast() function to AnyObject.

Memory Management

Code blocks can capture variable references, and strong references to all JSContext variables are retained in JSContext, so be careful to avoid circular strong reference problems. In addition, do not capture JSContext or any JSValues ​​in code blocks. It is recommended to use [JSContext currentContext] to obtain the current Context object and pass the value as a parameter to the block according to specific needs.

JSExport Protocol

With the help of JSExport protocol, you can also use custom objects on JavaScript. Instance methods and class methods declared in JSExport protocol can automatically interact with JavaScript regardless of their attributes. The specific practice process will be introduced later in this article.

JavaScriptCore Practice

We can better understand how to use the above techniques through some examples. First, define a Person model that conforms to the JSExport subprotocol PersonJSExport, and then use JavaScript to create and fill in the instance in JSON. What is the use of NSJSONSerialization when there is an entire JVM?

PersonJSExports and Person

The PersonJSExports protocol implemented by the Person class specifies the available JavaScript properties. , class methods are required at creation time because JavaScriptCore does not apply initialization conversions and we cannot use var person = new Person() as we would with native JavaScript types.

 //Objective-C  
 // in Person.h ------------------  
 @class Person;
 @protocol PersonJSExports @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 @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)"  
 }
 }

Configuring JSContext

After creating the Person class, you need to export it to the JavaScript environment and import the Mustache JS library to apply templates to the Person object.

 //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 Data & Processing

The following is a simple JSON example and how to create a new Person instance using JSON.

Note: JavaScriptCore implements the interaction between Objective-C/Swift method names and JavaScript code. Because JavaScript does not have named parameters, any additional parameter names are Camel-Case and appended to the function name. In this example, the Objective-C method createWithFirstName:lastName: becomes createWithFirstNameLastName() in JavaScript.

 //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;
 }

Try it yourself

Now you just need to load the JSON data, call it in JSContext, parse it into an array of Person objects, and render it with a Mustache template:

 //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