AMD规范与RequireJS

最新推荐文章于 2023-04-18 17:45:42 发布

愚舜

最新推荐文章于 2023-04-18 17:45:42 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： AMD规范与RequireJS

本文链接：https://blog.youkuaiyun.com/first_shun/article/details/93533084

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了AMD规范，即异步模块定义机制，RequireJS是其代表性实现。它是小型JavaScript模块加载框架，模块定义清晰，不污染全局环境。还阐述了RequireJS模块的定义（独立与非独立模块）、加载（require方法）及require的全局配置（config方法）等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AMD规范(Asynchronous Module Definition)，异步模块定义：指的是一种定义模块和异步加载模块的一种机制规范，而其中又代表性的则为RequireJS；RequireJS是一个小型的JavaScript模块加载框架，是AMD规范最好的实现之一，它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示模块之间的相互依赖关系，RequireJS的使用也非常简单，直接通过script标签引入即可：

RequireJs主要分为模块的定义（通过define方法）和模块的加载（通过require方法）两部分：

1、模块的定义

(1) 独立模块，是不需要依赖其他模块，可以独立运行的模块；

define(function () {
	return {
	    method1: function() {},
    };
});

(2) 非独立模块，需要依赖其他模块运行的模块，中括号内包含的模块为当前模块依赖的模块；

define(['m1', 'm2'], function(m1, m2) {
    return {
        method: function() {
            m1.method();
			...
        }
    };

});

2、模块的加载

模块的加载使用的是require方法，第一个参数是需要加载的模块，第二个参数则是执行的回调函数

require(['m1', 'm2'], function ( m1, m2) {
        foo.doSomething();
});

3、require的全局配置(config方法)

require方法本身也是一个对象，带有的config可以用来require.js运行参数，require加载其他的一些JavaScript库（jQuery等）模块，这些模块一般为本地js或者CDN等，如果每个人都通过require加载可能会显得特别的乱与繁琐，可以通过在config中统一配置：

1.config方法主要包含的参数有：

(1) paths：指定模块加载的路径，可以通过数组的方式指定多个路径，如果第一个加载不成功则按第二个路径加载，本地文件可以省略".js"的后缀。

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery","js/jquery"],
        "jaueryUi": ["http://libs.baidu.com/jquery/2.0.3/jquery-ui"]
    }
})

(2) baseUrl：指定本地模块位置的基准目录，即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定，data-main指定的路径是模块加载的根路径，我们在加载模块库(类似于jquery，可以不用配置paths)，在scripts/jquery就可以被加载运行。

require.config({
    baseUrl : "js"
})
//require.js
<script data-main="scripts/main" src="require.js"></script>

(3) shim：用来加载不兼容AMD的模块库，例如underscore库等。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

引用：

require(["jquery"],function($){
    $(function(){
        alert("load finished");  
    })
})