关于sap:深入学习SAP-UI5框架代码系列之五SAP-UI5控件的实例数据修改和读取逻辑

这是Jerry 2021年的第6篇文章，也是汪子熙公众号总共第277篇原创文章。

系列目录

(0) SAP UI5利用开发人员理解UI5框架代码的意义
(1) SAP UI5 module懒加载机制
(2) SAP UI5 控件渲染机制
(3) HTML原生事件 VS SAP UI5 Semantic事件
(4) SAP UI5控件元数据的元数据实现
(5) SAP UI5控件的实例数据批改和读取逻辑(本文）
(6) SAP UI5控件数据绑定的实现原理
(7) SAP UI5控件数据绑定的三种模式：One Way，Two Way和OneTime实现原理比拟
(8) SAP UI5控件ID的生成逻辑
(9) SAP UI5控件的多语言(国际化,Internationalization,i18n)反对的实现原理
(10) XML视图里的button控件
(11) button控件和它背地的DOM元素

本文咱们将通过钻研button控件的setText和getText办法实现，来学习SAP UI5控件的实例数据批改和读取逻辑。

下图是一段简略的SAP UI5代码：每点击一次button，就会在press事件的响应函数里，给button的text属性值尾部附上一个字符“1”.

点了三次按钮后，其渲染出的HTML代码如下图所示，button的text属性前面多了三个"1"：

单步调试进入setText办法外部，发现该办法最终执行的实现是ManagedObject.setProperty:

咱们能够通过上图左边调用栈里实现，温习本系列之前文章学到的两个知识点：

(1) 文章深刻学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制里提到的SAP UI5控件的原型继承链：

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

(2) 文章 HTML原生事件 VS SAP UI5 Semantic事件里提到的从HTML原生的click事件到SAP UI5 press语义事件的映射逻辑。

setProperty的实现逻辑概述

正文写得很棒，不过setProperty的代码自身的执行逻辑也很清晰。

第1295行this.mProperties即SAP UI5控件的实例数据存储构造。上图右上角Watch面板里的含意是，以后setProperty办法调用，须要批改text属性，批改成新的值为"Button1".

1295行首先从this.mProperties中取出text属性批改前的值，存储在变量oOldValue里。

1298行调用this.validateProperty办法，查看传入setProperty的输出参数，即待批改的属性值oValue是否无效。

1300行判断批改前的值oOldValue，和待批改的输出值oValue是否雷同。如果雷同，以后setProperty调用没必要继续执行，间接返回。

在validateProperty外部，SAP UI5框架依据本系列前一篇文章 深刻学习SAP UI5框架代码系列之四：SAP UI5控件的元数据实现 形容的逻辑，取出控件text属性的元数据，得悉该属性类型为string，拜访权限为public:

每个不同类型的SAP UI5控件属性，依据其元数据的type字段，能够失去一个对应的类型形容器，如上图1409行oType所示。

形容器里蕴含一系列办法，其中normalize函数负责在写入新的属性值时，对输出值进行规则化解决。

在setProperty调用时，最初一个可选的输出参数bSuppressInvalidate，默认值为undefined，因而会执行1316行的invalidate办法，触发UI的重绘操作(rerendering)。

上图第1313行只是将新的属性值写入SAP UI5控件的实例数据存储构造里，该行代码执行结束后，UI上的button标签文本并不会变动。

只有当UI界面重绘实现后，用户能力在浏览器里看到button标签的最新值。

上图1316行的invalidate办法，会以异步的形式触发UI重绘操作。异步操作的调度，采纳JavaScript原生函数setTimeout, 该函数将renderPendingUIUpdates这个工作增加到JavaScript引擎工作队列的尾部，这样主线程一旦闲暇(因为setTimeout第二个参数，即超时工夫指定为0)，就会执行renderPendingUIUpdates，以重绘UI区域里须要重绘，即属性值产生了变动的那些控件。

Button控件的重绘，最终通过其对应的渲染器，ButtonRenderer来实现，具体的渲染办法render的调用，如上图右部标注了数字4的调用栈栈帧所示。

对于SAP UI5控件的渲染器，请查看Jerry之前的文章 深刻学习SAP UI5框架代码系列之二：UI5 控件的渲染器。

再回到ManagedObject.setProperty的办法主体。

1320行的this.updateModelProperty, 波及到SAP UI5控件对应的模型更新，在代码1319行正文里提到，如果控件应用双向绑定形式同一个模型绑定，那么当UI控件属性发生变化时，对应的模型字段也应该被更新。这个模型字段的更新就实现在1320行的updateModelProperty函数里，Jerry的下一篇文章 UI5控件数据绑定的实现原理会介绍。

ManagedObject.setProperty的开端，会调用实现在原型链节点EventProvider上的fireEvent办法，抛出一个_change事件，蕴含产生该事件的控件id，产生change的属性名称，变动前和变动后的属性值。

尽管事件名称_change后面的下划线表明该事件用于SAP UI5框架外部解决，然而这只是一个弱束缚，咱们仍旧能够在本人的应用程序里，应用下图高亮区域里button控件的attachEvent办法，来监听这个事件。

下图右局部调试器Watch面板里展现的是_change事件的负载，表明一个id为__button0的控件，text属性值从Jerry变成了Jerry1.

以上就是button控件的setText->setProperty的执行逻辑的大抵介绍，理解了SAP UI5控件数据批改的原理，了解getText就容易多了。

后面介绍setProperty的时候提到了执行UI重绘的异步操作，产生在renderPendingUIUpdates函数里，这里button控件的渲染器ButtonRenderer的render办法会被调用。渲染器又调用button的getText办法，取出待渲染的button标签值。

而getText同setText相似，转而调用ManagedObject的getProperty办法：

getProperty的外围逻辑比setProperty简略得多，间接从控件实例数据存储构造mProperties里取出对应须要读取的属性值。

顺便说一句，Angular同SAP UI5一样，也有相似的UI异步重绘操作。

每当Angular外部保护的微工作队列为空时，(onMicrotaskEmpty), 触发tick操作：

tick操作调用detectChanges函数(相当于SAP UI5的renderPendingUIUpdates), detectChanges会递归调用refreshView, 刷新产生了属性变动的Angular控件。

本系列的下一篇文章，会介绍SAP UI5控件数据绑定的实现原理，感激浏览。

系列目录

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