SAPUI5基础知识8 - 模块（Module）的使用

news2024/11/17 8:18:32

1. 背景

在SAPUI5中，几乎所有东西都是一个模块（例如：控件，控制器，组件等等），通过依赖管理，模块间可以相互调用。这样做的好处是，可以仅在需要时才去加载必需的模块，进而提高应用程序的性能。

SAPUI5使用AMD (Asynchronous Module Definition)模式来定义和加载模块，可以使用sap.ui.define来定义一个新的模块，使用sap.ui.require来加载一个模块。

2. 示例

2.1 模块定义

sap.ui.define用于定义一个新的模块。它接受两个参数：

依赖数组（Dependencies Array）：这是一个字符串数组，包含了当前模块所依赖的其他模块的名称。
工厂函数（Factory Function）：这是一个函数，它的参数是依赖模块的导出值，它的返回值是当前模块的导出值。

定义模块的示例：

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("my.namespace.MyController", {
      onInit: function () {
         // Initialization code
      }
   });
});

在这个例子中，我们定义了一个新的模块，它依赖于sap/ui/core/mvc/Controller模块，工厂函数返回了一个扩展自Controller的新的控制器类。

2.2 模块加载

sap.ui.require用于加载一个或多个模块。它也接受两个参数：

依赖数组（Dependencies Array）：这是一个字符串数组，包含了需要加载的模块的名称。
回调函数（Callback Function）：这是一个函数，它的参数是依赖模块的导出值，它将在所有模块都加载完成后被调用。

加载模块的示例：

sap.ui.require([
   "my/namespace/MyModule"
], function(MyModule) {
   // Use MyModule
   var instance = new MyModule();
});

在这个例子中，我们加载了my/namespace/MyModul模块，并在回调函数中创建了它的一个实例。

注意，模块名称通常与它们的文件路径相对应，例如，模块my/namespace/MyModule通常在文件my/namespace/MyModule.js中定义。

3. 练习

在SAPUI5中，库资源通常也被称为模块资源。在本篇博客的练习中，我们将在上一篇博客练习的基础上，用自sap.m库的MessageToast控件完成消息弹出窗。

3.1 使用消息提示模块

首先，将所需模块的数组中引用sap/m/MessageToast。

这样，一但Controller和MessageToast两个模块都加载完毕，回调函数就会被调用，通过访问传递给函数的参数来使用这两个对象。

我们将使用MessageToast对象的show()方法向用户显示“Hello World”文本。

在App.controller.js文件中，让我们替换掉JavaScript原生的alert方法，改用MessageToast.show()。

这种异步模块定义（AMD）的语法允许将模块加载与代码执行分开，这样极大地提高了应用程序的性能。因为，浏览器可以在代码执行之前，决定资源何时、如何加载。

在这里插入图片描述
改动后的代码如下：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
], function (Controller, MessageToast) {
    "use strict";

    return Controller.extend("zsapui5.test.controller.App", {
        onShowHello: function () {
            MessageToast.show("Hello World");
        }
    });
});