本文正在参加「金石计划 . 分割6万现金大奖」

前语

  • Native与H5的混合开发是目前大前端绕不开的技能点, 在实践事务场景中有各式各样的运用
  • 许多一线开发同学都会运用Hybrid混合开发中的各种技能及API, 去完结各种彼此调用的需求
  • 知其然, 知其所以然. 作为一个有寻求的大前端从业者, 咱们一起来探求一下iOS中的Hybrid混合开发的宿世今生.
  • 文章纯手打, 抛砖引玉, 如有错误还请评论区指正, 先行谢过了:)

1. 原生与前端交互

1.1 什么是JavaScriptCore?

  • JavaScriptCore 为原生编程语言 Objective-C、Swift 供给调用 JavaScript 程序的动态才能，还能为 JavaScript 供给原生才能来补偿前端所缺才能。
  • 桥梁作用
  • JavaScriptCore，原本是 WebKit 中用来解说履行 JavaScript 代码的中心引擎
    • 解说履行 JavaScript 代码的引擎自 JavaScript 诞生起就有，不断演进，一向开展到现在
    • 如今苹果公司有 JavaScriptCore 引擎、谷歌有 V8 引擎
    • iOS7 之前，苹果公司没有敞开 JavaScriptCore 引擎。
    • 从 iOS7 开端，苹果公司开端将 JavaScriptCore 结构引进 iOS 体系，并将其作为体系级的结构供给给开发者运用
  • JavaScriptCore 结构的结构名是 JavaScriptCore.framework。

1.2 JavaScriptCore 结构的要害类分解剖析

  • JavaScriptCore 结构主要由 JSVirtualMachine 、JSContext、JSValue 类组成。
  • JSVirturalMachine 的作用，是为 JavaScript 代码的运转供给一个虚拟机环境。
    • JSContext 是 JavaScript 运转环境的上下文，负责原生和 JavaScript 的数据传递。
      • JSValue 是 JavaScript 的值目标，用来记载 JavaScript 的原始值，并供给进行原生值目标转化的接口办法。

iOS老司机的跨端跨平台Hybrid开发Tips

1.3 JavaScript 代码的 JavaScriptCore 和原生运用是怎样交互的呢

  • JavaScriptCore 和原生运用要想交互，首要要有 JSContext。

  • 除了 Block 外，咱们还能够经过 JSExport 协议来完成在 JavaScript 中调用原生代码，

    • 也便是原生代码中让遵从 JSExport 协议的类，能够供 JavaScript 运用。
- (void)testJavaScriptCore {
  // 创立JSVirtualMachine目标
  JSVirtualMachine *jsvm = [JSVirtualMachine new];
  // 运用 jsvm的JSContext目标
  JSContext *ct = [[JSContext alloc] initWithVirtualMachine:jsvm];
  //经过JavaScriptCore在原生代码中调用JavaScript变量
  // 解析履行JavaScript脚本
  [ct evaluateScript:@"var i = 1 + 2"];
  // 转化"i"变量为原生目标
  NSNumber *iNumber = [ct[@"i"] toNumber];
  NSLog(@"var i is %@, iNumber is %@", ct[@"i"], iNumber);
  // 解析履行 JavaScript脚本
  [ct evaluateScript:@"function subtraction(x, y) { return x - y }"];
  // 取得 subtraction 函数
  JSValue *subtraction = ct[@"subtraction"];
  // 传入参数履行subtraction函数
  JSValue *resultValue = [subtraction callWithArguments:@[@(3), @(1)]];
  // 将 subtraction 函数履行的成果转成原生NSNumber来运用
  NSLog(@"function is %@, reusltValue is %@", subtraction, [resultValue toNumber]);
}

iOS老司机的跨端跨平台Hybrid开发Tips

1.4 iOS中Native和JavaScriptCore交互小结

  • 总的来说，JavaScriptCore 供给了前端与原生彼此调用的接口，接口层上主要用的是 JSContext 和 JSValue 这两个类，
  • 经过 JSValue 的 evaluateScript 办法、Block 赋值 context、JSExport 协议导出来到达互通的作用。

2. Hybrid混合开发结构的几个里程牌

2.1 根据JavaScript和WebView的跨渠道计划Cordova

  • Cordova的前身是PoneGap, 后被Apache收买, 成立Cordova项目组
  • Cordova的计划主要是经过H5来构建页面, 再将其显现在各个渠道的WebView中.
  • Cordova官方图:
    iOS老司机的跨端跨平台Hybrid开发Tips

2.1.1 Cordova的优缺点

  • Cordova的优点显而易见, 背靠Apache这样的大厂, 底层代码安稳, 文档明晰, 运用广泛.
  • 可是它默认是不能调用Native的一些服务的(如相机、蓝牙等硬件), 所以需要经过JavaScript进行桥接调用Native的一些API来完结某些根据硬件的功用.
  • 本身的用户体验、性能相对Native控件并不是太流畅, Native更新迭代的过程中简单发生许多适配问题.

2.2 久经考验的React Native

  • React Native是Facebook在2015年4月开源出来的跨渠道开发结构, 是Facebook根据新近开源的JS结构React在原生移动运用渠道的衍生运用.
  • React Native运用JS语言, 类似于H5的JSX, 以及CSS来开发移动App, 降低了运用React结构的H5前端同学的学习成本.
  • 在保存根本烘托才能的基础上, 用原生自带的UI组件完成中心烘托引擎, 然后保证了良好的烘托作用.
  • 可是, 由于React Native的本质是经过JavaScript VM调用原生接口, 相对Native组件通讯较低效, 而且RN结构本身不负责烘托, 是直接经过原生进行烘托的.(参考大厂Airbnb由RN转向Native.)

2.3 Google主推的跨渠道解决计划Flutter

  • Flutter运用Skia烘托引擎, 直接经过CPU、GPU进行图形制作, 不需要依靠任何Native控件.
  • Android操作体系中, 咱们编写的Native控件实践上也是依靠于Skia进行制作烘托, 所以Flutter在某些Android小K做体系上, 乃至还要高于安卓原生(由于安卓原生中的Skia有必要随着操作体系进行更新, 二Flutter SDK中总是保持最新的Skia引擎).
  • 而类似于React Native结构, 有必要经过桥接操作先转成Native控件进行调用, 之后再进行烘托.
    iOS老司机的跨端跨平台Hybrid开发Tips

3. 一些小结

  • 大前端中干流的3种跨渠道结构各有利弊, 选取哪个计划, 仍是要由实践事务场景及项目具体状况决议.
  • 就像咱们评论OOP POP FunctionalProgramming究竟是哪个好?
  • 最后仍是MOP(Market Oriented Programming), 市场和具体事务状况决议了咱们的技能选型, 应避免一味的炫技. 究竟, 技能的成长和事务的开展是相辅相成的双生:)

发文不易, 喜爱点赞的人更有好运气 :), 定期更新+重视不迷路~

ps：欢迎加入笔者18年树立的研讨iOS审阅及前沿技能的三千人扣群：662339934，坑位有限，备注“网友”可被群管经过~

本文正在参加「金石计划 . 分割6万现金大奖」