关于sap:深入学习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控件实例在运行时的属性值存储和读取实现，感激浏览。

更多浏览