本文深入分析鸿蒙系统中轻量级 JS 核心开发框架 ace_lite_jsfwk 的源码结构。该框架仅包含五个核心 JS 文件，通过属性劫持实现轻量级 MVVM 模式，并采用 JerryScript 引擎以支持 ECMAScript 5.1 标准，确保在低内存设备上运行。文章详细解读了其从 HML/CSS/JS 编译为原生 UI 组件的全流程，以及 C/C++ 与 JS 代码的占比分布。
鸿蒙 JS 框架概述与源码获取
随着鸿蒙系统的正式发布，开发者社区反响热烈。
相关源码已托管于国内知名开源平台码云，访问地址为 https://gitee.com/openharmony。
笔者在第一时间获取源码并进行研究，期间编写了 hello world 示例程序，并向鸿蒙官方文档提交了两个 PR。
本文重点探讨鸿蒙的 JS 框架 ace_lite_jsfwk，从其命名即可看出这是一个极其轻量级的框架，官方定义其为“轻量级 JS 核心开发框架”。
经过源码审查，确认其确实具备轻量级特征：核心代码仅由 5 个 JS 文件组成，总行数约 300 至 400 行，且未包含单元测试。
runtime-core\src\core\index.js runtime-core\src\observer\observer.js runtime-core\src\observer\subject.js runtime-core\src\observer\utils.js runtime-core\src\profiler\index.js
核心源码结构与 MVVM 实现
从文件名可推断，这些代码实现了观察者模式，进而构建了一个轻量级的 MVVM 模式。该框架利用与 Vue2 类似的属性劫持技术实现了响应式系统，这类似于业界常见的“三大自己实现”练习之一（即自行实现 Promise、Vue 和 React）。
在 utils 文件中定义了 Observer 栈，用于存储观察者实例；subject 文件则定义了被观察者。当对某个对象进行观察（即劫持其属性）或处理数组方法（如 push、pop 等）时，涉及该文件，这也是代码量最大的部分，约 160 行。相比之下，observer 文件的代码更为简洁，仅五六十行。
编译流程与渲染机制
在开发流程中，通过 Toolkit 将开发者编写的 HML、CSS 和 JS 文件编译打包为 JS Bundle，随后将该 Bundle 解析并运行，生成 C++ native UI 的 View 组件进行渲染。
官方指出，通过支持第三方开发者使用声明式 API 进行应用开发，以数据驱动视图变化，从而避免大量的视图操作，显著降低了应用开发难度并提升了开发体验。这基本上提供了类似小程序的开发体验。
在 src\core\base\framework_min_js.h 文件中，编译后的 JS 代码被嵌入到 runtime 中。编译完成的 JS 文件大小不足 3K，确实体现了轻量级的特点。
JavaScript 引擎选择与架构占比
该 JS runtime 未采用 V8 或 jscore，而是选择了 JerryScript。JerryScript 是专为物联网设计的超轻量级 JavaScript 引擎，能够在内存少于 64 KB 的设备上执行 ECMAScript 5.1 源代码。这也解释了为何鸿蒙 JS 框架文档中声明支持 ECMAScript 5.1 标准。
从整体架构来看，该 JS 框架约 96% 的代码由 C/C++ 编写，JS 代码占比仅 1.8%。在 HML 文件中编写的组件会被编译为原生组件，而 app_style_manager.cpp 及同级其他七八个文件负责解析 CSS，最终生成原生布局。
尽管 SDK 中包含几个 weex 包，且能发现 React 的影子，但在 C/C++ 代码中并未找到 yoga 相关内容（全局搜索无结果）。SDK 中的这些包仅作为 loader 使用，主要功能是在 webpack 打包时解析 htm 组件，将 htm 的 template 编译为 JS 代码。
总体而言，该框架的表现优于预期。
以上为本文全部内容，希望对读者有所帮助，也欢迎大家支持本站。