如何理解SAPUI5的sap.ui.define函数

时间：2023-04-05 17:27:10 HTML5

通过HelloWorld理解sap.ui.define随着1.28版本引入sap.ui.define函数，SAPUI5引入了对AsynchronousModuleDefinition(AMD)的支持.AMD是异步模块定义的缩写。模块是可以在浏览器中加载和执行的JavaScript文件。异步模块定义(AMD)是一种JavaScriptAPI，它指定了一种定义模块及其依赖项的方法，以便可以异步加载它们而不必担心加载顺序。下面用一个具体的例子来说明sap.ui.define的工作原理。为SAPUI5创建一个应用程序项目打开Eclipse并转到菜单选项，文件->新建->其他...。在新建窗口中，打开节点SAPUI5ApplicationDevelopment并选择ApplicationProject选项。单击下一步按钮。提供项目的名称。我们称它为sapui5.amd.demo。选择库sap.m并选中创建初始视图选项。单击下一步按钮。在下一个窗口中，为视图提供一个名称。让我们称之为主要的。选择DevelopmentParadigmasXML。这将创建一个XML视图。单击完成按钮。创建的项目具有以下层次结构：修改index.html打开index.html文件并使用以下代码更新它。Bootstrap脚本部分已修改，以防止过早加载sap.m库。此外，出于类似原因，创建sap.m.App实例的自动生成代码已被注释掉。当index.html在浏览器中运行时，for循环打印出已加载库模块的初始列表。

修改main.view.xml打开main.view.xml文件并使用以下代码更新它它几乎与Eclipse中自动生成的代码相同，只是添加了标头。修改main.controller.js控制器是进行AMD相关操作的地方。打开main.controller.js文件并使用下面给出的代码更新它。此处需要注意的重要变化是，在第一行中，函数调用sap.ui.controller()已被注释掉，以便为AMD函数sap.ui.define()让路，该函数具有以下语法：sap。ui.define(sModuleName?,aDependencies?,vFactory,bExport?)(1)sModuleName是一个可选参数，它是正在定义的模块的名称。如果省略，它将被替换为用于请求模块的名称。因此，如果模块名称“LoginModule”未作为参数传递，则可以将其请求为“sap/login/LoginMudule”，因为它存储在文件“sap/login/LoginModule.js”中。(2)aDependencies是作为依赖的模块名称的字符串数组。该数组包含在确定当前定义的模块的值之前需要加载的依赖模块。(3)vFactory是强制性的工厂函数，用于计算模块的值。每个依赖模块名称作为参数传递给此工厂函数，顺序与它们在字符串数组中指定的顺序相同。(4)bExport是保留给SAP使用的布尔变量。在下面的示例中，没有传递模块名称。依赖字符串数组包含模块名称["sap/ui/core/mvc/Controller","sap/m/MessageToast"]。然后将这些名称作为参数（以相同的顺序、Controller、MessageToast）传递给工厂函数。控制器的onInit生命周期方法中的代码打印出所有已加载库的列表。最后，onAfterRendering函数使用sap.m.MessageToast.show()在屏幕上显示一条简短的HelloWorld消息。//sap.ui.controller("sapui5.amd.demo.main",{sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"],function(Controller,MessageToast){"usestrict";returnController.extend("sapui5.amd.demo.main",{/***当一个控制器被实例化并且它的视图控件（如果可用）已经被创建时调用。*可以是用于在显示之前修改View，绑定事件处理程序和进行其他一次性初始化。*@memberOfsapui5.amd.demo.main*/onInit:function(){//获取对Core对象的引用varoCore=sap.ui.getCore();//打印出所有当前加载库的列表jQuery.sap.log.info("---LoadedLibrariesinINITofcontroller---");varoLibMap=oCore.getLoadedLibraries();for(varkeyinoLibMap){jQuery.sap.log.info("Libraryname",key);}},/***类似onAfterRendering，但是调用了这个hookb在控制器的视图被重新渲染之前*（不是在第一次渲染之前！onInit()用于那个！）。*@memberOfsapui5.amd.demo.main*///onBeforeRendering:function(){////},/***在视图已呈现时调用（因此它的HTML是文档的一部分）。HTML的渲染后操作可以在这里完成。*这个钩子与SAPUI5控件在渲染后获得的钩子相同。*@memberOfsapui5.amd.demo.main*/onAfterRendering:function(){MessageToast.show("你好世界！”）;},/***控制器销毁时调用。使用这个来释放资源并完成活动。*@memberOfsapui5.amd.demo.main**///onExit:function(){////}});});注意：文字表达式“usestrict”由JavaScript1.8.5(ECMAScript5)定义，它告诉浏览器以所谓的“严格模式”执行代码。严格模式有助于在开发的早期阶段检测潜在的编码问题，这意味着，例如，它确保变量在使用之前声明。因此，它有助于防止常见的JavaScript陷阱，因此使用严格模式是一种很好的做法。部署和运行应用程序启动服务器并部署应用程序。打开一个新的浏览器窗口（本例为Chrome）并打开Chrome开发者工具。在浏览器中打开以下网址http://localhost:8180/sapui5....请根据您的服务器配置使用端口号。加载index.html将短暂显示HelloWorld消息，并将在开发人员工具控制台中打印日志。从打印的日志信息可以看出，直到将模块依赖列表传递给sap.ui.define后，sap.m模块才被加载。更多Jerry原创文章在这里：《王子熙》：

上一篇：如果没有框架呢？原生CSS+JS实现标签输入框

下一篇：从ES6重新认识JavaScript设计模式（四）：AdapterMode

如何理解SAPUI5的sap.ui.define函数相关文章