SAPUI5 (09) - 模块化

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

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()的第二个参数中编写自己的函数，函数之间用逗号分开。