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

![](https://img-blog.csdnimg.cn/img_convert/be07b34d9d6ed6b1a4d33e80c501638c.png)

這不，早在上週五，我所在的 SAP Spartacus 開發團隊的開發經理，就貼心地在 Slack 上提醒所有組員，記得享受 "SAP Global Mental Health Day".

![](https://img-blog.csdnimg.cn/img_convert/b9d78d7fbd60317ed9951b30048dfbb0.png)

關於 SAP 全球心理健康日的更多介紹，請參閱 SAP中國研究院官方公眾號這篇文章：[SAP 全球心理健康日 | 為員工提供精神充電的機會！](http://mp.weixin.qq.com/s?__biz=MzA5MjM3MDY2NA==&mid=2660866224&idx=1&sn=1fb8c1cfaea4e5e51615ea78fa2e2faa&chksm=8b031b37bc749221834c3de4905b5bdf9a109953c214dda9896229e02a7b31624997bf6a7c9d&scene=21#wechat_redirect)

作為一個程式設計師，在今天這一額外的假期裡，做點什麼好呢？我正好趁此機會，繼續書寫以前尚未完成的一個 深入學習 SAP UI5 框架程式碼的系列文章。

# 本系列之前的文章

(0) [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

(1) [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

(2) [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

(3) [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

(4) [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

(5) [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

(6) [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

(7) [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

本文繼續填坑。

在文章 [一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490638&idx=1&sn=2d48eeb6c0004950adaa97703e648796&chksm=ead5aed9dda227cf7b42b0f5f002a2517648f941695db22ddc09afa8725e1ca7960d69f4863e&scene=21#wechat_redirect) 介紹的 SAP UI5 腳手架裡，建立一個 SAP UI5 Button 控制元件：

![](https://img-blog.csdnimg.cn/img_convert/89dcc81f29fc58e0199259d5d65ad4ab.png)

文章 [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect) 曾經提到，SAP UI5 控制元件擁有對應的渲染器，比如 Button 的渲染器叫做 ButtonRenderer，負責渲染出如下圖高亮的 HTML 程式碼，其中控制元件 ID 為 __button0.

![](https://img-blog.csdnimg.cn/img_convert/9a31e9f96dbee07dc99fc3e4e2d8cec1.png)

最近 Jerry 的技術交流群，有朋友問了我一個問題：如何使用原生的 JavaScript 程式碼，觸發 SAP UI5 按鈕控制元件的點選事件處理函式？

![](https://img-blog.csdnimg.cn/img_convert/b4e46d0620baf41e9eb9dbe3da992478.png)

我在這篇知乎文章[如何使用原生的 JavaScript 程式碼，觸發 SAP UI5 按鈕控制元件的點選事件處理函式](https://zhuanlan.zhihu.com/p/368062032)裡，提供瞭解決方案：

![](https://img-blog.csdnimg.cn/img_convert/d0aec77b8abaa1697f6679b2708d0e09.png)

在文章裡我開發了一個例子，三個 SAP UI5 Button 控制元件的 ID，在渲染出的 HTML 程式碼裡分別為 __button0, __button1 和 __button2.

很容易看出 SAP UI5 控制元件 ID 的格式為：控制元件對應的名稱字首，再加上一個計數器。

其中控制元件字首名稱，例如 Button 控制元件 ID 的字首為 button, 該字首是 SAP UI5 控制元件後設資料的一部分，在文章 [深入學習SAP UI5框架程式碼系列之四：SAP UI5控制元件的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect) 裡有詳細介紹。

![](https://img-blog.csdnimg.cn/img_convert/76872faaad12cbc3ca3ad01edc6c8e50.png)

而 SAP UI5 控制元件的全域性計數器，維護在字典資料結構 mUIDCounts 裡，其中 key 為不同的 SAP UI5 控制元件後設資料裡儲存的字首，value 為該型別的 SAP UI5 控制元件當前的計數器值。
![](https://img-blog.csdnimg.cn/img_convert/cfe0c5daced5403f68f7777f45e367e3.png)

迄今為止，我們討論的都是開發人員在建立 SAP UI5 控制元件例項時，沒有顯式指定 ID 的情形。

如果開發人員透過建構函式 ID 引數，顯式傳入一個 ID：

![](https://img-blog.csdnimg.cn/img_convert/0da21d85f0ba0b1464f57552bc288b19.png)

則最後渲染出的 HTML 原始碼裡，ID 值不再包含字首：
 
![](https://img-blog.csdnimg.cn/img_convert/48103eabbbcaf054e535687635c94374.png)

這個邏輯在 SAP UI5 控制元件對應的原型鏈節點 ManagedObject 的建構函式里可以清楚地看到：

* 如果開發人員顯式指定了控制元件 ID，則使用該 ID 渲染 HTML
* 如果開發人員沒有指定控制元件 ID，則使用控制元件後設資料裡包含的字首，加上全域性計數器自動生成 ID

![](https://img-blog.csdnimg.cn/img_convert/ddc8dd7e810f3fe61c10a2f28fbf4ef0.png)

SAP UI5 控制元件提供了一個工具方法，sap.ui.getCore().byId，能夠根據控制元件 ID，返回對應的控制元件例項。

下面的程式碼，assert 斷言語句能夠成功執行：

![](https://img-blog.csdnimg.cn/img_convert/2399bb41f29cf92f888565dcb2100c0a.png)

有的朋友可能會認為， byId 方法最終會交由原生的 DOM API document.getElementById 來執行，事實並非如此。

![](https://img-blog.csdnimg.cn/img_convert/dd87c654b0567a5fe05a6172ae33d644.png)

每個建立好的 SAP UI5 控制元件例項，都會被新增到 SAP UI5 全域性登錄檔 mElements 中。隨後開發人員呼叫 sap.ui.getCore().byId 時，該方法直接從登錄檔 mElements 中查詢並返回對應的控制元件例項即可，其效率高於原生 DOM API document.getElementById.

SAP UI5 的控制元件例項註冊過程，實現在 Core.prototype.registerElement 方法裡。下圖高亮的第 40705 行程式碼丟擲的錯誤訊息，也解釋了為什麼 SAP UI5 不允許兩個控制元件擁有相同的 ID. 方法 this.oConfiguration.getNoDuplicateIds 檢測到重複 ID 後，會執行相應的處理邏輯。

![](https://img-blog.csdnimg.cn/img_convert/53179138d81536e09b1a1520c4eb977f.png)

Angular 雖然和 SAP UI5 一樣，也是單頁面應用，並且二者都允許並重度依賴自定義控制元件 (Angular 裡稱 Component)，但二者在檢視設計上一個較大的差異就是，Angular Component 的檢視實現於原生的 HTML 檔案 (或者於內聯的 HTML 字串) 裡，而非像 SAP UI5 那樣，使用 XML 或者 JavaScript 檢視來實現自己的頁面佈局。

因此，一個前端開發人員，僅憑靜態瀏覽 Angular Component 的 HTML 檢視原始碼，大致就能判斷出最後渲染而成的 HTML 頁面原始碼：二者相差不大，Angular 沒有 SAP UI5 控制元件渲染器的概念。

例如，下圖是 SAP Commerce Cloud 組織架構明細頁面 (Organization Unit Detail) 的 HTML 檢視原始碼：

![](https://img-blog.csdnimg.cn/img_convert/95659bd1720e2b015ac171b7161437c1.png)

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

![](https://img-blog.csdnimg.cn/img_convert/c5e5c46042f63fdffb8413d19c4063e6.png)

而 SAP UI5 XML 檢視，特別是引入 Fiori Elements 之後，XML 檢視的程式碼同最後渲染出的 HTML 原始碼相比，差異巨大。因為渲染過程中，Fiori Elements 根據 SAP OData 上的 Annotation，進行了非常多複雜的處理，後續 Jerry 的公眾號會詳細介紹。

比如一個 SAP Fiori Elements 應用，只用了 7 行程式碼，定義了一個 Smart List：

![](https://img-blog.csdnimg.cn/img_convert/7f0b781d92f871c06f6c8b9db6a92a90.png)

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

![](https://img-blog.csdnimg.cn/img_convert/d17abe3655da16cbcd67b46b3c0c3caf.png)

Angular UI 不像 SAP UI5 那樣，傾向於為每一個 HTML 元素分配一個不重複的 ID. 下圖是 SAP UI5 的 HTML 原始碼，能觀察到不少 HTML 元素都有一個 Unique ID，而這種情形不會在 Angular 應用的 HTML 原始碼裡發生。

![](https://img-blog.csdnimg.cn/img_convert/0746dec62b7d7717077e80de32214f44.png)

然而 Angular 有一個結構化指令 ng-template, 也具有透過 # 符號標註的 ID 屬性，配合另一個指令 NgIf，能實現頁面佈局的條件渲染。下圖是一個具體例子：

![](https://img-blog.csdnimg.cn/img_convert/6a13eb699144cf45c44af5999f9159a9.png)

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

Jerry 的後續文章會詳細介紹。

![](https://img-blog.csdnimg.cn/img_convert/c80e12c2be307fba02e43463704f0a30.png)

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

# 更多閱讀
## 本系列之前的文章