JavaScriptCore基本概念和基本使用(Swift)

JavaScriptCore简介

iOS 7中加入了JavaScriptCore框架，该框架让Objective-C和JavaScript代码直接交互变得更加简单方便。JavaScriptCore是Cocoa API，用于建立JavaScript与 Swift or Objective- C的桥梁。该框架允许我们在基于Swift or Objective- C的程序中执行 JavaScript程序，也可以插入自定义对象到JavaScript环境中。 JavaScriptCore框架对外暴露的类非常少，只有5个类，分别是JSContext，JSValue，JSManagedValue，JSVirtualMachine，JSExport，其中最核心的是JSContext和JSValue。下面一起来看一下几个部分：

JSContext

JSContext对象就是JavaScript代码执行的环境，也可以理解为作用域(也就是所有的JavaScript执行操作都将在JSContext中发生)。你可以在 Objective-C或者Swift代码中创建和使用 JavaScript contexts来执行(evaluate) JavaScript scripts，访问JavaScript中定义的values，甚至直接在JavaScript中访问原生应用中的对象,方法,函数。一个 JSContext是一个全局环境的实例。

JSContext能够让我们创建新的变量和获取已经存在的变量。在单一的虚拟机(virtual machine)中我们能够拥有多个JSContext。在同一虚拟机(virtual machine)中的两个context可以进行信息交换，但是不能够在两个virtual machine中。如下图所示：

JSContext也用于管理JavaScript虚拟机中对象的生命周期，每一个JSValue实例都将与JSContext通过强引用相关联。只要JSValue存在，JSContext就会保持引用，当JSContext中所有的JSValue被释放掉，那么JSContext也将会被释放，除非之前有被retained。

JSValue

JSValue可以说是JavaScript和Object-C或Swift之间数据互换的桥梁。为了在原生代码(native code)和JavaScript代码之间传递数据，JSContext里的不同的Javascript值都可以封装在JSValue的对象里，包括字符串、数值、数组、函数等，甚至还有Error以及null和undefined；同时这个类型的对象可以方便快速地转化为swift里常用的数据类型，如toBool()、toInt32()、toArray()、toDictionary()等。我们也可以使用JSValue创建JavaScript对象来包装原生自定义类中的对象，或者通过原生的方法或block来提供JavaScript函数的实现。

每一个JSValue实例都是来自于JSContext，JSValue则包含了对context对象的强应用，这点需要特别注意，如果不注意可能会造成内存泄露。当我们通过JSValue调用方法时，返回的新JSValue跟之前的JSValue是属于同一个context的。

每一个JavaScript值也与具体的JSVirtualMachine对象相关联(间接通过context属性)，该对象拥有这底层环境执行的资源。JSValue只能在同一个JSVirtualMachine之传递，如果传递到另外一个JSVirtualMachine，就会产生一个OC异常。之前的图片和相关内容也有提到过。

Converting Between JavaScript and Native Types 具体转换如下图：

JSExport

这是一个协议而不是对象。正如名字含义一样，我们可以使用这个协议暴露原生对象，实例方法，类方法，和属性给JavaScript，这样JavaScript就可以调用相关暴露的方法和属性。遵守JSExport协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来。

Exporting Objective-C Objects to JavaScript

当通过OC实例创建一个JavaScript Value的时候，并且JSValue类没有特别指明赋值协议(copying convention)，JavaScriptCore会通过创建一个JavaScript Wrapper Object来wrap这个OC实例。(对于特定的类，JavaScriptCore会自动赋值values到适当的JavaScript类型，例如，NSString instances 变成 JavaScript strings)。

在JS中，继承是通过原型链来实现的。对于每个输出(export)的OC类，JavaScriptCore都会在对应的JavaScript context中创建一个原型(prototype)。对于NSObject类对应的prototype object是JavaScript Context的Object prototype。对于其他的OC类，JavaScriptCore会创建一个prototype，这个protocol的内部 [Prototype] 属性会指向JavaScriptCore为它的父类创建的那个protocol。通过这种方式，JavaScript wrapper object的原型链就能反应wrapper的类继承关系。

除了原型对象外，JavaScriptCore还为每一个OC类都创建了一个JavaScript constructor。

