載入 SAPUI5 執行時後開始初始化過程。

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

SAPUI5 執行時的初始化包括以下步驟：

(1) jQuery 外掛主要位於 jQuery.sap 名稱空間中，提供 SAPUI5 的基本功能，例如模組化概念、日誌框架、效能測量等。

如下圖所示：
![](https://img-blog.csdnimg.cn/img_convert/47fa50026bc18b445dfc05aeb73b9de4.png)

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

(2) 定義了全域性物件 sap：

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

(3) sap.ui.core.Core 類與其所有依賴項一起執行。

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

(4) 執行時配置(runtime configuration )由不同來源確定。

(5) 載入配置中宣告的所有庫和模組及其依賴項, 例如下面這段程式碼裡的 lib：

```javascript
<div>```

(6) 對於每個載入的庫，都會載入配置主題的 CSS 檔案。

例如：https://sapui5.hana.ondemand.com/resources/sap/ui/core/themes/base/library.css
![](https://img-blog.csdnimg.cn/img_convert/ed1a892556902db835d262a73da91044.png)

當所有庫都載入完畢並且文件準備就緒時，核心的 initEvent 被觸發並執行所有註冊的處理程式。

# Initialization Readiness

執行或啟動應用程式的最佳時間點是在框架初始化之後。有三種方法可以讓自己適應這個時間框架。以下列表詳細描述了這些初始化準備掛鉤，並提供了何時使用它們的示例。根據您的用例，您可能更喜歡一種方式而不是另一種方式。

## ComponentSupport module

在框架初始化後執行程式碼的最複雜方法是使用 sap.ui.core.ComponentSupport.

此選項適用於您希望使用 sap.ui.core.UIComponent 作為應用程式入口點的場景。

ComponentSupport 允許您在 HTML 檔案中宣告性地定義一個或多個 sap.ui.core.UIComponent 例項，並負責為您建立必要的 sap.ui.core.ComponentContainer。

有關詳細的使用指南，請參閱 ComponentSupport 文件。

# Standalone data-sap-ui-oninit module

除了使用 sap.ui.core.ComponentSupport，您還可以在 SAPUI5 引導指令碼元素上定義一個名為 data-sap-ui-oninit 的資料屬性。

此屬性應引用有效的 SAPUI5 模組，如下面的程式碼段所示。

```html</div>
```

(6) 對於每個載入的庫，都會載入配置主題的 CSS 檔案。

例如：https://sapui5.hana.ondemand.com/resources/sap/ui/core/themes/base/library.css
![](https://img-blog.csdnimg.cn/img_convert/ed1a892556902db835d262a73da91044.png)

當所有庫都載入完畢並且文件準備就緒時，核心的 initEvent 被觸發並執行所有註冊的處理程式。

# Initialization Readiness

執行或啟動應用程式的最佳時間點是在框架初始化之後。有三種方法可以讓自己適應這個時間框架。以下列表詳細描述了這些初始化準備掛鉤，並提供了何時使用它們的示例。根據您的用例，您可能更喜歡一種方式而不是另一種方式。

## ComponentSupport module

在框架初始化後執行程式碼的最複雜方法是使用 sap.ui.core.ComponentSupport.

此選項適用於您希望使用 sap.ui.core.UIComponent 作為應用程式入口點的場景。

ComponentSupport 允許您在 HTML 檔案中宣告性地定義一個或多個 sap.ui.core.UIComponent 例項，並負責為您建立必要的 sap.ui.core.ComponentContainer。

有關詳細的使用指南，請參閱 ComponentSupport 文件。

# Standalone data-sap-ui-oninit module

除了使用 sap.ui.core.ComponentSupport，您還可以在 SAPUI5 引導指令碼元素上定義一個名為 data-sap-ui-oninit 的資料屬性。

此屬性應引用有效的 SAPUI5 模組，如下面的程式碼段所示。

```html

```

SAPUI5 核心將確保在框架初始化過程後在正確的時間點載入和執行 data-sap-ui-oninit 模組。在此模組中，您可以執行其他應用程式程式碼，例如建立一個新的 XML 檢視例項。

此外，由於不需要額外的內聯 script 標記，因此專用的 oninit 模組可以根據您的要求實現更好的 CSP(
Content Security Policy) 合規性。

這種方式在 Jerry 的文章[SAP UI5 初學者教程之二：SAP UI5 的引導過程 Bootstrap](https://jerry.blog.csdn.net/article/details/120614665) 裡有詳細闡述。

# attachInit function
attachInit 函式的回撥在框架初始化後直接執行。這段程式碼可以寫在你的主 HTML 檔案中的一個單獨的內聯 script 標籤中：

```javascript
sap.ui.getCore().attachInit(function(){
    // 應用程式自己的啟動邏輯可以寫在這裡
});
```

# Loading of Additional Resources During Bootstrap

SAPUI5 執行時在引導期間為控制庫載入和解釋附加資源。
檔案按以下順序載入：

(1) Library bootstrap file /<context-path>/resources/<library-name>/library.js

library.js 是一個 JavaScript 檔案，其中包含庫提供的所有列舉型別的 JavaScript 程式碼以及獨立於庫中控制元件的特定於庫的初始化程式碼。該檔案呼叫 sap.ui.getCore().InitLibrary 方法，其中包含一個描述庫內容的物件（包含的控制元件列表、元素等）。對於使用 SAPUI5 應用程式開發工具或 SAPUI5 離線構建工具開發的庫，此檔案在構建過程中自動生成。

(2) Library style sheet file /<context-path>/resources/<library-name>/themes/<theme-name>/library.css

包含與此庫相關的所有樣式的標準 CSS 檔案。對於應用程式開發工具，此檔案在構建期間自動生成。

# Dynamic Loading of Libraries

SAPUI5 提供了 sap.ui.getCore().loadLibary() 方法，除了執行時配置中宣告的庫外，還提供了執行時載入庫。
載入後，您可以使用庫中的所有控制元件。 對於這些額外的庫，同樣的限制適用於宣告的庫：只有在 HTML 頁面的 document.ready 事件之後才能訪問文件物件模型 (DOM)。 此外，渲染適用於這些庫的方式與宣告的庫相同。</theme-name></library-name></context-path></library-name></context-path>

SAP UI5 的初始化過程

相關文章