iOS基于JSCore的混合开发
1、iOS 基于JSCore的混合开发
JSCore 简介
JSCore的角色是做为一个桥梁，其实就是 Bridge，来协调JS与Native通信的。浏览器内核的模块主要是由渲染引擎和 JS 引擎组成，其中 JSCore 就是一种独立的 JS 引擎。Apple 通过将 WebKit 的 JS 引擎用 OC 封装，提供了一套 JS 运行环境以及 Native 与 JS 数据类型之间的转换桥梁，常用于 OC 和 JS 代码之间的相互调用，也就是说我们可以脱离渲染单独去执行 JS。
JSCore 主要包括如下这些 classes、协议、类结构：
JSCore 的结构
在 Native 中可以开启多个线程来异步执行不同的需求，也即，我们可创建多个 JSVirtualMachine 虚拟机，相互隔离互不影响的并行地执行不同 JS 任务。在一个 JSVirtualMachine 中还可以关联多个 JSContext (JS 执行环境上下文)，并通过 JSValue（值对象） 来和 Native 进行数据传递通信，同时可以通过 JSExport (协议) ，将 Native 中遵守此解析的类的方法和属性转换为 JS 的接口供其调用。
JS 与 OC 的数据类型互换
JSValue 可以用来让 JS 和 OC 之间无障碍的数据类型转换，对应转换类型如下：
在 iOS 中执行一段 JS 代码
我们可以通过JSContext 调用evaluateScript方法，从而在 JSCore 中执行一段 JS 脚本：
- (JSValue *)evaluateScript:(NSString *)script;
利用这个特性可以来做一些多端逻辑统一的事情，比如三端(iOS、Android、H5)有一段相当复杂的但原理一样算价逻辑，三端用各自语言自己写一套不但麻烦，而且效率低而且逻辑不一定统一，同时用 OC 去实现复杂计算逻辑也没有 JS 这么灵活高效。
这里就可以利用执行 JS 代码这个特性，将这个逻辑抽成一个 JS 方法，只需要传入特定的入参，直接返回价格，这样的话，3 端可以同时使用这个逻辑，还可以放到远端进行动态更新维护。实现思路大概如下：
// 在 iOS 里面执行 JS
JSContext *jsContext = [[JSContext alloc] init];
[jsContext evaluateScript:@"var num = 500"];
[jsContext evaluateScript:@"var computePrice = function(value)
{ return value * 2 }"];
JSValue *value = [jsContext evaluateScript:@"computePrice(num)"];
int intVal = [value toInt32];
NSLog(@"计算结果为 %d", intVal);
运算结果为：
2018-03-16 20:20:28.006282+0800 JSCoreDemo[4858:196086]
========在 iOS 里面执行 JS 代码========
2018-03-16 20:20:28.006517+0800 JSCoreDemo[4858:196086]
计算结果为 1000
在 iOS 中调用 JS 方法
上面是在 iOS 中执行一段 JS 代码，接下来给大家介绍下如何在 iOS 中调用 H5 中的 JS 方法。比如 H5 中有一个全局方法叫做 nativeCallJS，我们可以通过执行环境的上下文 jsContext[@"nativeCallJS"] 获取该方法并进行调用，类似这样：
// Html 中有一个 JS 全局方法
<script type="text/javascript">
var nativeCallJS = function (parameter) {
alert(parameter);
};
</script>
// 在 iOS 运行 JS 方法
JSContext *jsContext = [webView valueForKeyPath:@“documentView.webView.mainFrame.javaScriptContext”];
JSValue *jsMethod = jsContext[@"nativeCallJS"];
jsMethod callWithArguments:@[ @"Hello JS, I am iOS" ]];
运行就可以看到 Native 执行到了 H5 的 Alter 弹层:
利用这个特性我们可以让 iOS 获取到一些 H5 的信息来处理一些他想处理的东西，譬如先将信息在全局中暴露出来，通过调用方法获取到 使用的版本号、运行的环境信息、端主动处理逻辑(清除缓存、控制运行)等这些事情。
在 JS 中面调用 iOS 方法
这里需要和@"documentView.webView.mainFrame.javaScriptContext"这个 webview 相关特性结合起来，将 H5 调用的方法用 Block 以jsCallNative(调用方法名)为名传递给 JSCore 上下文。
比如我们 H5 中有一个按钮的点击回调是去调用客户端的一个方法，并在方法中输出传入参数，大致是这样实现：
// Html中按钮点击调用一个OC方法
<button type="button"
onclick="jsCallNative('Hello iOS', 'I am JS');">调用OC代码</button>
//Block 以”jsCallNative"为名传递给JavaScript上下文
JSContext *jsContext = [webView valueForKeyPath:
@"documentView.webView.mainFrame.javaScriptContext"];
jsContext[@"jsCallNative"] = ^() {
NSArray *args = [JSContext currentArguments];
for (JSValue *obj in args) {
NSLog(@"%@", obj);
}
};
最终输出是这样：
2018-03-16 20:51:25.590749+0800 JSCoreDemo[4970:219245] ========在 JS 里面调用 iOS 中方法========
2018-03-16 20:51:25.591155+0800 JSCoreDemo[4970:219245] Hello iOS
2018-03-16 20:51:25.591370+0800 JSCoreDemo[4970:219245] I am JS
这个特性真正让 H5 可以享受到很多端上的特性，比如Native 方式的跳转、Native 底层能力(震动、录音、拍照)、扫码、获取设备信息、分享、设置导航栏、调用 Native 封装组件等这些功能，此处大家可以联想 Hybrid 开发模式。
通过 JSExport 暴露 iOS 方法/属性给 JS
通过 JSExport 可以将 iOS 对象的属性方法暴露给 JS 环境，让其使用起来像 JS 对象一样方便。比如我们 OC 中有一个 Person 的类，包含两个属性和一个方法，此处通过让fullName方法使用 JSExport 协议暴露出去，这样在 JS 中是可以直接去调用的。
@protocol PersonProtocol <JSExport>
- (NSString *)fullName;
@end
@interface Person : NSObject <PersonProtocol>
@property (nonatomic, copy) NSString *firstName;
@property (nonatomic, copy) NSString *lastName;
@end
@implementation Person
@synthesize firstName, lastName;
(NSString *)fullName {
return [NSString stringWithFormat:@"%@ %@",self.firstName, self.lastName];
}
@end
// 通过 JSExport 暴露 iOS 方法属性给 JS
Person *person = [[Person alloc] init];
jsContext[@"p"] = person;
person.firstName = @"Fei";
person.lastName = @"Zhu";
NSLog(@"========通过 JSExport 暴露 iOS 方法属性给 JS========");
[jsContext evaluateScript:@"log(p.fullName());"];
[jsContext evaluateScript:@"log(p.firstName);"];
最终运行结果为:
2018-03-16 20:51:17.437688+0800 JSCoreDemo[4970:219193] ========通过 JSExport 暴露 iOS 方法属性给 JS========
2018-03-16 20:51:17.438100+0800 JSCoreDemo[4970:219193] Fei Zhu
2018-03-16 20:51:17.438388+0800 JSCoreDemo[4970:219193] undefined
为什么p.firstName运行后是undefined呢？ 因为在这里没有将其暴露到 Native 环境中，所以就获取不到了。
在 iOS 中处理 JS 异常
通过 JSCore 中的 exceptionHandler 可以很好的解决这个问题，当 JS 运行异常时候，会回调 JSContext 的 exceptionHandler 中设置的 Block，这样就可以在 Block 里将错误信息上传至监控平台。
// 当JavaScript运行时出现异常
// 会回调JSContext的exceptionHandler中设置的Block
JSContext *jsContext = [[JSContext alloc] init];
jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
NSLog(@"JS Error: %@", exception);
};
[jsContext evaluateScript:@"(function errTest(){ return a+1; })();"];
最后输出报错为：
2018-03-17 11:28:07.248778+0800 JSCoreDemo[15007:632219]
========在iOS里面处理 JS 异常========
2018-03-17 11:28:07.252255+0800 JSCoreDemo[15007:632219]
JS Error: ReferenceError: Can't find variable: a
JS 和端相互通信
最近给 Weex 提交了一个《More enhanced about <web> component》 的 PR，大概就是利用上述思路，通过实现 W3C 的 MessageEvent 规范来让组件和 Weex 之间可以进行互相通信，同时通过 loadHTMLString 直接来渲染传入的 html 源码功能。
具体实现为：
具体思路和 Demo 可见 [WEEX-233][iOS]
JSPatch
那能否通过 JS 直接来干预 iOS 代码的运行呢？可以通过一个简单的例子来看上述过程。
用 OC 写了一个蓝色的Hello World, 我们可以通过下发一段 JS 代码将原来蓝色的字体修改成红色并修改文字，将 JS 代码下发代码删除后，又可以恢复原来的蓝色Hello World
主要代码大致如下：
// 一段显示蓝色 Hello World 的 OC 代码
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self simpleTest];
}
- (void)simpleTest {
self.label.text = @"Hello World";
self.label.textColor = [UIColor blueColor];
}
@end
// 一段符合 JSPatch 规则的JS覆盖代码
require('UIColor');
defineClass('ViewController', { simpleTest : function() {
self.label().setText("你的蓝色 Hello World 被我改成红色了");
var red = UIColor.redColor();
self.label().setTextColor(red);
},
})
这里是如何做到的呢？JSPatch 是一个 iOS 动态更新框架，通过引入 JSCore，就可以使用 JS 调用任何原生接口，可以为项目动态更新模块、替换原生代码动态修复 Bug。
原理是，JS 传递字符串给 OC，OC 通过 Runtime 接口替换甚至创建了 OC 类、方法，从而调用了相应的方法。
Runtime
OC 语言中大概 95% 都是 C 相关的写法，为何当时苹果不直接使用 C 来写 iOS 呢？其中一个很大的原因就是 OC 的动态性，有一个很强大的 Runtime (一套 C 语言的 API，底层基于它来实现)，核心是消息分发，Runtime 会根据消息接收者是否能响应该消息而做出不同的反应。简单说，就是OC 方法的实现和调用指针的关系是在运行时才决定的，而非编译期，比如如下这个将foo插入到数组中的第 5 位：
[array insertObject:foo atIndex:5];
在底层比这个实现更加生涩，他通过objc_msgSend这个方法将消息搭配选择器进行发送出去：
objc_msgSend(array, @selector(insertObject:atIndex:), foo, 5);
运行时发消息给对象，消息是如何映射到方法的 ？
简单来说就是，一个对象的 class 保存了方法列表，是一个字典，key 为 selectors，IMPs 为 value，一个 IMP 是指向方法在内存中的实现，selector 和 IMP 之间的关系是在运行时才决定的，非编译时。
- (id)doSomethingWithInt:(int)aInt{}
id doSomethingWithInt(id self, SEL _cmd, int aInt){}
通过看了下 Runtime 的源码，发现有如下这些常用的方法:
通过上述这些方法就可以做很多意想不到的事情，比如动态的变量控制、动态给一个对象增加方法、可以把消息转发给想要的对象、甚至可以动态交换两个方法的实现。也就是说，我们可以在运行期做些事情更改原来的实现，达到热修复的目的。
JSPatch && Runtime
正是由于 OC 语言的动态性，上所有方法的调用/类的生成都通过 OC Runtime 在运行时进行，可通过类名称和方法名的字符串获取该类和该方法，并实例化和调用：
Class class = NSClassFromString("UIViewController");
id viewController = [[class alloc] init];
SEL selector = NSSelectorFromString("viewDidLoad");
[viewController performSelector:selector];
也可以替换某个类的方法为新的实现：
static void newViewDidLoad(id slf, SEL sel) {}
class_replaceMethod(class, selector, newViewDidLoad, @"");
还可以新注册一个类，为类添加方法：
Class cls = objc_allocateClassPair(superCls, "JPObject", 0);
objc_registerClassPair(cls);
class_addMethod(cls, selector, implement, typedesc);
JSPatch 正是利用如上这些好的特性来实现他的热修复功能。
JSPatch 中 JS 如何调用 OC
此处 JSPatch 中的 JS 是如何和任意修改 OC 代码联系起来的呢？大概原理如下：
- JSPatch 在实现中是通过 Require 调用，在 JS 全局作用域上创建一个同名变量，变量指向一个对象，对象属性 __clsName 保存类名，同时表明这个对象是一个 OC Class，通过调用
require(“UIView")，我们就可以使用UIView去调用他上面对应方法了。
UIView = require(“UIView");
var _require = function(clsName) {
if (!global[clsName]) {
global[clsName] = {__clsName: clsName}
}
return global[clsName]
}
- 在 JSCore 执行前，OC 方法的调用均通过新增 Object(JS) 原型方法__c(methodName)完成调用，假如直接调用的话，需要 JS 遍历当前类的所有方法，还要循环找父类的方法直到顶层，无疑是很耗时的，通过
__c()元函数的唯一性，可以每次调用它时候，转发给一个指定函数去执行，就很优雅了。
Object.prototype.__c = function(methodName) {
return function(){
var args = Array.prototype.slice.call(arguments)
return _methodFunc(self.__obj, self.__clsName, methodName,
args, self.__isSuper)
}
}
3.处理好 JS 接口问题后，接下来只需要借助前面 JSCore 的知识就可以做到 JS 和 OC 之间的消息互传了，也即在在_c 函数中通过 JSContex 建立的桥接函数，用 Runtime 接口调用相应方法完成调用：
- JS 中的转发
var _methodFunc = function(instance, clsName, methodName, args, isSuper) {
....
var ret = _OC_callC(clsName, selectorName, args)
return _formatOCToJS(ret)
}
- OC 中的处理
context[@"_OC_callC"] = ^id(NSString *className, NSString *selectorName, JSValue *arguments) {
return callSelector(className, selectorName, arguments, nil, NO);
};
