iOS开发中引入JavaScriptCore引擎教程

JavaScriptCore引擎

我们都知道WebKit是个渲染引擎，简单来说负责页面的布局，绘制以及层的合成，但是WebKit工程中不仅仅有关于渲染相关的逻辑，也集成了默认的javascript引擎－－JavaScriptCore，目前Safari的js引擎也基于JSC构建，不过有一些私有的优化，总体性能相差不大。JSC的执行理念比较符合传统的引擎逻辑，它包括了2部分：解释器和简单方法JIT。解释器比较容易理解，针对某种类型的文件解释执行，在JSC中，它的目标文件是由代码构建的语法树生成的字节码文件，类似于java中的字节码，不过在JSC中字节码的执行是在基于寄存器的虚拟机中而不是基于栈，好处在于减少了次数较多的出栈和入栈操作以及可以方便的使用变量名称进行存储计算；JIT在java虚拟机中应用比较多，针对执行较多次的热点方法进行编译为本地方法，执行效率更高，JSC中的JIT同理。

在iOS7中，我们可以引入JSC框架，这样，我们可以oc层来操作js层代码的执行。另外JSC暴露了许多C层面的接口，我们也可以在底层来构建自定义的js执行环境，操作执行js代码，可控执行可扩展性更强。

hybrid应用构建

既然有了这么给力的引擎，我们在构建hybrid app时可以使用JSC来代替cordova的webViewJavascriptBridge框架完成简易的接口暴露，未来在oc层逐渐可以将UI组件模块化，并通过JSExport暴露接口，由js层负责调用相应模块的初始化方法完成界面的hybrid化。

oc端初始化一个js执行上下文JSContext对象很容易， [[JSContext alloc] init]即可，但是在hybrid app中，通过这种方式初始化JSContext与承载页面的UIWebVIew并不是同一个js环境，因此我们需要获取UIWebView对应的JSContext。但是apple官方并未提供相关的方法，不过这边难不倒某些人，有些人发现，通过KVC的方式可获取UIWebView对应的JSContext，方式如下[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]。一旦获取到对应的JSContext，我们可以做的就有很多了。

// 获取对应的JSContext
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

// 设置JSContext的错误处理函数
[context setExceptionHandler:^(JSContext *context, JSValue *value) {
    NSLog(@"oc catches the exception: %@", value);
}];

// 组件化某个功能类或UIController   
ShowjoyFad *sf=[ShowjoyFad new];

// 暴露改类至JSContext中，在js层的全局属性中我们可以访问该类，如window.showjoyFad
context[@"showjoyFad"]=sf;
context[@"ViewController"] = self;

// 引用js层定义的函数
JSValue * abc = context[@"abc"];
// 执行
JSValue * ret = [abc callWithArguments:@[@"helloworld"]];
NSLog(@"ret: %@",[ret toString]);

通过简单的例子可以很明显的看出JSC通信的简洁性，与android的WebView通信类似，native端可以直接讲接口注入到js上下文中，js在何时的时机调用函数。但是这里涉及到一个比较棘手的问题，JSContext的获取实在UIWebView的那个阶段呢？

我做过一个测试：首先在UIWebView的webViewDidStartLoad阶段创建JSContext并暴露oc端的方法，在加载一级页面时js正常调用oc的方法，而跳转到二级页面中却无法执行oc的方法；而在webViewDidStartLoad阶段由于并未加载完js文件， 因此js层定义的函数在oc端无法执行。

其次，在webVIewDidFinishLoad阶段创建JSContext并透出oc方法，由于加载js阶段在webVIewDidFinishLoad阶段之前，因此一级页面js无法调用oc方法，但是二级页面同理也是如此，但是由于js代码是在iOS的UI线程执行，因此为了让js可以调用oc方法，可以通过在js设置setTimeout来让任务放到执行队列的末端，先执行oc层的webVIewDidFinishLoad方法，待任务完成后再执行js中的异步代码，通过这种方式可以完成js调用oc方法；反过来，oc层调用js函数没有任何问题，因为在webVIewDidFinishLoad阶段js代码已执行完毕（除了异步代码）。

为此，可以通过实现一个简易的框架来完成js层和oc层的交互，为了更好的兼容性，只有在webVIewDidFinishLoad阶段创建JSContext。而在js层则有两种方式来监测并执行oc的方法：

