當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

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

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

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

系列目錄

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

(1) UI5 module懶加載機(jī)制

(2) UI5 控件渲染機(jī)制

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

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

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

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

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

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

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

(10) XML視圖里的button控件

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

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

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

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

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

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

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

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

_aAllPublicMethods

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

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

這是因?yàn)閎utton控件實(shí)例能調(diào)用的110個(gè)公有方法，很多都來(lái)自其原型鏈繼承關(guān)系上游的節(jié)點(diǎn)里實(shí)現(xiàn)的公有方法。

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

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

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

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

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

_aPublicMethods

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

_mAllAggregations

該對(duì)象維護(hù)了控件所有可用的Aggregation.

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

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

下圖是一個(gè)例子：button控件的tooltip以Aggregation的方式維護(hù)和存儲(chǔ)在控件元數(shù)據(jù)當(dāng)中，通過(guò)getTooltip和setTooltip進(jìn)行讀寫訪問(wèn)。

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

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

_mProperties

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

_oParent

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

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

我們有兩種方式可以手動(dòng)計(jì)算出127這個(gè)數(shù)字。

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

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

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

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

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

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

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

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

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

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

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

更多閱讀