當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

深入学习SAP UI5框架代码系列之八：谈谈 SAP UI5 的视图控件 ID，以及 SAP UI5 视图和 Angular 视图的异同

發(fā)布時間：2023/12/19 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了深入学习SAP UI5框架代码系列之八：谈谈 SAP UI5 的视图控件 ID，以及 SAP UI5 视图和 Angular 视图的异同小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今天是 2021 年 4 月 27 日，周二，SAP 全球心理健康日。SAP 全球的員工，今天放假一天。

這不，早在上周五，我所在的 SAP Spartacus 開發(fā)團(tuán)隊的開發(fā)經(jīng)理，就貼心地在 Slack 上提醒所有組員，記得享受 “SAP Global Mental Health Day”.

關(guān)于 SAP 全球心理健康日的更多介紹，請參閱 SAP中國研究院官方公眾號這篇文章：SAP 全球心理健康日 | 為員工提供精神充電的機(jī)會！

作為一個程序員，在今天這一額外的假期里，做點什么好呢？我正好趁此機(jī)會，繼續(xù)書寫以前尚未完成的一個深入學(xué)習(xí) SAP UI5 框架代碼的系列文章。

本系列之前的文章

(0)?SAP UI5應(yīng)用開發(fā)人員了解UI5框架代碼的意義

(1)?SAP UI5 module懶加載機(jī)制

(2)?SAP UI5 控件渲染機(jī)制

(3)?HTML原生事件 VS SAP UI5 Semantic事件

(4)?SAP UI5控件元數(shù)據(jù)的元數(shù)據(jù)實現(xiàn)

(5)?SAP UI5控件的實例數(shù)據(jù)修改和讀取邏輯

(6)?SAP UI5控件數(shù)據(jù)綁定的實現(xiàn)原理

(7)?SAP UI5控件數(shù)據(jù)綁定的三種模式：One Way, Two Way和OneTime實現(xiàn)原理比較

本文繼續(xù)填坑。

在文章一個用于SAP UI5學(xué)習(xí)的腳手架應(yīng)用，沒有任何后臺API的依賴介紹的 SAP UI5 腳手架里，創(chuàng)建一個 SAP UI5 Button 控件：

文章 SAP UI5 控件渲染機(jī)制曾經(jīng)提到，SAP UI5 控件擁有對應(yīng)的渲染器，比如 Button 的渲染器叫做 ButtonRenderer，負(fù)責(zé)渲染出如下圖高亮的 HTML 代碼，其中控件 ID 為 __button0.

最近 Jerry 的技術(shù)交流群，有朋友問了我一個問題：如何使用原生的 JavaScript 代碼，觸發(fā) SAP UI5 按鈕控件的點擊事件處理函數(shù)？

我在這篇知乎文章如何使用原生的 JavaScript 代碼，觸發(fā) SAP UI5 按鈕控件的點擊事件處理函數(shù)里，提供了解決方案：

在文章里我開發(fā)了一個例子，三個 SAP UI5 Button 控件的 ID，在渲染出的 HTML 代碼里分別為 __button0, __button1 和 __button2.

很容易看出 SAP UI5 控件 ID 的格式為：控件對應(yīng)的名稱前綴，再加上一個計數(shù)器。

其中控件前綴名稱，例如 Button 控件 ID 的前綴為 button, 該前綴是 SAP UI5 控件元數(shù)據(jù)的一部分，在文章深入學(xué)習(xí)SAP UI5框架代碼系列之四：SAP UI5控件的元數(shù)據(jù)實現(xiàn) 里有詳細(xì)介紹。

而 SAP UI5 控件的全局計數(shù)器，維護(hù)在字典數(shù)據(jù)結(jié)構(gòu) mUIDCounts 里，其中 key 為不同的 SAP UI5 控件元數(shù)據(jù)里存儲的前綴，value 為該類型的 SAP UI5 控件當(dāng)前的計數(shù)器值。

迄今為止，我們討論的都是開發(fā)人員在創(chuàng)建 SAP UI5 控件實例時，沒有顯式指定 ID 的情形。

如果開發(fā)人員通過構(gòu)造函數(shù) ID 參數(shù)，顯式傳入一個 ID：

則最后渲染出的 HTML 源代碼里，ID 值不再包含前綴：

這個邏輯在 SAP UI5 控件對應(yīng)的原型鏈節(jié)點 ManagedObject 的構(gòu)造函數(shù)里可以清楚地看到：

