Integrating JavaScript into Native Applications

JavaScriptCore 简介

iOS7 中新加入的 JavaScriptCore.framework 可能被大多数开发人员所忽略，但是如果你之前就在项目中用过自己编译JavaScriptCore来处理 JavaScript，那么你需要重新关注一下 JavaScriptCore.framework。

JavaScriptCore 是苹果 Safari 浏览器的 JavaScript 引擎，或许你之前听过 Google 的 V8 引擎，在 WWDC 上苹果演示了最新的 Safari，据说 JavaScript 处理速度已经大大超越了 Google 的 Chrome，这就意味着 JavaScriptCore 在性能上也不输 V8 了。

其实 JavaScriptCore.framework 在 OS X 平台上很早就存在的，不过接口都是纯 C 语言的，而在 iOS 平台，苹果没有开放该 framework，所以不少需要在 iOS app 中处理 JavaScript 的都得自己从开源的 WebKit 中编译出 JavaScriptCore.a，接口也是纯 C 语言的。可能是苹果发现越来越多的程序使用了自编译的 JavaScriptCore，干脆做个顺水人情将 JavaScriptCore.framework 开放了，同时还提供了 Objective-C 的接口。

Objetive-C -> JavaScript

 

@import JavaScriptCore;

int main() {
	JSContext *context = [[JSContext alloc] init];
	JSValue *result = [context evaluateScript:@"2 + 2"];
	NSLog(@"2 + 2 = %d", [result toInt32]);
	return 0;
}

 

这里就需要介绍一下概念了，首先是JSContext，一个 Context 就是一个 JavaScript 代码执行的环境，也叫作用域。既然是作用域，那作用域可以是有大有小的：

 

var globalVar = "level0"
function fun1(){
    var value1 = "level1";
    var fun2 = function(){
        var value2 = "level2";
    }
}

在上面的 JS 代码中，一共有三个 JSContext，最外层的 Context 包含 globalVar 对象和 fun1 函数，其实该层 Context 包含一个隐性的对象，叫做：GlobalObject（在浏览器环境下该对象就是 Window），所有属于该 Context 的对象其实是 GloalObject 的属性。fun1 函数内属于第二个 Context，fun2 内为第三个 Context。我们只能在相应的 Context 下去执行对应的代码段。也就是你不能用最外层的 JSContext 直接调用 evaluateScript 方法执行 fun2 函数。但是不管有多少个 Context，他们的 GlobalObject 都是指向的一个对象。

 

大家知道 JS 里面是弱类型的，也就是只有在代码执行时才能知道一个变量具体是什么类型，而 Objective-C 是强类型了，为了处理这种类型差异，JSValue就被引入了。下面是 Objective-C 和 JavaScript 中类型的对照表：

Objective-C type	JavaScript type
nil	undefined
NSNull	null
NSString	string
NSNumber	number, boolean
NSDictionary	Object object
NSArray	Array object
NSDate	Date object
NSBlock *	Function object *
id **	Wrapper object **
Class *	Constructor object *

JSValue 的作用就是在 Objective-C 对象和 JavaScript 对象之间起转换作用：

 

//covert Objective-C Object to JavaScript Object
JSValue *jsObject = [JSValue valueWithObject:objcObject inContext:context];
//Covert JavaScript Object to Objective-C Object
id objcObject = [jsObject toObject];

更多关于在 Objective-C 环境下调用 JavaScript 的实例代码，推荐查看 WebKit 开源项目中 JavaScriptCore 的单元测试代码:https://github.com/WebKit/webkit/blob/master/Source/JavaScriptCore/API/tests/testapi.mm

 

JavaScript -> Objective-C

可以通过两种方式在 JavaScript 中调用 Objective-C：

• Blocks： 对应 JS 函数

• JSExport 协议： 对应 JS 对象

Blocks

 

context[@"makeUIColor"] = ^(NSDictionary *rgbColor){
    float red = [rgbColor[@"red"] floatValue];
    float green = [rgbColor[@"green"] floatValue];
    float blue = [rgbColor[@"blue"] floatValue];
    return [UIColor colorWithRed:(red / 255.0)
                           green:(green / 255.0)
                            blue:(blue / 255.0)
                           alpha:1];
};
JSValue *color = [context evaluateScript:@"makeUIColor({red: 50, green: 150, blue: 250})"];
NSLog(@"color:%@",[color toObject]);

通过 Blocks 实现 JS 调用 Objective-C 时有两点需要注意的问题：

 

1. 不要在 Block 中直接引用使用外面的 JSContext 对象，如果想获取当前的 Context 对象，应该用[JSContext currentContext];，这样来避免循引用问题。
2. 不要在 Block 中直接使用外面的 JSValue 对象，如果需要，把 JSValue 当做参数来传进 Block 中。

JSExport

JSExport 是一个协议，很方便的让 JavaScript 能够访问和操作 Objective-C 对象。

 

