zoukankan      html  css  js  c++  java
  • 深入学习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控件实例在运行时的属性值存储和读取实现,感谢阅读。

    更多阅读

    (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元素

    更多Jerry的原创文章,尽在:"汪子熙":

  • 相关阅读:
    NOIP2016提高A组五校联考3总结
    【JZOJ4807】破解
    poj3659树状DP
    hdu1054 树状dp
    poj 1190 DFS 不等式放缩进行剪枝
    树状dp ural1018
    hdu1520 第一道树形DP,激动哇咔咔!
    动态规划复习
    poj2251 三维简单BFS
    hdu1272并查集入门
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/14240815.html
Copyright © 2011-2022 走看看