iOS基于JSCore的混合开发

望岸發表於 2022-7-29 10:35:00

1、iOS 基于JSCore的混合开发
<div>
<div>
<h3>JSCore 简介</h3>
JSCore的角色是做为一个桥梁，其实就是 Bridge，来协调JS与Native通信的。浏览器内核的模块主要是由渲染引擎和 JS 引擎组成，其中 JSCore 就是一种独立的 JS 引擎。Apple 通过将 WebKit 的 JS 引擎用 OC 封装，提供了一套 JS 运行环境以及 Native 与 JS 数据类型之间的转换桥梁，常用于 OC 和 JS 代码之间的相互调用，也就是说我们可以脱离渲染单独去执行 JS。
JSCore 主要包括如下这些 classes、协议、类结构：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1440" data-height="384"><img src="//upload-images.jianshu.io/upload_images/13180946-d28a9b50092e453c.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">image</div>
</div>
<h3>JSCore 的结构</h3>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1440" data-height="866"><img src="//upload-images.jianshu.io/upload_images/13180946-094bf485ffe17610.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">JSCore 的框架结构图</div>
</div>
在 Native 中可以开启多个线程来异步执行不同的需求，也即，我们可创建多个 JSVirtualMachine 虚拟机，相互隔离互不影响的并行地执行不同 JS 任务。在一个 JSVirtualMachine 中还可以关联多个 JSContext (JS 执行环境上下文)，并通过 JSValue（值对象）来和 Native 进行数据传递通信，同时可以通过 JSExport (协议) ，将 Native 中遵守此解析的类的方法和属性转换为 JS 的接口供其调用。
<h3>JS 与 OC 的数据类型互换</h3>
JSValue 可以用来让 JS 和 OC 之间无障碍的数据类型转换，对应转换类型如下：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2152" data-height="1520"><img src="//upload-images.jianshu.io/upload_images/13180946-e55be17100efad82.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
<h3>在 iOS 中执行一段 JS 代码</h3>
我们可以通过JSContext 调用<code>evaluateScript</code>方法，从而在 JSCore 中执行一段 JS 脚本：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-css"><code class="language-css">- (JSValue *)evaluateScript:(NSString *)script;
</code></pre>
</div>
利用这个特性可以来做一些多端逻辑统一的事情，比如三端(iOS、Android、H5)有一段相当复杂的但原理一样算价逻辑，三端用各自语言自己写一套不但麻烦，而且效率低而且逻辑不一定统一，同时用 OC 去实现复杂计算逻辑也没有 JS 这么灵活高效。
这里就可以利用执行 JS 代码这个特性，将这个逻辑抽成一个 JS 方法，只需要传入特定的入参，直接返回价格，这样的话，3 端可以同时使用这个逻辑，还可以放到远端进行动态更新维护。实现思路大概如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-csharp"><code class="language-csharp">// 在 iOS 里面执行 JS
JSContext *jsContext = [[JSContext alloc] init];
;
[jsContext evaluateScript:@"var computePrice = function(value)
 { return value * 2 }"];
JSValue *value = ;
intintVal = [valuetoInt32];
NSLog(@"计算结果为 %d", intVal);
</code></pre>
</div>
运算结果为：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-undefined"><code class="language-undefined">2018-03-16 20:20:28.006282+0800 JSCoreDemo
========在 iOS 里面执行 JS 代码========
2018-03-16 20:20:28.006517+0800 JSCoreDemo
计算结果为 1000
</code></pre>
</div>
<h3>在 iOS 中调用 JS 方法</h3>
上面是在 iOS 中执行一段 JS 代码，接下来给大家介绍下如何在 iOS 中调用 H5 中的 JS 方法。比如 H5 中有一个全局方法叫做 nativeCallJS，我们可以通过执行环境的上下文 <code>jsContext[@"nativeCallJS"]</code> 获取该方法并进行调用，类似这样：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">// Html 中有一个 JS 全局方法
<script type="text/javascript">
var nativeCallJS = function (parameter) {
 alert(parameter);
};
</script>
// 在 iOS 运行 JS 方法
JSContext *jsContext = ;
JSValue *jsMethod = jsContext[@"nativeCallJS"];
jsMethod callWithArguments:@[ @"Hello JS, I am iOS" ]];
</code></pre>
</div>
运行就可以看到 Native 执行到了 H5 的 Alter 弹层:
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="678" data-height="312"><img src="//upload-images.jianshu.io/upload_images/13180946-c09309de6f894f91.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/678/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
利用这个特性我们可以让 iOS 获取到一些 H5 的信息来处理一些他想处理的东西，譬如先将信息在全局中暴露出来，通过调用方法获取到 使用的版本号、运行的环境信息、端主动处理逻辑(清除缓存、控制运行)等这些事情。
<h3>在 JS 中面调用 iOS 方法</h3>
这里需要和<code>@"documentView.webView.mainFrame.javaScriptContext"</code>这个 webview 相关特性结合起来，将 H5 调用的方法用 Block 以<code>jsCallNative(调用方法名)</code>为名传递给 JSCore 上下文。
比如我们 H5 中有一个按钮的点击回调是去调用客户端的一个方法，并在方法中输出传入参数，大致是这样实现：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp">// 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 = ;
 for (JSValue *obj in args) {
 NSLog(@"%@", obj);
 }
};
</code></pre>
</div>
最终输出是这样：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-undefined"><code class="language-undefined">2018-03-16 20:51:25.590749+0800 JSCoreDemo ========在 JS 里面调用 iOS 中方法========
2018-03-16 20:51:25.591155+0800 JSCoreDemo Hello iOS
2018-03-16 20:51:25.591370+0800 JSCoreDemo I am JS
</code></pre>
</div>
这个特性真正让 H5 可以享受到很多端上的特性，比如Native 方式的跳转、Native 底层能力(震动、录音、拍照)、扫码、获取设备信息、分享、设置导航栏、调用 Native 封装组件等这些功能，此处大家可以联想 Hybrid 开发模式。
<h3>通过 JSExport 暴露 iOS 方法/属性给 JS</h3>
通过 JSExport 可以将 iOS 对象的属性方法暴露给 JS 环境，让其使用起来像 JS 对象一样方便。比如我们 OC 中有一个 Person 的类，包含两个属性和一个方法，此处通过让<code>fullName</code>方法使用 JSExport 协议暴露出去，这样在 JS 中是可以直接去调用的。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">@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 ;
}
@end
// 通过 JSExport 暴露 iOS 方法属性给 JS
Person *person = [ init];
jsContext[@"p"] = person;
person.firstName = @"Fei";
person.lastName = @"Zhu";
NSLog(@"========通过 JSExport 暴露 iOS 方法属性给 JS========");
;
;
</code></pre>
</div>
最终运行结果为:
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">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
</code></pre>
</div>
为什么<code>p.firstName</code>运行后是<code>undefined</code>呢？因为在这里没有将其暴露到 Native 环境中，所以就获取不到了。
<h3>在 iOS 中处理 JS 异常</h3>
通过 JSCore 中的 <code>exceptionHandler</code> 可以很好的解决这个问题，当 JS 运行异常时候，会回调 JSContext 的 exceptionHandler 中设置的 Block，这样就可以在 Block 里将错误信息上传至监控平台。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php">// 当JavaScript运行时出现异常
// 会回调JSContext的exceptionHandler中设置的Block