Exposing Objective-C Methods and Properties to JavaScript

默认情况下，OC类的所有方法和属性都不会被暴露给JavaScript，所以必须要选择要暴露的方法和属性。对于类遵守的任意协议(protocol)，如果该协议包含了JSExport协议，则JavaScriptCore就会认为这个该协议中包含的方法和属性列表是暴露给JavaScript的。这个时候，我们才能在JavaScript调用OC类的exported的方法和属性。

对于每一个暴露的实例方法，JavaScriptCore创建了一个与之对应的函数作为原型对象的属性。对于暴露的OC属性，JavaScriptCore将在原型上创建一个JavaScript的存储属性。对于每一个暴露的类方法，JavaScriptCore将在构造对象上创建一个JavaScript函数。

具体的操作和使用，引用官方的例子：例1解释了采用 JSExport协议暴露属性和方法，例2是JavaScript中进行使用。

解释：OC中的属性声明确定与之对应的JavaScript属性：

如果OC中的属性被声明为readonly，JavaScript属性将有属性writable: false, enumerable: false, configurable: true.

如果OC中的属性被声明为readwrite，JavaScript属性将有属性writable: true, enumerable: true, configurable: true.

包裹OC属性，参数，并由JSValue使用自己的类型根据具体的复制协议(copying conventions)进行转换值。

注意：

如果一个类声明并遵守了JSExport协议，JavaScriptCore将忽略最初固有的copying conventions 。例如：如果我们自定义一个NSString的子类并遵守JSExport协议，而且传递一个类的实例到valueWithObject:方法，其结果是JavaScript包裹自定义类的对象，而不是最初的JavaScript string类型。

Customizing Export of Objective-C Selectors

当公开一个selector并拥有一个或者多个参数，JavaScriptCore将采用下列转换生成对应的函数名：

1）All colons are removed from the selector. selector中所有的冒号都将被去除。

2）Any lowercase letter that had followed a colon is capitalized.所有冒号之后的小写字母都将变为大写字母。

例如：转换Objective-C selector doFoo:withBar:到JavaScript，函数为doFooWithBar。

为了重命名selector暴露给JavaScript,，我们可以使用JSExportAs宏。比如：为了将OC中的selector doFoo:withBar:变成JavaScript函数doFoo,我们使用下列声明：

注意：JSExportAs仅仅适用于selector拥有一个或者多个参数。

JSVirtualMachine

一个JSVirtualMachine实例代表着JavaScript执行的自包含环境。使用这个类有两个目的：支持JavaScript并发执行、为JavaScript与Objective-C或Swift的过渡添加管理内存对象。

Threading and Concurrent JavaScript Execution

每一个JavaScript context（一个JSContext对象）都属于一个虚拟机(virtual machine).每一个虚拟机都能够包含多个contexts,并且允许在两个context之间传递values（一个JSValue对象）。然而，每一个虚拟机又是独特的，我们不能够传递一个value从一个虚拟机的context到另外一个虚拟机的context。

JavaScriptCore API是线程安全的，比如：我们能够在任意线程创建一个JSValue对象，或者执行script（evaluate scripts），所有其他的线程尝试使用相同的虚拟机都将进行等待。为了执行JavaScript多线程的并发，为每一个线程使用一个独立的 JSVirtualMachine。

Managing Memory for Exported Objects

当暴露Objective-C或者Swift object对象给 JavaScript，对象中一定不能够存储 JavaScript值，这种行为将创建循环引用-JSValue对象强引用JavaScript contexts，而JSContext对象强引用我们暴露给JavaScript的原生对象。为了解决这个问题，我们可以使用JSManagedValue类进行conditionally retain 一个Javascript值，并且暴露原生的持有者链给JavaScriptCore虚拟机来管理值。使用addManagedReference:withOwner:和removeManagedReference:withOwner:方法为JavaScriptCore描述你的原生对象图。在去除对象的最后一个管理引用之后，对象能够被JavaScript垃圾回收者安全释放。

JSManagedValue

JSValue的封装，用它可以解决JS和原生代码之间循环引用的问题。添加一个“conditional retain”行为来为值(values)提供自动内存管理。

注意：

