痛点：RequireJs出现之前，我们将一些js组件放到不同的文件，然后在html文件中通过script标签来引入，如果几个组件有依赖关系，那就得非常小心的排列script标签的顺序，将被依赖的js文件放到前面，否则会报各种undefined的错误。
口诀：一个属性，一个配置，两个函数
0x01 data-main属性
// index.html
<script src="/js/require.js"></script>
<script src="/js/app.js"></script>
<script src="/js/require.js" data-main="/js/app.js"></script> //使用data-main属性
// app.js
require(['grass'], function(grass) {
console.log('grass')
});
如果不使用data-main属性，直接使用script标签引入js文件，app.js在加载依赖模块grass.js的时候就会在index.html同级的目录下找，如果使用data-main属性，就会在/js/目录下找，即和app.js同级的目录下。
0x02 require.config()配置
-
baseUrl——用于加载模块的根路径。
-
paths——用于映射不存在根路径下面的模块路径。
-
shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
- deps——加载依赖关系数组
- exports——转换成requirejs格式后，模块的名称
require.config({
baseUrl : 'js',
paths : {
pb : '../lib' // 其实就是把出现"pb"的地方替换成"../lib"
},
shim : {
'world' : {
deps : ['animalWorld'],
exports : 'world'
}
}
});
0x03 define()和require()函数
define()
该函数用于定义模块。
接收3个参数：
- 第一个参数是模块名，以字符串表示，可以省略，省略后默认模块名为该js文件的名称，一般情况下会省略；
- 第二个参数是依赖的模块名，以字符串数组表示，也可以省略；
- 第三个参数是回调函数，定义模块的具体代码逻辑。
define('caoshuai', ['jquery', 'yangliu'], function($, yangliu) {
return {
f_test : function(strr) {
console.log(strr);
}
}
});
require()
该函数用于加载/调用定义好的模块，可以是define()函数定义的，也可以是shim转换的。
接收2个参数：
- 第一个参数表示需要加载的模块名列表，以字符串数组表示；
- 第二个参数是回调函数，回到函数的参数依次为加载的模块内返回的对象，函数内实现代码逻辑。
require(['caoshuai', 'yangliu'], function(caoshuai, yangliu) {
console.log('require moudle caoshuai yangliu')
});
欢迎关注微信公众号（coder0x00）或扫描下方二维码关注，我们将持续搜寻程序员必备基础技能包提供给大家。
网友评论