深入學習SAP UI5框架程式碼系列之四：SAP UI5控制元件的後設資料實現

這是Jerry 2021年的第5篇文章，也是汪子熙公眾號總共第276篇原創文章。

系列目錄

(0) SAP UI5應用開發人員瞭解UI5框架程式碼的意義

(1) UI5 module懶載入機制

(2) UI5 控制元件渲染機制

(3)  HTML原生事件 VS SAP UI5 Semantic事件

(4) UI5控制元件後設資料的後設資料實現(本文）

(5) UI5控制元件的例項資料實現細節

(6) UI5控制元件資料繫結的實現原理

(7) UI5控制元件資料繫結的三種模式：One Way，Two Way和OneTime實現原理比較

(8) UI5控制元件ID的生成邏輯

(9) UI5控制元件的多語言(國際化,Internationalization,i18n)支援的實現原理

(10) XML檢視裡的button控制元件

(11) button控制元件和它背後的DOM元素

在本系列的第二篇文章： 深入學習SAP UI5框架程式碼系列之二：UI5 控制元件的渲染器 裡，我們瞭解了什麼是UI5控制元件的渲染器(Renderer), 以及如何從SAP UI5控制元件的後設資料裡，獲得其對應渲染器的名稱：sap.ui.commons.ButtonRenderer

本文我們將瞭解更多關於SAP UI5控制元件後設資料的細節。

注：您會發現本文的SAP UI5框架除錯截圖，有些是白色背景，有些是深色背景。前者是Jerry 2015年書寫本系列英文版時所截的圖，後者為2021年Jerry將英文版改寫成中文版，並重新發布在微信公眾號平臺上時截的圖。

如何在執行時獲取SAP UI5控制元件的後設資料？

拿到控制元件例項後，呼叫其getMetadata()方法即可。

執行Jerry文章  一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴 裡提到的SAP UI5腳手架應用，在下圖第19行設定斷點，拿到button控制元件例項oButton1, 呼叫其getMetadata方法，返回值就是button控制元件的後設資料，如下圖右邊所示。

後設資料裡欄位很多，這裡只介紹對SAP UI5應用開發人員來說最重要的一部分欄位：

_aAllPublicMethods

當我們在Chrome開發者工具的console皮膚裡，輸入oButton1之後，緊接著再敲一個"."(英文輸入狀態下的句號)，就能看到該button例項能夠呼叫的一系列公有方法。這些公有方法列表，維護在後設資料裡的陣列_aAllPublicMethods.

這個陣列的length為110，這意味著button例項總共可以呼叫110個公有方法。然而我們在Button.js裡檢視button的實現原始碼，發現裡面能夠找到的方法數目遠遠小於110.

這是因為button控制元件例項能呼叫的110個公有方法，很多都來自其原型鏈繼承關係上游的節點裡實現的公有方法。

回顧本系列第一篇文章  深入學習SAP UI5框架程式碼系列之一：UI5 Module的懶載入機制 提到的SAP UI5控制元件原型繼承鏈：

Button->Control->Element->ManagedObject->EventProvider->BaseObject

想判斷一個方法是button本身所實現，還是從其原型鏈繼承過來的，可以將方法名稱傳入函式oButton1.hasOwnProperty, 透過其返回的布林值得知結果。

比如getText是button原型鏈上的一個方法，因此下面的JavaScript語句返回：false.

_aAllPublicMethods陣列的填充邏輯：控制元件本身的公有方法和其原型鏈上級節點的公有方法的並集(下圖高亮JavaScript程式碼裡陣列的concat操作)

_aPublicMethods

該陣列內的元素是剛剛介紹過的_aAllPublicMethods的一個子集，定義在metadata的_publicMethods欄位內。下圖是UI5控制元件原型鏈上的節點，EventProvider的publicMethods:

_mAllAggregations

該物件維護了控制元件所有可用的Aggregation.

在物件導向程式設計領域，我們常用association, aggregation(聚合)和composition(組合)描述類與類，物件與物件之間的關聯關係。

Aggregation描述的是has-a的語義，在UML圖裡透過空心菱形箭頭表示，比如tooltip可以脫離button控制元件單獨存在；Composition關係描述part-of，即部分和整體的語義，用實心菱形箭頭表示。

下圖是一個例子：button控制元件的tooltip以Aggregation的方式維護和儲存在控制元件後設資料當中，透過getTooltip和setTooltip進行讀寫訪問。

關於SAP UI5 Aggregation的權威介紹，可以檢視SAP UI5 官網.

官網裡給出的一個例子，TextList的後設資料裡定義了一個指向texts的aggregation, 關係為1:N.

_mProperties

該物件包含了button控制元件所有可用的屬性，以及針對這些屬性的讀寫方法。注意mProperties儲存的只是控制元件屬性的後設資料，而非屬性執行時的值。SAP UI5控制元件執行時屬性值的儲存，會在本系列下一篇文章 UI5控制元件的例項資料實現細節 裡介紹。

_oParent

指向該控制元件原型鏈父節點的後設資料儲存結構。順著節點的oParent欄位，我們可以遍歷完整個原型鏈。

SAP UI5 button控制元件的公有方法，從Jerry 2015年寫作時的110個，增添到了2021年1.85.0版本里的127個：

我們有兩種方式可以手動計算出127這個數字。

方法1：button後設資料的_aPublicMethods.length + _oParent._aAllPublicMethods.length

方法2：button自身，及其原型鏈上每個節點後設資料的_aPublicMethods.length求和：

Jerry最近用Angular開發SAP Spartacus時，也會在Angular Component的template檔案裡使用控制元件。

這些控制元件的實現分為三類：

(1) 直接利用HTML原生標籤，例如div, span, label, input這些：

(2) 由字首為cx-的選擇器代表的複合控制元件，這是我們團隊開發的能夠被SAP Spartacus其他UI和二次開發人員重用的控制元件，cx即Customer Experience.

比如下列高亮程式碼的語義是，如果當前Component的orderApproval模型處於可用狀態，且loading標誌位為true，則顯示一個旋轉的動畫效果，即載入第四行的複合控制元件cx-spinner, 否則載入id為approvalFormTemplate的頁面模板。複合控制元件本質上仍然是一個Angular Component:

對於以上這兩種控制元件實現，不存在類似SAP UI5那樣的原始碼級別的後設資料資料結構。

(3) 第三方提供的控制元件庫，比如ng-select, 一個下拉選單控制元件庫：

在node_modules資料夾下的ng-select.component.d.ts檔案裡，即可找到類似SAP UI5控制元件的後設資料定義：

本系列下一篇文章，會介紹SAP UI5控制元件例項在執行時的屬性值儲存和讀取實現，感謝閱讀。

更多閱讀

(0) SAP UI5應用開發人員瞭解UI5框架程式碼的意義

(1) UI5 module懶載入機制

(2) UI5 控制元件渲染機制

(3)  HTML原生事件 VS SAP UI5 Semantic事件

(4) UI5控制元件後設資料的後設資料實現(本文）

(5) UI5控制元件的例項資料實現細節

(6) UI5控制元件資料繫結的實現原理

(7) UI5控制元件資料繫結的三種模式：One Way，Two Way和OneTime實現原理比較

(8) UI5控制元件ID的生成邏輯

(9) UI5控制元件的多語言(國際化,Internationalization,i18n)支援的實現原理

(10) XML檢視裡的button控制元件

(11) button控制元件和它背後的DOM元素

更多Jerry的原創文章，盡在："汪子熙":