Javascript AMD模块化规范

最新推荐文章于 2024-10-06 10:09:03 发布

转载最新推荐文章于 2024-10-06 10:09:03 发布 · 387 阅读

文章标签：

#javascript #模块化 #对象 #异步 #asynchronous

本文详细解释了AMD模块化规范的核心概念，并通过四个代码示例展示了如何定义和加载模块。从模块定义、加载机制到实际应用，本文为开发者提供了全面的指导。

AMD是"Asynchronous Module Definition"的缩写，意思是"异步模块定义"。

模块定义
define(id?, dependencies?, factory);

其中：

id: 模块标识，可以省略。
dependencies: 所依赖的模块，可以省略。
factory: 模块的实现，或者一个JavaScript对象。

代码示例1: 定义一个alpha模块，依赖require，exports，beta模块

define("alpha",
 ["require","exports","beta"],function (require,
 exports, beta) {

     exports.verb
 = function()
 {

         return beta.verb();

         //Or:

         return require("beta").verb();

     }

});　

代码示例2: 定义个匿名模块，依赖alpha模块

define(["alpha"],function (alpha)
 {

    return {

        verb:function(){

            return alpha.verb()
 + 2;

        }

    };

});

代码示例3: 使用JSON定义一个没有依赖的匿名模块。

define({

  add:function(x,
 y){

    return x
 + y;

  }

});

代码示例4：定义一个兼容Modules/Wrappings模块化规范的匿名模块。

Modules/Wrappings是CommonJS Modules的浏览器端解决方案。AMD规范兼容Modules/Wrappings。

define(function (require,
 exports, beta) {

    exports.verb
 = function()
 {

        return beta.verb();

        //Or:

        return require("beta").verb();

    }

});

模块加载
require([module], callback)

AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块，所有模块加载完成之后的回调函数。

其中：

[module]：是一个数组，里面的成员就是要加载的模块；
callback：是模块加载完成之后的回调函数。

代码示例：加载一个math模块，然后调用方法 math.add(2, 3);

require(['math'],function (math)
 {

　math.add(2,
 3);

});　　