Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)

一、AMD规范探索

1、AMD规范（即异步模块加载机制）

我们在接触js的时候，一般都是通过各种function来定义一些方法，让它们帮我们做一些事情，一个js可以包含很多个js，而这些function都是单独存在。

在开发的时候我们会将几个function组合成一个功能，我们称这个功能的几个function为一个模块。

1.1、模块化JS

现在AMD规范定义了这种模块对象，我们称之为直接对象，用于封装这个模块种所有变量和方法。

举个例子：

<span style="font-size:18px;">var model1=(function() {
    var oldtext = {};
    var _setText = function(id, text) {
        var node = document.getElementById(id);
        oldtext[id] = node.innerHTML;
        node.innerHTML = text;
    };
    var _restoreText = function(id) {
        document.getElementById(id).innerHTML = oldtext[id];
    };

    return {
        setText: _setText,
        restore: _restoreText
    }
});</span>

这里我们定义了一个JS的直接对象，这个对象里面封装了一个数组变量和两个方法，return用于对外提供调用入口，现在我们可以直接通过model1().setText(id,text)或者model1().restore(id)的方式调用该对象里提供的方法。

当然现在我们可以按照AMD规范来这样写：

<span style="font-size:18px;">define (function() {
    var oldtext = {};
    var _setText = function(id, text) {
        var node = document.getElementById(id);
        oldtext[id] = node.innerHTML;
        node.innerHTML = text;
    };
    var _restoreText = function(id) {
        document.getElementById(id).innerHTML = oldtext[id];
    };

    return {
        setText: _setText,
        restore: _restoreText
    }
});</span>

没错，只把直接变量基础上把接收变量改为define就是一个符合AMD规范的异步模块了。

1.2、AMD规范简单到只有一个API（使用AMD）

define函数：

<span style="font-size:18px;">define([module-name?], [array-of-dependencies?], [module-factory-or-object]);</span>

module-name: 模块标识，可以省略。

array-of-dependencies: 所依赖的模块，可以省略。

module-factory-or-object: 模块的实现，或者一个JavaScript对象。

1.3、所以在Dojo中这样写就是定义了一个模块

define([
    'dojo/dom'
], function(dom) {
    var oldText = {};
    return {
        setText: function(id, text) {
            var node = dom.byId(id);
            oldText[id] = node.innerHTML;
            node.innerHTML = text;
        },

        restoreText: function(id) {
            var node = dom.byId(id);
            node.innerHTML = oldText[id];
            delete oldText[id];
        }
    };
});

既然我们定义了一个模块，自然要使用这个模块，如何使用？异步加载机制！

1.4、异步加载JS

有许多js库都是支持异步加载js的，比如比较流行的requrieJS，当然他们的用法都是一致的。

1.4.1、当然了，在实现异步加载自定义的JS模块我们还需要明确这个模块所在的目录：

<span style="font-size:18px;">var dojoConfig = {
    async: true,
    packages: [{name: "js",location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
    }]
};</span>

1.4.2、完成了设置，我们就可以异步调用JS（不需要在页面中通过script标签加载JS）：

<span style="font-size:18px;">require(["js/public/swapText"], function(swapText) {
         swapText.setText(index, msg);
    });</span>

后面会继续探讨dojo框架技术。。。。