深入學習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控制元件資料繫結的實現原理，感謝閱讀。

系列目錄

(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的原創文章，盡在："汪子熙":