揭秘鸿蒙系统中的 JS 开发框架

鸿蒙系统中的 JS 开发框架（ace_lite_jsfwk）是一个轻量级的核心开发框架，采用 MVVM 模式，基于观察者机制和属性劫持技术实现响应式系统，支持声明式开发，并使用 JerryScript 作为 JavaScript 引擎，整体以 C/C++ 为主，具有高度轻量化和高效性。

• 轻量级设计：

  核心代码仅包含 5 个 JS 文件（约 300-400 行），无单元测试，编译后的 JS 文件大小不足 3KB。

  整体框架代码中 96% 为 C/C++，1.8% 为 JS，通过 Toolkit 将 HML、CSS、JS 编译为 JS Bundle，最终解析为 C++ 原生 UI 组件渲染。

  选择 JerryScript 作为 JS 引擎，该引擎专为物联网设备设计，可在内存小于 64KB 的设备上运行 ECMAScript 5.1 代码，解释了框架对 ES5.1 的支持。

1. MVVM 模式与观察者机制

   框架通过 观察者模式 实现轻量级 MVVM，核心代码分布在以下文件中：

   runtime-core/src/core/index.js：入口文件，整合各模块。

   observer/observer.js（约 50-60 行）：定义观察者逻辑，监听数据变化。

   observer/subject.js（约 160 行）：定义被观察者，实现属性劫持（类似 Vue2 的 Object.defineProperty），支持数组操作（如 push、pop）的劫持。

   observer/utils.js：维护观察者栈，管理数据变更通知。

   profiler/index.js：性能分析工具（非核心功能）。

   数据驱动视图：开发者通过声明式 API 定义界面，数据变化自动触发视图更新，避免手动操作 DOM，降低开发难度。

2. 编译与运行流程

   开发阶段：开发者编写 HML（类似 HTML 的模板语言）、CSS 和 JS 文件。

   编译阶段：Toolkit 将三者打包为 JS Bundle，其中 HML 模板编译为 JS 代码（类似 Webpack 加载器的作用）。

   运行阶段：JS Bundle 被解析为 C++ 原生 UI 组件，通过 app_style_manager.cpp 等文件解析 CSS 生成布局，最终渲染到屏幕。

   代码嵌入：编译后的 JS 代码被硬编码到 src/core/base/framework_min_js.h 文件中，直接集成到运行时。

1. JS 引擎选择

   未采用 V8（Chrome）或 JSCore（Safari），而是选择 JerryScript，原因包括：

   超轻量级：适合内存受限的物联网设备。

   ES5.1 支持：满足基础 JS 语法需求，平衡功能与性能。

2. 与前端框架的关联

   Vue 影子：属性劫持和观察者模式类似 Vue2，但实现更精简。

   React 痕迹：SDK 中包含 Weex 包和 React 相关代码，但 C++ 层未发现 Yoga（React Native 的布局引擎），推测仅用于打包工具链（如 Webpack 加载器）。

3. 原生渲染优势

   组件最终编译为 C++ 原生组件，性能优于 WebView 渲染，接近原生应用体验。

• 声明式编程：通过 HML 和 CSS 定义界面，JS 处理逻辑，类似小程序开发模式，降低学习成本。
• 跨设备支持：轻量级设计使其适用于手机、智能穿戴、智能家居等多终端场景。
• 性能优化：数据驱动视图减少直接操作，C++ 渲染提升流畅度，JerryScript 保障低内存设备运行。

• ES5.1 限制：无法使用现代 JS 特性（如 ES6+ 语法、模块化）。
• 生态成熟度：作为新框架，第三方库和社区资源较少，需时间积累。
• 调试工具：轻量级设计可能牺牲部分开发调试便利性（如无单元测试）。

总结：鸿蒙的 JS 框架以轻量化和高效为核心，通过 MVVM、观察者模式和原生渲染技术，为开发者提供了类似小程序的声明式开发体验，同时兼顾物联网设备的性能需求。其设计理念体现了鸿蒙“全场景分布式”的愿景，但生态完善仍需时间。