10分钟精通require.js

require.js的诞生，就是为了解决这两个问题：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

实例下载：require.js应用实例

一、require.js的加载文件

<script src="js/require.js" data-main="src/main.js"></script>

由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

二、主模块的写法
main.js，我把它称为"主模块"，所有代码都从这儿开始运行。

require(['模块依赖'],, function (回调函数){});

实例：
require(['jquery'], function ($){ })

三、config配置

require.config({
baseUrl: '路径',
　　　　paths: {
'标识':'路径'
　　　　}

});

四、AMD模块的写法

define(function (){ });

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

define(['lib'], function(myLib){ });

当require()函数加载上面这个模块的时候，就会先加载依赖文件lib.js。

五、require.js插件
require.js还提供一系列插件，实现一些特定的功能。 插件下载地址： https://github.com/jrburke/requirejs/wiki/Plugins
实际开发应用

文件：

require.js

jquery.js

main.html

main.js

one.js

three.js

two.js

文件代码:

init.html

<script src="js/require.js" data-main="src/main" type="text/javascript"></script>

main.js

require.config({
//baseUrl: ".",
paths: {
"jquery": "/script/jquery"
}
});

//main.js 调用依赖模板，次处为入口程序main()
require(['one', 'two', 'three'], function (one, two, three) {
document.write(one.add(1, 2));
document.write('</br>');
document.write(two.add(3, 4));
document.write('</br>');
document.write(three);
});

one.js

//定义非依赖模板
define(function () {
var add = function (x, y) {
return "one.js模板，实现x+y=" + x + y;
};
return {
add: add
};
});

two.js

//定义依赖模板
define(['one'], function (one) {
var add = function (x, y) {
return "two.js模板，依赖one.js模板，x+y=" + one.add(x, y);
};
return {
add: add
};
});

three.js

define(['jquery'], function ($) {
return "three.js模板，实现调用jquery.js类库：" + $.trim('jquery trim');
});