如何理解 SAP UI5 的 sap.ui.define 函数
Understanding sap.ui.define by Hello World
隨著 1.28 版本中 sap.ui.define 函數(shù)的引入，SAPUI5 引入了對異步模塊定義 (AMD) 的支持。AMD 是 Asynchronous Module Definition 的縮寫。
所謂模塊(Module)，即是可以在瀏覽器中加載和執(zhí)行的 JavaScript 文件。
異步模塊定義 (AMD) 是一種 JavaScript API，它指定了一種定義模塊及其依賴項的方式，以便它們可以異步加載而無需擔(dān)心加載順序。
下面我們通過一個具體的例子來講解 sap.ui.define 的工作原理。
Create an Application Project for SAPUI5
打開 Eclipse 并轉(zhuǎn)到菜單選項，文件 -> 新建 -> 其他…。 在 New 窗口中，打開節(jié)點 SAPUI5 Application Development 并選擇 Application Project 選項。 單擊下一步按鈕。
為項目提供一個名稱。 我們稱之為 sapui5.amd.demo。 選擇庫 sap.m 并選中 Create an Initial View 選項。 單擊下一步按鈕。
在下一個窗口中，為視圖提供一個名稱。 我們稱其為主要的。 選擇 Development Paradigm 作為 XML。 這將創(chuàng)建一個 XML 視圖。 單擊完成按鈕。
創(chuàng)建好的項目具有如下的層級結(jié)構(gòu)：
Modify index.html
打開 index.html 文件并使用以下代碼更新它。 Bootstrap 腳本部分已被修改，以防止過早加載 sap.m 庫。 此外，出于類似原因，創(chuàng)建 sap.m.App 實例的自動生成代碼已被注釋掉。 當(dāng) index.html 在瀏覽器中運行時，for 循環(huán)會打印出加載庫模塊的初始列表。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /><!-- Replace this with the modified bootstrap section below <script src="resources/sap-ui-core.js"id="sap-ui-bootstrap"data-sap-ui-libs="sap.m"data-sap-ui-theme="sap_bluecrystal"> </script> --><!-- Do not load the sap.m library right now. We'll do it asynchronously in sap.ui.define --> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"data-sap-ui-theme="sap_bluecrystal"></script><script>sap.ui.localResources("sapui5.amd.demo");/* * Since we are not creating an instance of sap.m.App to* avoid the loading of sap.m at this stage, comment this out.*//*var app = new sap.m.App({initialPage:"idmain1"});var page = sap.ui.view({id:"idmain1", viewName:"sapui5.amd.demo.main", type:sap.ui.core.mvc.ViewType.XML});app.addPage(page);app.placeAt("content");*/ // Get reference to the Core objectvar oCore = sap.ui.getCore();// Place the XML view in the body of this pageoCore.attachInit(function() {sap.ui.core.mvc.XMLView({viewName : "sapui5.amd.demo.main",}).placeAt("content");});// Set the log level to INFOjQuery.sap.log.setLevel(jQuery.sap.log.Level.INFO);// Print out the list of all currently loaded librariesjQuery.sap.log.info("--- Loaded Libraries in INDEX.HTML ---");var oLibMap = oCore.getLoadedLibraries();for ( var key in oLibMap) {jQuery.sap.log.info("Library name", key);} </script></head> <body class="sapUiBody" role="application"><div id="content"></div> </body> </html>Modify main.view.xml
打開 main.view.xml 文件并使用以下代碼更新它。 它幾乎與 Eclipse 中自動生成的代碼相同，只是添加了標(biāo)題。
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"controllerName="sapui5.amd.demo.main" xmlns:html="http://www.w3.org/1999/xhtml"><Page title="Asynchronous Module Definition Demo"><content> </content></Page> </core:View>Modify main.controller.js
控制器是 AMD 相關(guān)操作發(fā)生的地方。 打開 main.controller.js 文件并使用下面給出的代碼更新它。 這里要注意的重要變化是在第一行中，函數(shù)調(diào)用 sap.ui.controller () 已被注釋掉，以便為 AMD 函數(shù) sap.ui.define () 讓路，它具有以下語法：
sap.ui.define(sModuleName?, aDependencies?, vFactory, bExport?)
(1) sModuleName 是一個可選參數(shù)，它是正在定義的模塊的名稱。 如果省略，它將替換為用于請求模塊的名稱。 所以，如果一個模塊的名字比如說“LoginModule”沒有作為參數(shù)傳遞，它可以被請求為“sap/login/LoginMudule”，因為它存儲在一個文件“sap/login/LoginModule.js”中。
(2) aDependencies 是作為依賴項的模塊名稱的字符串?dāng)?shù)組。
這個數(shù)組包含了在確定當(dāng)前定義的模塊的值之前需要加載的依賴模塊。
(3) vFactory 是一個強(qiáng)制性的工廠函數(shù)，用于計算模塊的值。
每個依賴模塊名稱都作為參數(shù)傳遞給這個工廠函數(shù)，其順序與它們在字符串?dāng)?shù)組中指定的順序相同。
(4) bExport 是一個布爾變量，保留供 SAP 使用。
在下面的示例中，沒有傳遞模塊名稱。 并且依賴字符串?dāng)?shù)組 包含模塊名稱 [“sap / ui / core / mvc / Controller”, “sap / m / MessageToast”]。 然后將這些名稱作為參數(shù)（以相同的順序，即Controller、MessageToast）傳遞給工廠函數(shù)。
控制器的 onInit 生命周期方法中的代碼打印出所有已加載庫的列表。
最后 onAfterRendering 函數(shù)使用 sap.m.MessageToast.show () 在屏幕上顯示一個簡短的 Hello World 消息。
//sap.ui.controller("sapui5.amd.demo.main", { sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function(Controller, MessageToast) {"use strict";return Controller.extend("sapui5.amd.demo.main", { /** * Called when a controller is instantiated and its View controls (if available) are already created. * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization. * @memberOf sapui5.amd.demo.main */onInit: function() {// Get reference to the Core objectvar oCore = sap.ui.getCore();// Print out the list of all currently loaded librariesjQuery.sap.log.info("--- Loaded Libraries in INIT of controller ---"); var oLibMap = oCore.getLoadedLibraries();for (var key in oLibMap) {jQuery.sap.log.info("Library name", key);}},/** * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered * (NOT before the first rendering! onInit() is used for that one!). * @memberOf sapui5.amd.demo.main */ // onBeforeRendering: function() { // // },/** * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here. * This hook is the same one that SAPUI5 controls get after being rendered. * @memberOf sapui5.amd.demo.main */onAfterRendering: function() {MessageToast.show("Hello World!");},/** * Called when the Controller is destroyed. Use this one to free resources and finalize activities. * @memberOf sapui5.amd.demo.main * */ // onExit: function() { // // }});});注意：“use strict”這個文字表達(dá)式是由 JavaScript 1.8.5 (ECMAScript 5) 引入的。 它告訴瀏覽器以所謂的“嚴(yán)格模式”執(zhí)行代碼。 嚴(yán)格模式有助于在開發(fā)時的早期狀態(tài)檢測潛在的編碼問題，這意味著，例如，它確保在使用變量之前聲明變量。 因此，它有助于防止常見的 JavaScript 陷阱，因此使用嚴(yán)格模式是一個很好的做法。
Deploy and Run Application
啟動服務(wù)器并部署應(yīng)用程序。 打開一個新的瀏覽器窗口（此示例使用 Chrome 瀏覽器）并打開 Chrome 開發(fā)者工具。
在瀏覽器中打開如下網(wǎng)址 http://localhost:8180/sapui5.amd.demo/
請根據(jù)您的服務(wù)器配置使用端口號。 加載 index.html 會簡要顯示 Hello World 消息，并將在開發(fā)人員工具控制臺中打印日志。
從打印的 log 信息可以看到： sap.m 模塊直到將模塊依賴列表傳遞給 sap.ui.define之后才加載。
更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的如何理解 SAP UI5 的 sap.ui.define 函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《暗黑破坏神4》将于6月2日抢先体验：P
- 下一篇： SAP UI5 视图控制器 View C