关于requirejs，我们知道它是一个模块加载器，requirejs是遵循 AMD 规范的。AMD(Async Module Definition)是说明？它是对模块定义的规范化产出 。关于这方面的更多内容大家可以查看：
那么如何使用requirejs呢？下面是前端吧使用requirejs时的简单记录。前端吧例子简单目录如下：（略有修改）
myproject/
|– js/
|– lib //存放 requirejs、jquery 等文件
|–requirejs
|–jquery
|-lazyload
|– mod //存放各个js模块文件
|–slide.js //滑动插件
|-postLike.js //点赞插件
|–common.js //全站公用js
|-config.js //requirejs配置js
|– index.js //首页入口文件
|– list.js //列表页入口文件
|– content //文章内容页入口文件
|– index.html
|– list.html
|– content.html
说明：关于入口文件，本例中，各个页面是独立的文件。当然整个项目你也可以使用一个入口文件。。
下面是require.js的简单用法:
一、引入requirejs
1、首先去中文网下载requirejs：http://www.requirejs.cn/docs/download.html
2、在页面（比如index.html）页尾，通过 script 引入 requirejs（<script data-main=’js/index’ src=”js/lib/require.js”></script>）
其中：
data-main 是入口点。
js/index 是首页的入口js文件。
二、requirejs的配置
本例子中，将配置写在一个独立的config.js模块中，如下：
define(function(){
require.config({
paths:{
'jquery':[
'http://cdn.bootcss.com/jquery/2.2.0/jquery.min',
'./lib/jquery-2.2.0.min'
],
'slide':'./mod/slide',
'lazyload':'./lib/jquery.lazyload.min'
},
shim:{
'slide':['jquery'],
'lazyload':['jquery']
},
urlArgs: "bust=" + (new Date()).getTime()
})
})
一些参数说明：baseUrl ：所有模块的查找根路径。
paths ：path映射那些不直接放置于baseUrl下的模块名。
shim: 为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。
urlArgs: RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。简单说意思就是给文件夹上版本号，防止缓存。
更多具体参数可以查看官网资料。。
http://requirejs.cn/docs/api.html#config
三、模块的定义
所有模块都通过 define 来定义
1、定义没有任何依赖的模块。
define(function (){
//do something
});
2、定义有依赖其他模块的模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。如:
define(['jquery',"mod/moduleB"],function($,moduleB){
//do something
})
四、模块的加载1、在我们的第二步requirejs的配置中，我们使用require.config()方法，对需要的模块进行了加载，而且我们可以对模块名称进行自定义。
2、通过 define 定义模块的加载方法
require(['mod/config','jquery'],function(config,$){
$(function(){
//do something
})
})
require(['mod/common']);
3、那么如何加载非规范的模块呢？理论上，模块必须是按照AMD规范的、用define()函数定义的,require.js才可以正常加载。但是像jQuery符合AMD规范的，可以直接加载。
那么平常一些不符合规范的（比如我们没有用define()定义的插件），我们可以使用shim属性，它是专门用来配置不兼容的模块。
在require.config()中，大家可以看到slide、lazyload模块就是。
如果不使用shim属性，那么可以用如下代码对插件进行修改一下就可以了。
;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD模式
define([ "jquery" ], factory);
} else {
// 全局模式
factory(jQuery);
}
}(function ($) {
$.fn.imgSlide = function () {
//插件代码
};
}));
五、本例子代码
1、模块config.js
define(function(){
require.config({
paths:{
'jquery':[
'http://cdn.bootcss.com/jquery/2.2.0/jquery.min',
'./lib/jquery-2.2.0.min'
],
'slide':'./mod/slide',
'lazyload':'./lib/jquery.lazyload.min'
},
shim:{
'slide':['jquery'],
'lazyload':['jquery']
},
urlArgs: "bust=" + (new Date()).getTime()
})
})
2、模块common.js
define(['jquery'],function($){
//返回顶部
$(".go-top").click(function(){
$("body,html").animate({
scrollTop:0
},300)
})
//do something
})
3、模块postLike.js
//点赞
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
alert('您已赞过该文章');
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "specs_zan",
um_id: id,
um_action: action
};
$.post("wp-admin/admin-ajax.php", ajax_data, function(data) {
$(rateHolder).html(data);
});
return false;
}
};
})
4、模块slide.js
;(function($){
$.fn.imgSlide=function(options){
//do something
}
})(jQuery)
5、首页入口文件index.js
require(['mod/config'],function(config){
require(['mod/common']);
require(['jquery','slide'],function($){
//do something
});
})
index.html：“<script data-main=’js/index’ src=”js/lib/require.js”></script>”
同理，其他页面入口文件跟首页一样。
以上就是自己学习requirejs时的简单记录，可以快速上手requirejs。
