Requirejs是异步加载js文件利器，改变了传统的同步加载js文件的方式，提高了页面加载速度。采用Requirejs加载的js文件必须采用AMD规范写法。
AMD：
AMD 提出了一种基于模块的异步加载 JavaScript 代码的机制，它推荐开发人员将 JavaScript 代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的 JavaScript 代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载 JavaScript 代码，使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素，如图片、CSS 以及其他 DOM 节点得以先加载完毕，Web 页面加载速度更快，用户也得到更好的体验。
规范：
define(id, dependencies, factory); 该方法用来定义一个 JavaScript 模块，开发人员可以用这个方法来将部分功能模块封装在这个 define 方法体内。
id 表示该模块的标识，为可选参数,缺省的话，模块的名字就是文件的名字。
dependencies 是一个字符串 Array，表示该模块依赖的其他所有模块标识，模块依赖必须在真正执行具体的 factory 方法前解决，这些依赖对象加载执行以后的返回值，可以以默认的顺序作为 factory 方法的参数。dependencies 也是可选参数，当用户不提供该参数时，实现 AMD 的框架应提供默认值为 [“require”，”exports”，“module”]。
factory 是一个用于执行改模块的方法，它可以使用前面 dependencies 里声明的其他依赖模块的返回值作为参数，若该方法有返回值，当该模块被其他模块依赖时，返回值就是该模块的输出。
写法：
第一种定义模块的模式是基于exports的模式：
define(function(require, exports, module) {
var zone = require('zone'); //引入空间模块
var room = require('room'); //引入房间模块
var data = 1; //私有数据
var func = function() { //私有方法
return a.run(data);
}
exports.publicData = 2; //公共数据
exports. publicFunc = function() { //公共方法
return 'hello';
}
});
第二种通过return返回来对象
define(function(require) {
var zone = require('zone'); //引入空间模块
var room = require('room'); //引入房间模块
var data = 1; //私有数据; //私有数据
var func = function() { //私有方法
return a.run(data);
}
return {
data2: 2,
func2: function() {
return 'hello';
}
};
});
第三种适合定义纯JSON数据的模块，这种模块时cdn友好的。
define({
data: 1,
func: function() {
return 'hello';
}
});
Requirejs 例子：
test.js
模块test，按照amd规范编写代码。
define(function(require, exports, module) {
var func = function() {
alert("Test Func");
};
exports.testFunc = func;
});
test1.js
模块test1，按照amd规范编写代码。
define(['test'],function(test) {
var func = function() {
test.testFunc();
};
return {func:func};
});
注释：模块test1依赖于模块test
main.js
入口模块
require.config({
paths:{
jquery:"/requirejs/jquery-1.8.0.min"
}
});
require(['jquery','test1'], function($,test1) {
$("#button").click( $.proxy( test1, "func" ) );
});
注释：模块main依赖于模块jquery和test。
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是['jquery'， 'test1']，即主模块依赖这两个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载 jquery，test1，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
更多的require知识可以参考：http://news.cnblogs.com/n/163147/
require.html
<html>
<head><title>require.html</title></head>
<body>This is my HTML page. <br>
<button id="button"> Click</button>
<script type="text/javascript" src="./require.js" data-main='main'></script>
</body>
</html>
data-main 属性的作用是，指定网页程序的主模块。在上例中，就是 requirejs 目录下面的 main.js，这个文件会第一个被 require.js 加载。由于 require.js 默认的文件后缀名是 js，所以可以把 main.js 简写成 main，main是可以修改的。
把requirejs目录放在WebRoot下面，跑起项目访问require.html页面，点击按钮会弹出：
这样开发时页面上只需要导入<script type="text/javascript" src="./require.js" data-main='main'></script>即可。虽然这样最终客户端还会根据实际需要的js模块下载相应的js文件，但是这些js文件的下载不是同步的，而是异步。如果页面上需要的js模块太多的话，require还提供了r.js插件来对js模块进行合并，让多个js文件合成一个。
Js模块合并
模块合并需要r.js和node环境。
可上nodejs官网下载一个msi文件，然后直接在window下双击安装，默认安装的目录是C:\Program Files\nodejs,进入此目录点击npm.cmd 即node安装结束。
合并命令：
node r.js -o baseUrl=./ name=main out=built.js
具体参数说明：
-o 表示优化，该参数是固定的，必选。
baseUrl 指存放模块的根目录，这里是r4/js，因为cd到r4中了，只需设置为js。可选，如果没有设置将从r4中查找main.js。
name 模块的入口文件，这里设置成“main”，那么r.js会从baseUrl+main去查找。这里实际是main.js。r.js会分析main.js，找出其所依赖的所有其它模块，然后合并压缩。
out 指合并压缩后输出的文件路径，这里直接是built.js，那么将输出到根目录requirejs下。
excludeShallow 合并时将排除该文件。
optimize (none/uglify/closure) 指定是否压缩，默认为uglify不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩，仅合并，这在开发阶段是很用用的。
对于path配置的非本地的模块文件，使用r.js合并压缩时需要配置paths.xx=empty:
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
