共计 3427 个字符，预计需要花费 9 分钟才能阅读完成。
这是 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 控件数据绑定的实现原理，感激浏览。
系列目录
(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 元素
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: