當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入学习SAP UI5框架代码系列之四：SAP UI5控件的元数据实现

發布時間：2023/12/19 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了深入学习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控件實例在運行時的屬性值存儲和讀取實現，感謝閱讀。

更多閱讀