不要在需要被暴露给JavaScript的原生对象中存储一个non-managed JSValue。因为JSValue对象将引用JSContext对象，这种行为将导致循环引用，阻止context被释放。

managed value的 “conditional retain”特性保证了只要在下面任意一个条件为true的情况下，managed value的underlying JavaScript value就会被retained.

The JavaScript value is reachable through the JavaScript object graph (that is, not subject to JavaScript garbage collection) .

The JSManagedValue object is reachable through the Objective-C or Swift object graph, as reported to the JavaScriptCore virtual machine using theaddManagedReference:withOwner:method.

如果上述条件都不成立，那JSManagedValue会被释放。

注意：

JSManagedValue对象非常相似于ARC中弱引用潜在的JSValue对象，如果并没有使用addManagedReference:withOwner:方法添加”“conditional retain”行为，当JavaScript的垃圾回收者释放了潜在的JavaScript值时，那么managed value的value属性将被自动置 nil。

下面一起来看一下基本使用：

1：在原生代码中执行JS代码

 // MARK: 直接在原生代码中执行JS代码
    func exampleOne(){

    //当我们创建context的时候，它是空的。并没有变量和函数，所以需要创建上下文(context)中的变量和函数：
        let context = JSContext()    // 1 创建运行JavaScript代码的环境
        context.evaluateScript("var number = 22") // 2 执行一段具体的JavaScript代码,往运行环境里加整形变量
        context.evaluateScript("fruits = ['apple','banana','watermelon']")//添加数组
        // 3 获取context中具体属性的值
        let numberValue:JSValue = context.objectForKeyedSubscript("number")
        print("numberValue is \(numberValue), \(numberValue)")   // numberValue is 22, 22
     
        context.setObject("Jack", forKeyedSubscript: "name")   // 可以获取属性，同样也可以设置属性
        let name = context.objectForKeyedSubscript("name")
        print("name is \(name), \(name.toString())")   // name is Jack, Jack
        
        //我们之前创建的number变量在JavaScript code中是可以获取的
        context.evaluateScript("var anotherNumber = number + 30")
        let anotherNumber = context.objectForKeyedSubscript("anotherNumber")
        print("anotherNumber is \(anotherNumber.toInt32()), \(anotherNumber)")  //anotherNumber is 52, 52
        
        let fruits = context.objectForKeyedSubscript("fruits")//取出JS运行环境里的数组,为JSValue类型
        fruits.setObject("lemon", atIndexedSubscript: 5) //插入数据到数组
        let firstFruits = fruits.objectAtIndexedSubscript(0)
        print("firstFruits is \(firstFruits)") // firstFruits is apple
       
        //MARK: 函数使用 
        // 注册js方法再利用JSValue调用
        context.evaluateScript("var add = function(a,b) {return a + b}")
        let addFunction = context.objectForKeyedSubscript("add")    // 获取函数
        let result = addFunction.callWithArguments([20,30])  // 调用函数，传入所需的参数
        print("result is \(result.toInt32())") //result is 50
        
        //或者直接调用
        let secondResult = context.evaluateScript("add(20,30)")
        print("secondResult is \(secondResult.toInt32())") //secondResult is 50
   }

代码注释已经很清楚，从上面代码我们总结几点：

1、在OC/swift里，所有JavaScript代码都需要在JavaScript运行环境（JSContext）中通过evaluateScript运行；

2、在OC/swift里，所有JavaScript中的方法、对象、属性都需要通过objectForKeyedSubscript来取得，取得所有对象均为JSValue类型

3、通过objectForKeyedSubscript取得的JavaScript中的对象，都遵循该对象在JavaScript中有的所有特性，如上述代码中数组的长度，无数组越界，自动延展的特性

