鸿蒙JavaScript GUI技术栈解析

　　介绍

本篇文章为大家展示了鸿蒙JavaScript GUI技术栈解析,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> JS框架层

从最顶层的视角出发,要想用“鸿蒙2.0”渲染出一段动态的文本,你只需要编写如下的XML(类XML)格式代码:

& lt; !——喂。xml——比;>//hello.js & lt;文本 　　出口默认{ 　　数据:{ 　　你好:& # 39;ppt # 39; 　　}, 　　煮(){ 　　这一点。你好=& # 39;核武器& # 39;; 　　} 　　}

这样只要点击文本,就会调用<代码> 方煮沸法,让PPT变成核武器。

这背后发生了什么呢?熟悉Vue 2.0的同学应该会立刻联想到下面这几件事:

    <李>需要对XML的预处理机制,将其转换为JS中的嵌套函数结构。这样只需在运行时做一次简单eval,即可用JS生成符合XML结构的UI。 <李>需要事件机制,使得触发<代码> onclick 事件时能执行相应回调。 <李>需要数据劫持机制,使得对<代码>。hello 赋值时能执行相应回调。
  • 需要能在回调中更新 UI 对象控件。

这几件事分别是怎么实现的呢？简单说来是这样的：

  • XML 预处理依赖现成的 NPM 开源包，从而把 XML 中的 onclick 属性转换为 JS 对象的属性字段。
  • 事件的注册和触发都直接由 C++ 实现。如上一步所获得的 JS 对象 alt="鸿蒙 JavaScript GUI 技术栈解析">

    可以看到论性能，JerryScript 在无 JIT 的引擎中大幅弱于 QuickJS 和 Hermes。如果和开启了 JIT 的 V8 相比，甚至会慢出两个数量级。因此这是非常特定于低端设备的引擎，如果需要支持 React 和 Vue 这类中大型前端项目中标配的基础库（甚至其相应全家桶），仍然可能需要使用更强大的引擎。

    对于 JerryScript 的使用，有同场景重度应用经验的当属 RT-Thread 创始人 @午夜熊，他们和某国内一线厂商合作研发的智能手表就用 JerryScript 实现了 UI，目前产品马上就要上市了。他们团队对 JerryScript 的一些使用反馈也吻合上述评价，概括说来是这样的：

    • JerryScript 在体积和内存占用上，相比 QuickJS 有更好的表现。
    • JerryScript 的稳定性弱于 QuickJS，有一些难以绕过的问题。
    • JerryScript 面对稍大（1M 以上）的 JS 代码库，就有些力不从心了。

    那么师出名门的 QuickJS 和 Facebook 的 Hermes，是否就是无 JIT 式 JS 引擎的下一代标杆了吗？倒也未必如此。这方面可以参考个人的知乎回答：随着 TypeScript 继续普及，会不会出现直接跑 TypeScript 的运行时？这里提到的微软为教育项目 MakeCode 研发的 Static TypeScript，就相当有潜力成为下一代的高性能 JS 系语言环境。通过限定 TypeScript 的静态强类型子集并为其搭建工具链，STS 可以做到无需 JIT 也能接近 V8 的性能水平，同时内存占用比 V8 少两个数量级。这使得 STS 不光能用于开发普通 app 这类 IO 密集的应用，还能顺利在嵌入式硬件上开发小游戏这类更偏计算密集（需逐帧更新渲染）的应用，在工程能力上是一项很大的突破。

    所以说，当「鸿蒙 2.0」还需要熟练开发者勉强搭建出环境跑通 Hello World 时，微软已经让上百万小朋友都能用 TypeScript 在网页里给教学用的掌上游戏机写小游戏入门编程了。这里没什么唱反调的意思，只希望提醒一下我们在为国产「里程碑」欢呼时，也要清醒地看到业界前沿的动向，仅此而已。


    理解 JS 运行时之后，还剩最后一个问题，即 JS 运行时中的各种 Component 对象，是如何被绘制为手表等设备上的像素的呢？

    这就涉及「鸿蒙 2.0」中的另一个 graphic_lite 仓库了。可以认为，这里才是真正执行实际绘制的 GUI。像之前的 TextComponent 等原生组件，都会对应到这里的某种图形库 View。它以一种相当经典的方式，在 C++ 层实现并提供了「Canvas 风格的立即模式 GUI」和「DOM 风格的保留模式 GUI」两套 API 体系（对于立即模式和保留模式 GUI 的区别与联系，可参见个人这篇IMGUI 科普回答）。概括说来，这个图形子系统的要点大致如下：

    • 图形库提供了 UIView 这个 C++ 控件基类，其中有一系列形如 OnClick/OnLongPress/OnDrag 的虚函数。基本每种 JS 中可用的原生 Component 类，都对应于一种 UIView 的子类。
    • 除了各种定制化 View 之外，它还开放了一系列形如 DrawLine /DrawCurve

      鸿蒙JavaScript GUI技术栈解析