require.js data-main主模块使用

在如何加载require.js文件介绍了如何加载require.js文件。

当require.js文件加载完毕之后，就可以开始它的模块管理工作，看一段代码:

[HTML] 纯文本查看 复制代码
1

require.js在加载的时候会检查data-main属性，当加载完毕，data-main属性规定的js文件会第一个被require.js加载并执行。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

假设main.js代码如下:

[JavaScript] 纯文本查看 复制代码
1
console.log("蚂蚁部落")
上面的代码没有任何的依赖，也就没有必要使用require.js，下面再来看一个有依赖关系的:

[JavaScript] 纯文本查看 复制代码
1
2
3
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// 代码
});
require()方法具有两个参数，下面分别做一下介绍:

（1）.第一个参数是数组，每一个元素都是所依赖的模块。

（2）.第二个参数是回调函数，依赖模块加载完毕后，会执行此回调函数，参数是对应的依赖模块。

假如main.js的代码如下:

[JavaScript] 纯文本查看 复制代码
1
2
3
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// 代码
});
代码分析如下:

（1）.jQuery、underscore和backone是main.js所依赖的模块。

（2）.回调函数会在前面三个模块加载完毕后执行，参数是对应的模块（名称可以自己定义）。

特别说明:main.js的加载也是异步的，如果页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

代码如下:

[HTML] 纯文本查看 复制代码
1
2

main.js代码如下:

[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
require.config({
paths: {
foo: 'libs/foo-1.1.3'
}
});
other.js代码如下:

[JavaScript] 纯文本查看 复制代码
1
2
3
require( ['foo'], function( foo ) {
// 代码
});
可能other.js需要加载foo模块的时候，main.js还有执行完对foo-1.1.3的重命名，所以会导致other.js加载foo.js而不是libs/foo-1.1.3.js。