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

编程问答

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

發(fā)布時間：2023/12/19 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了深入学习SAP UI5框架代码系列之四：SAP UI5控件的元数据实现小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

系列目錄

(0) SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

(1) UI5 module懶加載機制

(2) UI5 控件渲染機制

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

(4) UI5控件元數(shù)據(jù)的元數(shù)據(jù)實現(xiàn)(本文）

(5) UI5控件的實例數(shù)據(jù)實現(xiàn)細節(jié)

(6) UI5控件數(shù)據(jù)綁定的實現(xiàn)原理

(7) UI5控件數(shù)據(jù)綁定的三種模式：One Way，Two Way和OneTime實現(xiàn)原理比較

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

(9) UI5控件的多語言(國際化,Internationalization,i18n)支持的實現(xiàn)原理

(10) XML視圖里的button控件

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

在本系列的第二篇文章：深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器里，我們了解了什么是UI5控件的渲染器(Renderer), 以及如何從SAP UI5控件的元數(shù)據(jù)里，獲得其對應(yīng)渲染器的名稱：sap.ui.commons.ButtonRenderer

本文我們將了解更多關(guān)于SAP UI5控件元數(shù)據(jù)的細節(jié)。

注：您會發(fā)現(xiàn)本文的SAP UI5框架調(diào)試截圖，有些是白色背景，有些是深色背景。前者是Jerry 2015年書寫本系列英文版時所截的圖，后者為2021年Jerry將英文版改寫成中文版，并重新發(fā)布在微信公眾號平臺上時截的圖。

如何在運行時獲取SAP UI5控件的元數(shù)據(jù)？

拿到控件實例后，調(diào)用其getMetadata()方法即可。

運行Jerry文章一個用于SAP UI5學(xué)習(xí)的腳手架應(yīng)用，沒有任何后臺API的依賴里提到的SAP UI5腳手架應(yīng)用，在下圖第19行設(shè)置斷點，拿到button控件實例oButton1, 調(diào)用其getMetadata方法，返回值就是button控件的元數(shù)據(jù)，如下圖右邊所示。

元數(shù)據(jù)里字段很多，這里只介紹對SAP UI5應(yīng)用開發(fā)人員來說最重要的一部分字段：

_aAllPublicMethods

當我們在Chrome開發(fā)者工具的console面板里，輸入oButton1之后，緊接著再敲一個"."(英文輸入狀態(tài)下的句號)，就能看到該button實例能夠調(diào)用的一系列公有方法。這些公有方法列表，維護在元數(shù)據(jù)里的數(shù)組_aAllPublicMethods.

這個數(shù)組的length為110，這意味著button實例總共可以調(diào)用110個公有方法。然而我們在Button.js里查看button的實現(xiàn)源代碼，發(fā)現(xiàn)里面能夠找到的方法數(shù)目遠遠小于110.

這是因為button控件實例能調(diào)用的110個公有方法，很多都來自其原型鏈繼承關(guān)系上游的節(jié)點里實現(xiàn)的公有方法。

回顧本系列第一篇文章深入學(xué)習(xí)SAP UI5框架代碼系列之一：UI5 Module的懶加載機制提到的SAP UI5控件原型繼承鏈：

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

想判斷一個方法是button本身所實現(xiàn)，還是從其原型鏈繼承過來的，可以將方法名稱傳入函數(shù)oButton1.hasOwnProperty, 通過其返回的布爾值得知結(jié)果。

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

_aAllPublicMethods數(shù)組的填充邏輯：控件本身的公有方法和其原型鏈上級節(jié)點的公有方法的并集(下圖高亮JavaScript代碼里數(shù)組的concat操作)

_aPublicMethods

該數(shù)組內(nèi)的元素是剛剛介紹過的_aAllPublicMethods的一個子集，定義在metadata的_publicMethods字段內(nèi)。下圖是UI5控件原型鏈上的節(jié)點，EventProvider的publicMethods:

_mAllAggregations

該對象維護了控件所有可用的Aggregation.

在面向?qū)ο缶幊填I(lǐng)域，我們常用association, aggregation(聚合)和composition(組合)描述類與類，對象與對象之間的關(guān)聯(lián)關(guān)系。

Aggregation描述的是has-a的語義，在UML圖里通過空心菱形箭頭表示，比如tooltip可以脫離button控件單獨存在；Composition關(guān)系描述part-of，即部分和整體的語義，用實心菱形箭頭表示。

下圖是一個例子：button控件的tooltip以Aggregation的方式維護和存儲在控件元數(shù)據(jù)當中，通過getTooltip和setTooltip進行讀寫訪問。

關(guān)于SAP UI5 Aggregation的權(quán)威介紹，可以查看SAP UI5官網(wǎng).

官網(wǎng)里給出的一個例子，TextList的元數(shù)據(jù)里定義了一個指向texts的aggregation, 關(guān)系為1:N.

_mProperties

該對象包含了button控件所有可用的屬性，以及針對這些屬性的讀寫方法。注意mProperties存儲的只是控件屬性的元數(shù)據(jù)，而非屬性運行時的值。SAP UI5控件運行時屬性值的存儲，會在本系列下一篇文章 UI5控件的實例數(shù)據(jù)實現(xiàn)細節(jié) 里介紹。

_oParent

指向該控件原型鏈父節(jié)點的元數(shù)據(jù)存儲結(jié)構(gòu)。順著節(jié)點的oParent字段，我們可以遍歷完整個原型鏈。

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

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

方法1：button元數(shù)據(jù)的_aPublicMethods.length + _oParent._aAllPublicMethods.length

方法2：button自身，及其原型鏈上每個節(jié)點元數(shù)據(jù)的_aPublicMethods.length求和：

Jerry最近用Angular開發(fā)SAP Spartacus時，也會在Angular Component的template文件里使用控件。

這些控件的實現(xiàn)分為三類：

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

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

比如下列高亮代碼的語義是，如果當前Component的orderApproval模型處于可用狀態(tài)，且loading標志位為true，則顯示一個旋轉(zhuǎn)的動畫效果，即加載第四行的復(fù)合控件cx-spinner, 否則加載id為approvalFormTemplate的頁面模板。復(fù)合控件本質(zhì)上仍然是一個Angular Component:

對于以上這兩種控件實現(xiàn)，不存在類似SAP UI5那樣的源代碼級別的元數(shù)據(jù)數(shù)據(jù)結(jié)構(gòu)。

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

在node_modules文件夾下的ng-select.component.d.ts文件里，即可找到類似SAP UI5控件的元數(shù)據(jù)定義：

本系列下一篇文章，會介紹SAP UI5控件實例在運行時的屬性值存儲和讀取實現(xiàn)，感謝閱讀。

更多閱讀