JSContext *jsContext = [ init];

jsContext.exceptionHandler = ^(JSContext *context, JSValue*exception) {
 NSLog(@"JS Error: %@", exception);
};

;
</code></pre>
</div>
最后输出报错为：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-rust"><code class="language-rust">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
</code></pre>
</div>
<h3>JS 和端相互通信</h3>
最近给 Weex 提交了一个《More enhanced about <web> component》的 PR，大概就是利用上述思路，通过实现 W3C 的 MessageEvent 规范来让组件和 Weex 之间可以进行互相通信，同时通过 loadHTMLString 直接来渲染传入的 html 源码功能。
具体实现为：
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1440" data-height="929"><img src="//upload-images.jianshu.io/upload_images/13180946-5b009e3c7e95bfa4.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">image</div>
</div>
具体思路和 Demo 可见 
<h3>JSPatch</h3>
那能否通过 JS 直接来干预 iOS 代码的运行呢？可以通过一个简单的例子来看上述过程。
用 OC 写了一个蓝色的<code>Hello World</code>, 我们可以通过下发一段 JS 代码将原来蓝色的字体修改成红色并修改文字，将 JS 代码下发代码删除后，又可以恢复原来的蓝色<code>Hello World</code>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1388" data-height="872"><img src="//upload-images.jianshu.io/upload_images/13180946-4459809d35370ab5.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
主要代码大致如下：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php">// 一段显示蓝色 Hello World 的 OC 代码
@implementation ViewController
- (void)viewDidLoad {
 ;
 ;
}
- (void)simpleTest {
 self.label.text = @"Hello World";
 self.label.textColor = ;
}
@end

