天天看點

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

如下圖所示:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m, sap.ui.comp"
    data-sap-ui-bindingSyntax="complex" 
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
  "sap.ui.demo.CombineLatest": "./"
    }'>
</script>      

我剛學習 SAP UI5 時,對 data-sap-ui-resourceroots 的作用很是費解。

浏覽我們開發的整個 SAP UI5 項目資源,無論是 Component.js:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

還是視圖的控制器:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

還是視圖的 id 本身,都包含了 sap.ui.demo.CombineLatest 的字首:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

如果我們把 index.html 裡的 data-sap-ui-resourceroots 指令去掉:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

會發現應用根本無法加載了,Chrome 開發者工具裡報了很多資源檔案無法加載的錯誤。

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

摘取其中一條錯誤消息出來分析。現在 Component.js 的加載路徑為:

https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Component.js

顯然,這個路徑是繼承自 index.html 裡 id 為 sap-ui-bootstrap 裡的 src 屬性定義的 SAP UI5 庫檔案:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

我們工程檔案裡的 Component.js, 其 id 為 sap.ui.demo.CombineLatest.Component:

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

SAP UI5 架構在加載時,将 id 轉換成 url:

sap/ui/demo/CombineLatest/Component.js,

然後在其頭部,拼接上來自 id 為 sap-ui-bootstrap 裡的 src 屬性定義的 SAP UI5 庫檔案的字首:

https://sapui5.hana.ondemand.com/resources/

最後得到的路徑:

顯然,這個路徑是錯誤的。因為 Component.js 僅僅存在于我們工程自身。

是以需要使用 data-sap-ui-resourceroots 告訴 SAP UI5 加載器,如果遇到字首為 sap.ui.demo.CombineLatest 的本地資源檔案,**不要使用 sap-ui-core.js **的字首即

https://sapui5.hana.ondemand.com/resources

,而是使用本地路徑./

SAP UI5 應用 index.html 裡 data-sap-ui-resourceroots 指令的含義和作用

修改之後,資源加載成功,正确的路徑應該是:http://localhost:3002/combine/Component.js

這個路徑是怎麼來的呢?

(1) Component.js 的 id 為 sap.ui.demo.CombineLatest.Component,因為 data-sap-ui-resourceroots 生效,将 sap.ui.demo.CombineLatest.Component 替換成 ./Component

(2) ./Component 替換成 URL:/Component.js

(3) ./之前的 url 為 localhost:3002/combine

得到最後的絕對路徑去加載 Component.js:

http://localhost:3002/combine/Component.js

繼續閱讀