（转）iOS 基于JSCore的混合应用开发

作者: 大成小栈 | 来源:发表于2021-04-09 16:08 被阅读0次

仅靠前端技术难以满足移动端的用户需求或体验要求，为了折中让程序即有Native的顺滑体验，又有前端的热更新效果，于是业界开发了小程序框架。很多小程序框架是基于JSCore完成前端与Native交互的方式的，下面我们来了解一下JSCore原理和通信机制，以及JSPatch实现的原理。

JSCore 简介

JSCore的角色是做为一个桥梁，其实就是 Bridge，来协调JS与Native通信的。浏览器内核的模块主要是由渲染引擎和 JS 引擎组成，其中 JSCore 就是一种独立的 JS 引擎。Apple 通过将 WebKit 的 JS 引擎用 OC 封装，提供了一套 JS 运行环境以及 Native 与 JS 数据类型之间的转换桥梁，常用于 OC 和 JS 代码之间的相互调用，也就是说我们可以脱离渲染单独去执行 JS。

JSCore 主要包括如下这些 classes、协议、类结构：

image

JSCore 的结构

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 源码功能。

具体实现为：

image

具体思路和 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 的源码，发现有如下这些常用的方法:

image

通过上述这些方法就可以做很多意想不到的事情，比如动态的变量控制、动态给一个对象增加方法、可以把消息转发给想要的对象、甚至可以动态交换两个方法的实现。也就是说，我们可以在运行期做些事情更改原来的实现，达到热修复的目的。

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

原文地址：
https://zhuanlan.zhihu.com/p/34646281

（转）iOS 基于JSCore的混合应用开发

JSCore 简介

JSCore 的结构

JS 与 OC 的数据类型互换

在 iOS 中执行一段 JS 代码

在 iOS 中调用 JS 方法

在 JS 中面调用 iOS 方法

通过 JSExport 暴露 iOS 方法/属性给 JS

在 iOS 中处理 JS 异常

JS 和端相互通信

JSPatch

Runtime

JSPatch && Runtime

JSPatch 中 JS 如何调用 OC

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读