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

系列目錄

(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.

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

這個陣列的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框架程式碼系列之四：SAP UI5控制元件的後設資料實現

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

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

_mProperties

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

深入學習SAP UI5框架程式碼系列之四：SAP 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: