浅谈鸿蒙 JavaScript GUI 技术栈

作者:doodlewind
链接:https://juejin.im/post/6872154561574862855

众所周知,刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言。这标志着继 SpaceX 上天之后,JavaScript 再一次蹭到了新闻联播级的热点。这么好的机会,只拿来阴阳怪气实在太可惜了。作为科普,这篇文章不会拿着放大镜找出代码中的槽点来吹毛求疵,而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事。只要对计算机基础有个大概的了解,应该就不会对本文有阅读上的障碍。

我们已经知道在「鸿蒙 2.0」上,开发者只需编写形如 Vue 组件式的 JavaScript 业务逻辑,即可将其渲染为智能手表等嵌入式硬件上的 UI 界面。这个过程中需要涉及哪些核心的模块呢?这些模块中又有哪些属于自研,哪些使用了现成的开源项目呢?这里将其分为自上而下的三个抽象层来介绍:

  • JS 框架层,可理解为一个大幅简化的 Vue 式 JavaScript 框架
  • JS 引擎与运行时层,可理解为一个大幅简化的 WebKit 式运行时
  • 图形渲染层,可理解为一个大幅简化的 Skia 式图形绘制库

这三个抽象层,整体构成了一套面向嵌入式硬件的 GUI 技术栈。不同于许多高呼「不明觉厉 / 深不可测」的舆论,个人认为至少对于 GUI 部分,国内凡是接触过目前主流 Hybrid 式跨端方案或 JS 运行时研发的一线开发者,都很容易从源码出发来理解它。下面逐层对其做一些解读和分析。

JS 框架层

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

<!-- hello.hml -->
<text>{{hello}}</text>

然后在同级目录编写这样的 JavaScript:

// hello.js
export default {
 data: {
 hello: 'PPT'
 },
 boil() {
 this.hello = '核武器';
 }
}

这样只要点击文本,就会调用 boil 方法,让 PPT 变成 核武器。

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

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

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

  • XML 预处理依赖现成的 NPM 开源包,从而把 XML 中的 onclick 属性转换为 JS 对象的属性字段。
  • 事件的注册和触发都直接由 C++ 实现。如上一步所获得的 JS 对象>JS 引擎与运行时层

    理解了 JS 框架层之后,我们既可以认为「鸿蒙 2.0」选择把高度简化后的 Vue 深度定制进了 C++ 里,也可以认为它紧密围绕着高度简化(且私有)的 DOM 实现了配套的前端框架。因此要想继续探索这套 GUI 的原理,我们就必须进入其 C++ 部分,了解其 JS 引擎与运行时层的实现。

    JS 引擎和运行时之间,有什么区别与联系呢?JS 引擎一般只需符合 ECMA-262 规范,其中没有对任何带「副作用」的平台 API 的定义。从 setTimeoutdocument.getElementById console.log 再到 fs.readFile,这些能执行实际 IO 操作的功能,都需要由「将引擎 API 和平台 API 胶合到一起」的运行时提供。运行时本身的原理并不复杂,譬如在个人的文章《从 JS 引擎到 JS 运行时》中,你就可以看到如何借助现成的QuickJS 引擎,自己搭建一个运行时。

    那么在「鸿蒙 2.0」中,JS 运行时是如何搭建出来的呢?有这么几条重点:

    • JS 引擎选择了 JerryScript,这是一款由三星开发的嵌入式 JS 引擎。
    • 每种形如 <text> <div> 的 XML 标签组件,都对应一个绑定到 JerryScript 上的 C++ Component 类,如 TextComponent DivComponent 等。
    • 除 UI 原生对象外,还有一系列在 JS 中以 @system 为前缀的 built-in 模块,它们提供了 JS 中可用的 Router / Audio / File 等平台能力(参见 ohos_module_config.h)。

    这里特别值得一提的是 Router。它和 vue-router 等常见 Web 平台路由的实现原理有很大区别,是专门在运行时内深度定制的(参见

    浅谈鸿蒙 JavaScript GUI 技术栈

扫一扫手机访问