共计 2116 个字符，预计需要花费 6 分钟才能阅读完成。
一、前言
ACE_Engine 框架是 OpenAtom OpenHarmony（简称“OpenHarmony”）的 UI 开发框架，为开发者提供在进行利用 UI 开发时所必须的各种组件，以及定义这些组件的属性、款式、事件及办法，通过这些组件能够不便进行 OpenHarmony 上 UI 利用的开发。
ACE_Engine 提供的组件分为两种类型，即类 Web 开发范式类型和申明式开发范式类型。其中类 Web 开发范式中定义一个页面须要三个文件，html，css 和 js 文件。html 文件负责页面布局，css 文件负责定义组件的款式，js 文件负责业务逻辑实现。而申明式范式仅须要 1 个 ets 文件，页面布局和组件的款式以及业务逻辑实现都在此文件中。如图：
二、ACE_Engine 框架模块划分
对于类 Web 开发范式组件，依据组件从前端到后端的过程，能够将整个框架划分为 JsFrameWork、DomNode、ComPonent、RenderNode 四个模块。其作用别离如下：
• JsFrameWork：负责解析前端 html 和 css 文件，创立出 DomNode 树。该树的构造和前端页面是一一对应的。
• DomNode：负责将 Dom 树转换为 Component 树。留神一个 Dom 节点转换过后的 Component 节点实际上并不是一个独自的节点，而是一棵以 rootComponent 为根节点的组件树。该树中逐层包裹了对应的性能组件，最外部才是真正的主节点（这样的作用是性能解耦合，将某一特定的性能放到对应的组件中去）。如 BoxComponet 负责组件的边框绘制，DisplayComponent 负责组件透明度绘制，TouchComponent 负责组件触摸工夫的解决等，一个具体过程见 DOMNode::GenerateComponentNode 函数。
• ComPonent：负责将 Component 树中所有继承自 RenderComponent 的节点（可绘制节点）创立对应的 RendNode 节点，生成对应的 RendNode 树。见 RenderComponent ::CreateRenderNode 虚函数。
• RenderNode：RenderNode 即可绘制的节点，负责组件的最终布局和绘制。其中布局函数为 PerformLayout 虚函数，由每个组件对应的实现类 Render 类来实现。绘制函数为 Paint 虚函数，由每个组件对应的子类 FlutterRender 类来实现。
对于申明式开发范式组件，依据组件从前端到后端的过程，能够将整个框架划分为 EtsLoader、JsView、ComPonent、RenderNode 四个模块。其作用别离如下：
• EtsLoader 负责解析 ets 页面，依据组件的 tag 标签创立对应的 JsView 对象，生成 jsView 树。
• JsView 负责解决组件的属性，办法和事件。并通过 Create 函数创立对应的 Component 树。
• ComPonent：同 Web 开发范式组件中的 Component
• RenderNode：同 Web 开发范式组件中的 RenderNode
各模块创立示意图如下图所示：
各模块间的调用关系及次要函数如下：
三、组件的属性和款式的传递过程
- 组件的属性和款式是保留在前端页面的，通过 JsframeWork 解析页面，并调用 JsEngine 的 CreateDomNode 接口创立 Dom 节点的同时传递新节点属性和款式。如果页面中属性款式发生变化，则独自调用 SetAttr 或 SetStyle 来更新属性和款式。
- DomNode 收到属性和款式之后，会将通用属性保留在 Declaration 类中，将组件特有的属性通过 SetSpecialAttr 和 SetSpecialStyle 函数保留在本身。
- DomNode 调用对应 Component 类的 Set* 函数，将所有属性和款式设置到 Component 中。
- RenderNode 创立后，会调用其 Update 函数。该函数内调用对应 Component 的 Get* 函数，来接管组件的所有属性和款式。
- 在 PipeLine 中会遍历每个 RenderNode 进行布局和绘制，此时，就根据 RenderNode 中接管的属性和款式，进行布局并绘制。
四、总结
ACE_Engine 框架整体代码较简单，波及的类别也比拟多。本文介绍了一个 ACE 组件从前端的页面形容，到中间层三棵树的创立和属性传递，以及最终进行 UI 布局和绘制的整个过程。该过程总结一下就是：JS 页面 —> Dom 树 —> Component 树 —> Render 树，最初绘制 Render 树。大家只有了解这个根本过程，再联合代码关注重点流程，就可能对 ACE_Engine 框架的代码有整体的了解。在此基础上能够进行 ACE 组件的加强性能开发，包含新增一个 ACE 组件等。
参考
新增一个类 Web 范式组件开发指南
https://gitee.com/yan-shuifen… 前端新增组件开发指南 %EF%BC%9A 以新增 MyCircle 组件为例_ver1.0.md
新增一个申明式范式组件开发指南
https://gitee.com/yan-shuifen… 前端新增组件开发指南 %EF%BC%9A 以新增 MyCircle 组件为例_ver1.0.md