requre.js 用法

最新推荐文章于 2025-04-16 11:18:34 发布

木槿花开lalala

最新推荐文章于 2025-04-16 11:18:34 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zl_best/article/details/70196322

版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

使用require.js的目的：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
一、require.js的加载
1.加载require.js（两种方法）：
（1）将<script src="js/require.js"></script>放在网页底部加载
（2）<script src="js/require.js" defer async="true" ></script>实现异步加载
2.加载自己代码（main.js）：
<script src="js/require.js" data-main="js/main"></script>
注：data-main属性的作用是指定网页程序的主模块，它会第一个被require.js加载。
二、主模块写法

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　// some code here
});

require()函数接受两个参数：
第一个参数是一个数组，表示所依赖的模块（['moduleA', 'moduleB', 'moduleC']），即主模块依赖这三个模块；
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
三、模块的加载
require.config()方法可以对模块的加载行为进行自定义。
require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。

(1)逐一指定路径

require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

(2)直接改变基目录（baseUrl）

require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

四、AMD模块的写法
require.js加载的模块，采用AMD规范，因此模块必须按照AMD的规定来写，即模块必须采用特定的define()函数来定义。
例如main.js写法如下：

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

加载方法如下：

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

参考阮一峰网络日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html