鸿蒙GUI引擎,浅谈鸿蒙JavaScriptGUI技术栈.pdf

浅浅谈谈鸿鸿蒙蒙 JavaScript GUI 技技术术栈栈

作者：doodlewind

链接：https://j uej in.im/post/6872154561574862855

众所周知，刚刚开源的 「鸿蒙 2.0 」以 JavaSc ipt 作为 IoT 应用开发的框架语 。这标志着继 SpaceX 上天之后，JavaSc ipt 再

一次蹭到了新闻联播级的热点。这么好的机会，只拿来阴阳怪气实在太可惜了。作为科普，这篇文章不会拿着放大镜找出代码中

的槽点来吹毛求疵，而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事。只要对计算机基础有个大概的了解，应该就不

会对本文有阅读上的障碍。

我们已经知道在 「鸿蒙 2.0 」上，开发者只需编写形如 V ue 组件式的 JavaSc ipt 业务逻辑，即可将其渲染为智能手表等嵌入式

硬件上的 UI 界面。这个过程中需要涉及哪些核心的模块呢？这些模块中又有哪些属于自研，哪些使用了现成的开源项目呢？这

里将其分为自上而下的三个抽象层来介绍：

JS 框架层，可理解为一个大幅简化的 V ue 式 JavaSc ipt 框架

JS 引擎与运行时层，可理解为一个大幅简化的 WebKit 式运行时

图形渲染层，可理解为一个大幅简化的 Skia 式图形绘制库

这三个抽象层，整体构成了一套面向嵌入式硬件的 GUI 技术栈。不同于许多高呼 「不明觉厉 / 深不可测」的舆论，个人认为至

少对于 GUI 部分，国内凡是接触过目前主流 Hyb id 式跨端方案或 JS 运行时研发的一线开发者，都很容易从源码出发来理解它

。下面逐层对其做一些解读和分析。

JS 框框架架层层

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

1

2 {{hello

然后在同级目录编写这样的 JavaSc ipt：

1 // hello.js

2 export default {

3 data: {

4 hello: 'PPT '

5 ,

6 boil() {

7 this.hello = '核武器';

8

9

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

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

需要对 XML 的预处理机制，将其转换为 JS 中的嵌套函数结构。这样只需在运行时做一次简单 eval ，即可用 JS 生成符合

XML 结构的 UI。

需要事件机制，使得触发 onclick 事件时能执行相应回调。

需要数据劫持机制，使得对 this.hello 赋值时能执行相应回调。

需要能在回调中更新 UI 对象控件。

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

XML 预处理依赖现成的 NPM 开源包，从而把 XML 中的 onclick 属性转换为 JS 对象的属性字段。

事件的注册和触发都直接由 C++ 实现。如上一步所获得的 JS 对象 onclick 属性会在 C++ 中被检查和注册，相当于全

部组件均为原生。

数据劫持机制用 JS 实现，是个基于 Object.defineProperty 的 (几百行量级的)V iewModel。

UI 控件的更新，会在 V iewModel 自动执行的 JS 回调中，调用 C++ 的原生方法实现。这部分完全隐式完成，并未开放

document.createElement 式的标准化 A PI。

由于大量常见 JS 框架中的能力都直接做进了 C++，所以整套 GUI 技术栈里用纯 JavaSc ipt 所实现的东西 (主要见 ace_lite

_jsfwk 仓库下的 core/index.js 、 observer.js 和 subject.js )，相当于有且只有这么一个功能：

一一个个可可以以 watch 的的 ViewModel。。

至于纯 JS 框架部分的实现复杂度和质量，客观地说如果是个人业余作品，可以当作校招面试中不错的加分项。

JS 引引擎擎与与运运行行时时层层

理解了