定义模块 - AuxUI - 模块化前端UI框架

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。

AUXUI的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

定义简单的对象

如果一个模块仅含值对，没有任何依赖，则在define()中定义这些值对就好了。

<script type="text/javascript">
define({
    name: "AuxUI",
    version: "1.0.0",
    official: "auxui.aimlt.com",
});
</script>

函数式定义

如果一个模块没有任何依赖，但需要一个做setup工作的函数，则在define()中定义该函数，并将其传给define()：

<script type="text/javascript">
define(function () {

    return {
        color: "black",
        size: "unisize"
    }

});
</script>

存在依赖的函数式定义

如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一一对应。

<script type="text/javascript">
//定义一个命名模块
//参数1(form)：模块名,可以省略
//参数2(jquery) 表示这个模块依赖jquery，可以多个
define("form", ["jquery"], function($) {
    return {
        color: "blue",
        size: "large",
        addToCart: function() {

        }
    }
});
</script>

将模块定义为一个函数

对模块的返回值类型并没有强制为一定是个object，任何函数的返回值都是允许的。此处是一个返回了函数的模块定义：

<script type="text/javascript">
define(["form", "jquery"], function(form, $) {
    return function(title) {
        return '标题';
    }
});
</script>