如果開發(fā)人員顯式指定了控件 ID，則使用該 ID 渲染 HTML
如果開發(fā)人員沒有指定控件 ID，則使用控件元數(shù)據(jù)里包含的前綴，加上全局計數(shù)器自動生成 ID

SAP UI5 控件提供了一個工具方法，sap.ui.getCore().byId，能夠根據(jù)控件 ID，返回對應(yīng)的控件實例。

下面的代碼，assert 斷言語句能夠成功執(zhí)行：

有的朋友可能會認(rèn)為， byId 方法最終會交由原生的 DOM API document.getElementById 來執(zhí)行，事實并非如此。

每個創(chuàng)建好的 SAP UI5 控件實例，都會被添加到 SAP UI5 全局注冊表 mElements 中。隨后開發(fā)人員調(diào)用 sap.ui.getCore().byId 時，該方法直接從注冊表 mElements 中查詢并返回對應(yīng)的控件實例即可，其效率高于原生 DOM API document.getElementById.

SAP UI5 的控件實例注冊過程，實現(xiàn)在 Core.prototype.registerElement 方法里。下圖高亮的第 40705 行代碼拋出的錯誤消息，也解釋了為什么 SAP UI5 不允許兩個控件擁有相同的 ID. 方法 this.oConfiguration.getNoDuplicateIds 檢測到重復(fù) ID 后，會執(zhí)行相應(yīng)的處理邏輯。

Angular 雖然和 SAP UI5 一樣，也是單頁面應(yīng)用，并且二者都允許并重度依賴自定義控件 (Angular 里稱 Component)，但二者在視圖設(shè)計上一個較大的差異就是，Angular Component 的視圖實現(xiàn)于原生的 HTML 文件 (或者于內(nèi)聯(lián)的 HTML 字符串) 里，而非像 SAP UI5 那樣，使用 XML 或者 JavaScript 視圖來實現(xiàn)自己的頁面布局。

因此，一個前端開發(fā)人員，僅憑靜態(tài)瀏覽 Angular Component 的 HTML 視圖源代碼，大致就能判斷出最后渲染而成的 HTML 頁面源代碼：二者相差不大，Angular 沒有 SAP UI5 控件渲染器的概念。

例如，下圖是 SAP Commerce Cloud 組織架構(gòu)明細(xì)頁面 (Organization Unit Detail) 的 HTML 視圖源代碼：

下圖是最終渲染出的在瀏覽器里觀測到的 HTML 源代碼，同上圖相比差異不大。

而 SAP UI5 XML 視圖，特別是引入 Fiori Elements 之后，XML 視圖的代碼同最后渲染出的 HTML 源代碼相比，差異巨大。因為渲染過程中，Fiori Elements 根據(jù) SAP OData 上的 Annotation，進(jìn)行了非常多復(fù)雜的處理，后續(xù) Jerry 的公眾號會詳細(xì)介紹。

比如一個 SAP Fiori Elements 應(yīng)用，只用了 7 行代碼，定義了一個 Smart List：

最后得到一個包含 Filter Bar 的 Smart List：

Angular UI 不像 SAP UI5 那樣，傾向于為每一個 HTML 元素分配一個不重復(fù)的 ID. 下圖是 SAP UI5 的 HTML 源代碼，能觀察到不少 HTML 元素都有一個 Unique ID，而這種情形不會在 Angular 應(yīng)用的 HTML 源代碼里發(fā)生。

然而 Angular 有一個結(jié)構(gòu)化指令 ng-template, 也具有通過 # 符號標(biāo)注的 ID 屬性，配合另一個指令 NgIf，能實現(xiàn)頁面布局的條件渲染。下圖是一個具體例子：

SAP UI5 也有類似 Angular 這種 Template 設(shè)計，在 SAP UI5 里稱為 ViewFragment. 在 SAP Fiori Elements 的框架實現(xiàn)里，更是重度依賴了 ViewFragment，它能作為容器，將若干邏輯上相關(guān)且具有重用可能性的 SAP UI5 控件包裹在一起，方便多個 XML 視圖重用。

Jerry 的后續(xù)文章會詳細(xì)介紹。

希望本文能幫助大家對 SAP UI5 控件的 ID 屬性有一個更深入的認(rèn)識，感謝閱讀。

生活随笔

生活随笔

编程问答

深入学习SAP UI5框架代码系列之八：谈谈 SAP UI5 的视图控件 ID，以及 SAP UI5 视图和 Angular 视图的异同

本系列之前的文章

更多閱讀

本系列之前的文章

總結(jié)