1，在oc层的webVIewDidFinishLoad阶段，暴露oc接口之后，通过JSContext或者UIWebView的stringByEvluateJavascriptString方法构建一个webViewDidFinishLoad事件，js端进行侦听并调用
2，简单的通过setTimeout将js的执行顺序排至队列末端

通过上述方法，构建了一个简单的JSCBridge，但是缺点也很明显，对oc端接口暴露时机有硬性要求，并且js执行oc端的代码始终是异步，有违我们的初衷。



ios上js引擎的使用，javascriptcore和v8

这次试用了两个js引擎，一个是javascriptcore，这个比较方便可以直接引入便使用，另一个是google的v8引擎，这个有点麻烦要先编译通过才行，搞了好一阵才派上用场~倒是学到了好多新知识，哈哈。

先说简单的javascriptcore吧，下载好库引入静态链接库和头文件便可以了。这里有时候会报错说找不到文件。google了一下发下一般是因为xcode本身对外来拷贝文件没有正确引用导致的，解决办法很简单，进入Build Phases 的Compile Source对新添加的头文件进行引用就好了。

接下来便是怎样使用的问题。

先在头文件里引用文件：

import "JavaScriptCore/JavaScriptCore.h"  

然后是构造js的上下文context，这个还蛮重要的东西，具体的原理大家可以自行google，因为我自己理解的也很肤浅，略知皮毛而已。

context = JSGlobalContextCreate(NULL);  

完了以后我把js运行的方法封装成了一个方法，如下：

//js代码运行  
- (NSString *)runsJS:(NSString *)aJSString  
{  
    if (!aJSString) {  
        NSLog(@"[JSC] JS String is empty!");  
        return nil;  
    }  
      
      
    JSStringRef scriptJS = JSStringCreateWithUTF8CString([aJSString UTF8String]);  
    JSValueRef exception = NULL;  
      
    JSValueRef result = JSEvaluateScript(context, scriptJS, NULL, NULL, 0, &exception);  
    NSString *res = nil;  
      
    JSStringRef jstrArg = JSValueToStringCopy(context, result, NULL);  
    res = (NSString*)JSStringCopyCFString(kCFAllocatorDefault, jstrArg);  
      
    JSStringRelease(jstrArg);  
      
    JSStringRelease(scriptJS);  
      
    return res;  
}  

封装完毕便可以顺利使用啦：

NSString *str=[self.engine runJS:@"var str='';for(var i=0;i<2;i++){str= str + '\\n' + i + ' :Hello' + ', World!';}"];  
//NSLog(@"%@",str);  

这便是大体的javascriptcore的使用方法了。


接下来是v8引擎。

v8引擎的编译很痛苦，网上一般比较常见的教程是编译成动态库，lib之类的，但苹果貌似只让用.a的静态库，无形中又增加了负担。我网上搜了好多编译的方法，无非都是些svn check下v8的文件，然后安装python和对应python的一个编译工具scons进行编译。看攻略说，google先在又不提倡用scons了，又开发了另外一种东西....真是能折腾。

我遇到的主要问题是好像编译的时候要搭配一个叫breakpad的东西一起，而这玩意儿又死活装不了，就一直卡在那里了。但比较意外的是最后经竟意外发现在v8根目录还有个make的命令，也可以直接编译.....就这样稀里糊涂的把静态库给整出来了，还隐藏得很深，search了一下才发现在哪里。

这便是粗略的使用方法啦。

这边还有个问题是我在js引擎里使用数组然后返回到ios工程的时候，比如这样：

var test=function(){  
    var val=[];  
    val["1.0"]=1;  
    val["1.1"]=2;  
    val["1.2"]=3;  
    val["1.3"]=4;  
    val["2"]=34;  
 
    var str="var v=this.val; v[\"1.3\"]=v[\"1.0\"]*v[\"1.2\"];";  
    var fun=new Function(str);  
    val["0"]=5;  
    fun();  
    return val;  
}

当我返回的时候只能返回整数位的下标，小数位的全被舍弃了，试验了javascriptcore和v8都一样的结果，想是不是js引擎本身的实现机理问题，路过的大神有懂的麻烦帮忙解决一下