SAPUI5 (09) - 模块化

2017-01-03 本文已影响493人 Stone0823

OpenUI5 的模块化

JavaScript 并没有对模块提供内在支持，下一代版本 (ECMAScript 2015) 将提供，ECMAScript 2015 可能还需要相当长的一段时间才能普及。目前第三方的解决方案主要有两种：

CommonJS 模块：比如 node.js 的实现，主要用于服务器端，被设计为同步加载;
Asynchronous module definition：异步模块定义，简称 AMD。和 CommonJS 不同，主要被设计为异步加载，比如流行的 requireJS。所谓异步，就是这些模块按需加载，从而提高程序的性能。

而 OpenUI5 对 module（模块）提供内在的支持。在 OpenUI5 中，模块指的是可以在浏览器 (browser) 中加载和执行的 JavaScript 文件。如何将代码组织成不同的模块，并没有一个统一的规则，取决于开发人员的想法。当然，一般来说，同一个模块的内容应该有着共同的主题，而不是随意将代码分割成不同的文件。

如何加载模块

jQuery.sap.declare() 声明一个模块，作用是确保模块存在
jQuery.sap.require() 同步加载代码的依赖模块
sap.ui.define() 定义 JavaScript 模块，异步加载依赖 (dependancies) 的模块， sap.ui.define() 定义的模块具有全局命名空间 (global namespace)。
sap.ui.require() 异步加载依赖的模块，不具有全局命名空间。

jQuery.sap.declare

语法：

jQuery.sap.declare(sModuleName, bCreateNamespace?) : void

说明：声明一个模块，以确保模块存在。这个语句必须出现在模块代码（也就是代码文件)的第一句。官方文档已标记为从 v1.52 版本后过时 (depreciated)。

示例一（示例代码来源)

// A module declaration, ensures that sap.ui.sample exists
jQuery.sap.declare("sap.ui.sample.MyClass");

// now it is safe to use that namespace object and assign a new member 'MyClass'
// to it
// Note that jQuery.sap.declare does not create the MyClass object.
// So the developer can decide whether it should be a function, an object,
// or an instance of a specific type
sap.ui.sample.MyClass = { key1 : 'value1' };

// the following line guarantees that <code>sap.ui.sample.subspace</code>
// is a valid object
sap.ui.namespace("sap.ui.sample.subspace");

// now one can use this namespace as well
sap.ui.sample.subspace.member1 = 42;
sap.ui.sample.subspace.member2 = 3.141;

示例二

本示例代码说明如何使用jQuery.sap.declare和jQuery.sap.require 创建 controller 模块。

    jQuery.sap.declare("example.MyController");
    jQuery.sap.require("sap.ui.core.mvc.Controller");

    "use strict";

    sap.ui.core.mvc.Controller.extend("example.MyController", {
        onInit: function () {
        }
   });

jQuery.sap.require

语法：

 jQuery.sap.require(vModuleName)

确保当前代码继续之前，所指定的模块被加载和执行。如果所需要的模块没有被加载，将会被同步加载和执行，如果已经加载，就忽略。原文：

Ensures that the given module is loaded and executed before execution of the current script continues.
By issuing a call to this method, the caller declares a dependency to the listed modules.
Any required and not yet loaded script will be loaded and execute synchronously. Already loaded modules will be skipped.

sap.ui.define()

语法：

sap.ui.define(sModuleName?, aDependencies?, vFactory, bExport?)

定义一个 module，并指定其依赖的模块，所定义的 module 具有全局命名空间 (global namespace)。global namespace 的意思是 module 中的对象在整个 Application 中可见。

函数有四个参数，一般只需要参数 aDependencies 和参数 vFactory。

aDependencies：指定依赖的模块
vFactory：定义一个工厂函数。

sap.ui.define() 函数被广泛用于定义 controller。一般建议省略参数 sModuleName，也就是说不要对模块名称进行硬编码，这样对模块的访问较方便。

sap.ui.require()

用于解决 (resolve) 代码的依赖模块。和 jQuery.sap.require() 不同，sap.ui.require() 是异步加载。

使用 sap.ui.define() 定义 controller

刚才介绍了 sap.ui.define() 的语法，下面介绍如何使用 sap.ui.define() 定义controller。我们以上一篇的代码为例，对 controller 的代码进行改写。

改写之前的代码：

sap.ui.controller("suppliers.supplieroverview", {
    onInit: function() {        
        var oModel = sap.ui.model.json.JSONModel('models/suppliers.json');          
        this.getView().setModel(oModel);
    }
});

改写之后的代码：

sap.ui.define(["sap/ui/core/mvc/Controller"], 
    function(Controller){
        "use strict";
        
        return Controller.extend("suppliers.supplieroverview", {
            onInit: function() {
                var oModel = sap.ui.model.json.JSONModel();
                oModel.loadData('models/suppliers.json');
                this.getView().setModel(oModel);
            }
        });
    }
);

这个代码可以看作模式化固定固定代码，我们一般只需要基于这个代码片段作三个方面的变更：

增加依赖的模块，放到参数 aDependencies （数据类型为数组）中：sap.ui.define(["sap/ui/core/mvc/Controller", "<other_modules>"],...);
变更 Controler.extend() 第一个参数的模块名
在 Controler.extend() 的第二个参数中编写自己的函数，函数之间用逗号分开。