#import <objc/runtime.h>
@import JavaScriptCore;
@protocol UIButtonExport <JSExport>
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
@end

- (void)viewDidLoad{
	[super viewDidLoad]
    class_addProtocol([UIButton class], UIButtonExpert);

	UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:@"Hello Objective-C" forState:UIControlStateNormal];
    button.frame = CGRectMake(20, 40, 280, 40);
    [self.view addSubview:button];
    
    JSContext *context = [[JSContext alloc] init];
	context[@"button"] = button;
	[context evaluateScript:@"button.setTitleForState('Hello JavaScript', 0)"];
}

上面代码中，我们申明一个 UIButtonExport 协议，该协议继承于 JSExport，并将setTitle:forState:方法开放到该协议中（只有 JSExport 协议中的方法才能被 JavaScript 识别），然后通过运行时让 UIButton 遵循 UIButtonExport 协议。这样你就可以在 JS 中为 Button 设置 title 了，需要说明一点的是，在 JS 中方法的命名规则与 Objective-C 中有点不一样，如 Objective-C 中的方法-(void)setX:(id)x Y:(id)y Z:(id)z;，加入到 JSExport 协议中，在 JS 中调用就得是setXYZ(x, y, z);，当然如果你不想根据这种命名转换规则，你也可以通过 JSExport.h 中的方法来修改：

 

 

#define JSExportAs(PropertyName, Selector) \
    @optional Selector __JS_EXPORT_AS__##PropertyName:(id)argument; @required Selector
#endif

如 setX:Y:Z 方法，我们可以给他重命名，让 JS 中通过 set3D(x,y,z) 来调用

 

 

JSExportAs(set3D,
     - (void)setX:(id)x Y:(id)y Z:(id)z
);

思考： 理论上我们可以通过运行时，让 Foundation 和 UIKit 等 framework 中所有的类的属性和方法遵循 JSExport 协议，这样就可以直接在 JS 中使用这些 Objective-C 的类。

 

内存管理

Objective-C 使用 ARC，在 JavaScript 中使用是垃圾回收，并且在 JS 中所有的引用都是强引用（strong），当然 JavaScriptCore 新增的 Obj-C 的接口为你省去了很多处理，你在使用的时候只需要注意两点就行了：

1. 将 JSValue 对象存储到 Objective-C 对象中；
2. 将 JS 字段添加到 Objective-C 对象。

 

function ClickHandler(button, callback) {
     this.button = button;
     this.button.onClickHandler = this;
     this.handleEvent = callback;
};

在上面的 js 代码中，我们为 button 添加 onclick 处理事件，在 Objective-C 对用的 Button 类中，我们需要保存该 onclick handler，以便在按钮点击时调用该 handler。

 

 

@implementation MyButton
- (void)setOnClickHandler:(JSValue *)handler
{
     _onClickHandler = handler; // Retain cycle
}
@end

如果我们直接来保存到 handler，就会出现内存泄露，因为 JS 中引用 button 对象是强引用，如果 Button 也用强引用来保存 JS 中的 handler，这就导致了 Retain cycle。我们没法改变 JavaScript 中的强引用机制，只能在 Objective-C 中来处理，没错，在 Objective-C 中弱引用 jhandler，但是弱引用 handler，万一在我点击 Button 调用 click 事件时， onclick handler 已经被释放了怎么办？ 来看看 JavaScriptCore 是怎么做的：

 

 

@implementation MyButton
- (void)setOnClickHandler:(JSValue *)handler
{
     _onClickHandler = [JSManagedValue managedValueWithValue:handler];
     [_context.virtualMachine addManagedReference:_onClickHandler
                                        withOwner:self]
} 
@end

JavaScriptCore 中引入了JSManagedValue类型，该类型主要是作为一个引用桥接，将 JSValue 转为 JSManagedValue 类型后，可以添加到 JSVirtualMachine 对象中，这样能够保证你在使用过程中 JSValue 对象不会被释放掉，当你不再需要该 JSValue 对象后，从 JSVirtualMachine 中移除该 JSManagedValue 对象，JSValue 对象就会被释放并置空。

 

大家不要被这么多对象类型搞晕了，简单一点说，JSVirtualMachine就是一个用于保存弱引用对象的数组，加入该数组的弱引用对象因为会被该数组 retain，所以保证了使用时不会被释放，当数组里的对象不再需要时，就从数组中移除，没有了引用的对象就会被系统释放。

---

到这里要介绍的东西就差不多了，苹果这次开放了 JavaScriptCore，其实给程序开发提供了无限的可能，Objective-C 和 JavaScript 相结合，也一定能够产生出更多的开发模式。如果想继续了解 JavaScriptCore，再次推荐看看 WebKit 项目组 JavaScriptCore 单元测试用例， 还可以研究一下本文中没有介绍的 JavaScriptCore 的 C 接口。

Posted by XiaoYi_HD - 6月 19 2013
如需转载，请注明： 本文来自 Esoft Mobile