4、通过objectForKeyedSubscript取得的JavaScript中的方法，均可以通过callWithArguments传入参数调用JavaScript中的方法并返回正确的结果（类型仍然为JSValue）

    func exampleTwo(){
 
        let path = NSBundle.mainBundle().pathForResource("testLocal", ofType: "js")
        
        do{
            let testScript = try String(contentsOfFile: path!, encoding: NSUTF8StringEncoding)
            
            // 创建运行环境并指定具体的虚拟机，如果没有指定，系统会自动创建，这是初始化的另外一种方法。
            let context = JSContext(virtualMachine: JSVirtualMachine())
            context.evaluateScript(testScript)
            
            // JacaScript环境中异常检测，一旦出现错误，闭包将会被执行
            context.exceptionHandler = {context,exception in
                print("JS Error:\(exception)")
            }
            
            let factorial = context.objectForKeyedSubscript("factorial")
            let result = factorial.callWithArguments([10])
            print("result is \(result.toInt32())") //result is 3628800
         
        }catch let error as NSError{
            print("\(error),\(error.userInfo)")
   }
        

func exampleTwo(){
 
        let path = NSBundle.mainBundle().pathForResource("testLocal", ofType: "js")
        
        do{
            let testScript = try String(contentsOfFile: path!, encoding: NSUTF8StringEncoding)
            
            // 创建运行环境并指定具体的虚拟机，如果没有指定，系统会自动创建，这是初始化的另外一种方法。
            let context = JSContext(virtualMachine: JSVirtualMachine())
            context.evaluateScript(testScript)
            
            // JacaScript环境中异常检测，一旦出现错误，闭包将会被执行
            context.exceptionHandler = {context,exception in
                print("JS Error:\(exception)")
                context.exception = exception
            }
           
            
            let factorial = context.objectForKeyedSubscript("factorial")
            let result = factorial.callWithArguments([10])
            print("result is \(result.toInt32())") //result is 3628800
            
            //context.evaluateScript("ider.zheng = 21");
         
        }catch let error as NSError{
            print("\(error),\(error.userInfo)")
        }
    }

@objc protocol ItemExport: JSExport{
    var name: String{get set}
    func getNameDescription(message:String)
}

//创建一个Item,让它继承ItemExport协议
@objc class Item:NSObject,ItemExport{

    dynamic var name: String
    init(name:String) {
        self.name = name
    }
    func getNameDescription(message: String) {
       print("\(message) \(self.name)")
    }
}

func exampleForJSExports(){
    
        let context = JSContext(virtualMachine:  JSVirtualMachine())
        let item = Item(name: "Jack")
        
        //非常重要，如果不建立连接，进行注入，那么是不可以进行交互。这一步是将item这个模型对象注入到JS中，在JS就可以通过item调用我们公暴露的方法了。key值可以任意设置。
        context.setObject(item, forKeyedSubscript: "item")
        
        //获取模型对象
        let itemJSValue:JSValue = context.objectForKeyedSubscript("item")
        let name = itemJSValue.objectForKeyedSubscript("name")
        print("\(name)") // Jack
        
        //调用item对象方法有如下几种：
        //1:使用JSValue对象方法
        itemJSValue .invokeMethod("getNameDescription", withArguments: ["My name is"]) //My name is Jack
        //2:直接执行script
        context.evaluateScript("item.getNameDescription('My name is')") //My name is Jack
  }

//MARK:对系统类的操作
@objc protocol UIButtonJSExport:JSExport{
    func setTitle(title: String,forState: UIControlState)
}

func exampleSystemControl(){
        
        //注意：需要在oc和swift混编的桥梁文件中导入 #import ，否则得不到运行时添加协议方法。
        class_addProtocol(UIButton.self, UIButtonJSExport.self)
        
        let button = UIButton(type: .Custom)
        button.frame = CGRect(x: 60, y: 100, width: 200, height: 60)
        button.setTitle("SwiftButton", forState: .Normal)
        button.backgroundColor = UIColor.redColor()
        button.addTarget(self, action: #selector(SwiftTwoViewController.clickButton), forControlEvents: .TouchUpInside)
        view.addSubview(button)
        
        buttonContext = JSContext()
        buttonContext.setObject(button, forKeyedSubscript: "button")
        buttonContext.exceptionHandler = {context,exception in
            JSContext.currentContext().exception = exception
            print(exception)
        }
    }
    
func clickButton(){
       // buttonContext.evaluateScript("button.setTitleForState('JavaScriptButton','.Normal')")
        
        let button = buttonContext.objectForKeyedSubscript("button")
        //这里主要是注意函数名转换规则即可，然后传入需要的参数。
        button.invokeMethod("setTitleForState", withArguments: ["JavaScriptButton",".Normal"])
  }