require用法

在⽂件中

$(function(){

$("#div1").css("background-color","blue");

})

为了使中的代码⽣效，必须要把这⾏代码放到

src="js/">后⾯，这样在使⽤的框架和js⽂件较多的时候，它们的导⼊顺序就会变得很⿇烦。

的诞⽣就是为了解决上⾯所说的两个问题：

1.实现js⽂件的异步加载，避免⽹页失去响应；

2.管理模块之间的依赖性，便于代码的编写和维护。

三：的加载

下载完成后，将它放在⽹站项⽬的js⼦⽂件夹下就可以使⽤了：

这⾥可能会遇到⼀个问题：加载这个⽂件，也可能造成⽹页失去响应，这个问题的解决办法有两种：

1.将这⾏代码写成如下格式：

其中：async属性和defer属性表明这个⽂件需要异步加载，避免⽹页失去响应。IE只⽀持defer属性，⽽不⽀持async属性。

2.将⽂件放到⽹页底部加载。

②：加载完之后，我们就可以加载⾃⼰的代码了，假设我们⾃⼰的js⽂件命名为，同样放于js⽂件夹下，那么,只需要执⾏如

下代码：

上述代码中，data-main属性的作⽤是指定⽹页程序的主模块。即js⽬录下⾯的，这个⽂件会第⼀个被加载。由于

默认的⽂件后缀名是js，所以可以省略掉".js"简写成main。

四：基本API

在上⼀部分中，我们引⼊了⽂件，的写法：

define(function(){

functionfun1(){

alert("已⽣效");

}

fun1();

})

这样，我们就通过define函数定义了⼀个模块，然后在页⾯中通过AMD规范定义的的require()函数使⽤：

require(["js/main"]);

⼀般情况下，它会依赖于其他的js框架，⽐如jquery等等，那么，我们这时就要在页⾯⽂件中。我们需要按照以下格式来写：

require(['A','B','C'],function(A,B,C){

//js代码

});

require()函数接受两个参数。第⼀个参数是⼀个数组，表⽰所依赖的框架，上例就是['A','B','C']，即⾥的代码需要⽤到这三个模块；

第⼆个参数是⼀个回调函数，当前⾯指定的模块都加载成功后，它将被调⽤。加载的模块会以参数形式传⼊该函数，从⽽在回调函数内部就

可以使⽤这些模块。

require()会异步加载A,B,C三个模块，浏览器不会失去响应；它指定的回调函数，只有前⾯的模块都加载成功后，才会运⾏，解决了依赖性

的问题。

下⾯。我们就以jquery为例，说明这个函数是怎样运⾏的：

require(['jquery'],function($){

//jquery代码

});

会先加载jQuery，然后再运⾏回调函数。的代码就写在回调函数中。注意：require中的依赖是⼀个数组，即使只有⼀个依

赖，你也必须使⽤数组来定义。

五：加载⽂件

在上⼀部分中，的依赖模块是['jquery']。默认情况下，会假定这个模块与在同⼀个⽬录，⽂件名是，然后⾃动加载，除此之

外，我们可以通过()⽅法，我们可以对模块的加载⾏为进⾏⾃定义，()就写在的头部，它的参数是⼀个对象，这个对象的

paths属性指定各个模块的加载路径。

({

paths:{

"jquery":"",

"anjular":""

}

});

上述模块路径默认与在同⼀个⽬录（js⼦⽬录）。如果这些模块在其他⽬录，⽐如js/lib⽬录，则有两种写法。⼀种是逐⼀指定路径：

({

paths:{

"jquery":"lib/",

"anjular":"lib/"

}

});

另⼀种则是直接改变根⽬录（baUrl）：

({

baUrl:"js/lib",

paths:{

"jquery":"",

"anjular":""

}

});

之前的例⼦中加载模块都是本地js，但是⼤部分情况下⽹页需要加载的JS可能来⾃本地服务器、其他⽹站或CDN，这样就不能通过这种⽅

式来加载了，我们以加载⼀个jquery库为例：

({

paths:{

"jquery":["/jquery/2.0.3/jquery"]

}

})

上⾯的例⼦中重复出现了配置，如果每个页⾯中都加⼊配置，必然会⼗分⿇烦，requirejs提供了⼀种叫"主数据"的功能，我们可

以将所有的配置放到中，在页⾯中调⽤它，

就可以使每⼀个页⾯都使⽤这个配置，然后页⾯中就可以直接使⽤require来加载所有的短模块名。

六：AMD模块的写法

加载的模块，采⽤AMD规范，也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采⽤特定的define()函数来定

义。如果⼀个模块不依赖其他模块，那么可以直接定义在define()函数之中。假定现在有⼀个⽂件，它定义了⼀个math模块。那

么，就要这样写：

define(function(){

varadd=function(x,y){

returnx+y;

};

return{

add:add

};

});

然后在页⾯中：

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

alert((1,1));

});

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

define(['jquery'],function($){

$("#div1").css("background-color","red");

})

当require()函数加载上⾯这个模块的时候，就会先加载⽂件。

七：第三⽅模块

通过require加载的模块⼀般都需要符合AMD规范即使⽤define来申明模块，但是部分时候需要加载⾮AMD规范的js，这时候就需要⽤到另⼀个功能：shim：

1.⾮AMD模块输出，将⾮标准的AMD模块变成可⽤的模块，例如：在⽼版本的jquery中，是没有继承AMD规范的，所以不能直接require["jquery"],这时候就需

要shim

({

shim:{

"jquery":{exports:"$"}

}

})

这样配置后，我们就可以在其他模块中引⽤jquery模块：

require(["jquery"],function(_){

$("#div1").css("background-color","red");

})

2.插件形式的⾮AMD模块，我们经常会⽤到jquery插件，⽽且这些插件基本都不符合AMD规范，⽐如插件，这时候就需要将form

插件加⼊到jquery中：

({

shim:{

"":{

deps:["jquery"]

}

}

})

(["jquery",""],function($){

$(function(){

$("#form").ajaxSubmit({...});

})

})

以上就是require的基本⽤法详解。