// 一段符合 JSPatch 规则的JS覆盖代码
require('UIColor');
defineClass('ViewController', { simpleTest : function() {
self.label().setText("你的蓝色 Hello World 被我改成红色了");

var red = UIColor.redColor();
self.label().setTextColor(red);
},
})
</code></pre>
</div>
<blockquote>
这里是如何做到的呢？JSPatch 是一个 iOS 动态更新框架，通过引入 JSCore，就可以使用 JS 调用任何原生接口，可以为项目动态更新模块、替换原生代码动态修复 Bug。
</blockquote>
原理是，JS 传递字符串给 OC，OC 通过 Runtime 接口替换甚至创建了 OC 类、方法，从而调用了相应的方法。
<h3>Runtime</h3>
OC 语言中大概 95% 都是 C 相关的写法，为何当时苹果不直接使用 C 来写 iOS 呢？其中一个很大的原因就是 OC 的动态性，有一个很强大的 Runtime (一套 C 语言的 API，底层基于它来实现)，核心是消息分发，Runtime 会根据消息接收者是否能响应该消息而做出不同的反应。简单说，就是OC 方法的实现和调用指针的关系是在运行时才决定的，而非编译期，比如如下这个将<code>foo</code>插入到数组中的第 5 位：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp">;
</code></pre>
</div>
在底层比这个实现更加生涩，他通过<code>objc_msgSend</code>这个方法将消息搭配选择器进行发送出去：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-kotlin"><code class="language-kotlin">objc_msgSend(array, @selector(insertObject:atIndex:), foo, 5);
</code></pre>
</div>
运行时发消息给对象，消息是如何映射到方法的？
简单来说就是，一个对象的 class 保存了方法列表，是一个字典，key 为 selectors，IMPs 为 value，一个 IMP 是指向方法在内存中的实现，selector 和 IMP 之间的关系是在运行时才决定的，非编译时。
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">- (id)doSomethingWithInt:(int)aInt{}
id doSomethingWithInt(id self, SEL _cmd, int aInt){}
</code></pre>
</div>
通过看了下 Runtime 的源码，发现有如下这些常用的方法:
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1440" data-height="903"><img src="//upload-images.jianshu.io/upload_images/13180946-70019fcf34a1993b.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption">image</div>
</div>
通过上述这些方法就可以做很多意想不到的事情，比如动态的变量控制、动态给一个对象增加方法、可以把消息转发给想要的对象、甚至可以动态交换两个方法的实现。也就是说，我们可以在运行期做些事情更改原来的实现，达到热修复的目的。
<h2>JSPatch && Runtime</h2>
正是由于 OC 语言的动态性，上所有方法的调用/类的生成都通过 OC Runtime 在运行时进行，可通过类名称和方法名的字符串获取该类和该方法，并实例化和调用：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">Class class = NSClassFromString("UIViewController");
id viewController = [ init];
SEL selector = NSSelectorFromString("viewDidLoad");
;
</code></pre>
</div>
也可以替换某个类的方法为新的实现：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-kotlin"><code class="language-kotlin">static void newViewDidLoad(id slf, SEL sel) {}
class_replaceMethod(class, selector, newViewDidLoad, @"");
</code></pre>
</div>
还可以新注册一个类，为类添加方法：
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-bash"><code class="language-bash">Class cls = objc_allocateClassPair(superCls, "JPObject", 0);
objc_registerClassPair(cls);
class_addMethod(cls, selector, implement, typedesc);
</code></pre>
</div>
JSPatch 正是利用如上这些好的特性来实现他的热修复功能。
<h2>JSPatch 中 JS 如何调用 OC</h2>
此处 JSPatch 中的 JS 是如何和任意修改 OC 代码联系起来的呢？大概原理如下：
<ol>
<li>JSPatch 在实现中是通过 Require 调用，在 JS 全局作用域上创建一个同名变量，变量指向一个对象，对象属性 __clsName 保存类名，同时表明这个对象是一个 OC Class，通过调用<code>require(“UIView")</code>，我们就可以使用<code>UIView</code>去调用他上面对应方法了。</li>
</ol>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php">UIView = require(“UIView");

var _require = function(clsName) {
if (!global) {
global = {__clsName: clsName}
}
return global
}

</code></pre>
</div>
<ol start="2">
<li>在 JSCore 执行前，OC 方法的调用均通过新增 Object(JS) 原型方法__c(methodName)完成调用，假如直接调用的话，需要 JS 遍历当前类的所有方法，还要循环找父类的方法直到顶层，无疑是很耗时的，通过<code>__c()</code>元函数的唯一性，可以每次调用它时候，转发给一个指定函数去执行，就很优雅了。</li>
</ol>
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="2388" data-height="256"><img src="//upload-images.jianshu.io/upload_images/13180946-753a99eacb7e3e89.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp"></div>
</div>
<div class="image-caption"> </div>
</div>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php">Object.prototype.__c = function(methodName) {
return function(){
var args = Array.prototype.slice.call(arguments)
return _methodFunc(self.__obj, self.__clsName, methodName,
args, self.__isSuper)
}
}

</code></pre>
</div>
3.处理好 JS 接口问题后，接下来只需要借助前面 JSCore 的知识就可以做到 JS 和 OC 之间的消息互传了，也即在在_c 函数中通过 JSContex 建立的桥接函数，用 Runtime 接口调用相应方法完成调用：
<ul>
<li>JS 中的转发</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-php"><code class="language-php">var _methodFunc = function(instance, clsName, methodName, args,isSuper) {
....
var ret =_OC_callC(clsName, selectorName, args)
return _formatOCToJS(ret)
}

</code></pre>
</div>
<ul>
<li>OC 中的处理</li>
</ul>
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-objectivec"><code class="language-objectivec">context[@"_OC_callC"] = ^id(NSString *className, NSString *selectorName, JSValue *arguments) {
return callSelector(className, selectorName, arguments, nil, NO);
};
</code></pre>
</div>
原文地址： 
https://zhuanlan.zhihu.com/p/34646281

</div>

</div> 
来源：https://www.cnblogs.com/xujiahui/p/16531448.html

頁: [1]

琼殿技术论坛's Archiver

iOS基于JSCore的混合开发