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框架技术。。。。

上一篇:Java Script 中的 DOM 对象


下一篇:33333