一、前言
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
