关闭

SAPUI5 (09) - 模块化

950人阅读 评论(1) 收藏 举报
分类:

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

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

SAPUI5框架对module(模块)提供内在的支持。在sapui5中,模块指的是可以在浏览器(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*?*)
申明一个模块,以确保模块存在。这个语句必须出现在模块代码(也就是代码文件)的第一句。

示例一示例代码来源)

// 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.declarejQuery.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)
确保当前代码继续之前,所指定的模块被加载和执行。如果所需要的模块没有被加载,将会被同步加载和执行,如果已经加载,就忽略。

sap.ui.define()

语法:sap.ui.define(sModuleName*?*, aDependencies*?*, vFactory, bExport*?*)
定义module,比如controller并指定其依赖的模块,所定义的module具有全局命名空间(global namespace)。global namespace的意思是module中的对象在整个Application中可见。函数有四个参数,一般只需要参数2(aDependencies)参数3(vFactory)参数2指定依赖的模块,参数3定义一个工厂函数。sap.ui.define()函数被广泛用于定义controller。一般建议省略参数1(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);
            }
        });
    }
);

这个代码的模式是固定的,我们一般只需要基于这个代码片段作三个方面的变更:
1) 增加依赖的模块到数组中:sap.ui.define(["sap/ui/core/mvc/Controller", "<other_modules>"],...);
2) 变更Controler.extend()第一个参数的模块名
3)在Controler.extend()的第二个参数中编写自己的函数,函数之间用逗号分开。

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:161060次
    • 积分:2578
    • 等级:
    • 排名:第14984名
    • 原创:93篇
    • 转载:0篇
    • 译文:1篇
    • 评论:85条
    文章分类
    最新评论