require.js的使用的步骤
如何定义模块？如何引入模块？
引入插件： script引入
定义插件： 用沙箱来定义插件
1-定义模块
1- 每个模块都是一个单独js文件
2- 每个模块必须有自己的独立的作用域
定义模块的语法
定义模块：
define(模块名称，[依赖项], function () {
//模块功能
//有导出项
return 导出项；
})
注意点：
模块名称：模块名字 一般不写，建议使用匿名模块
依赖项： 可选，这个模块的运行要依赖于其他模块
模块的导出项： 模块要暴露给外界使用数据
2-引入模块
引入模块语法
require([模块路径(不需要.js)], function (接收导出项) {
//模块引入完成的回调函数
})
引入模块
require(['./js/a'], function () {
console.log('模块引入完成了');
})
3-模块有导出项的情况
在引入模块时，在回调函数中用形参来接受 模块导出的数据
require(['./js/b'], function (mb) {
console.log(mb);
mb.say();
})
4-页面中有多个模块，且模块有导出项
注意： 导出项形参的顺序必须和引入模块顺序一一对应
//模块a 模块b 模块c 都有导出项
require(['./js/a', './js/b', './js/c'], function (ma, mb, mc) {
console.log(ma);
console.log(mb);
console.log(mc);
})
优化
将没有导出项的模块，写在最后即可；
//a.js模块没有导出项，放在最后面
require(['./js/b', './js/c', './js/a'], function (mb, mc) {
console.log(mb);
console.log(mc);
})
模块有依赖项的情况
require(['./js/d'], function () {
})
模块的路径配置问题
1-如果没有对路径做任何设置，默认以当前文件的位置 去找模块 （以相对路径去找）
require(['./js/a', './js/b', './js/c']);
2-通过设置data-main属性 来设置模块公共路径（基础路径）
最终路径 = data-main 路径 + 引入的路径
require(['a','b', 'c'], function () {})
<script src="require.js"></script>
<!-- <script src="./require.js" data-main="./js/one/two/three/"></script> -->
<script>
// require(['./js/one/two/three/four/five/zidongqiaodaima',
// './js/one/two/three/six/seven/zidongzhaobug'], function () {})
// require(['four/five/zidongqiaodaima',
// 'six/seven/zidongzhaobug'], function () {})
// require(['a', 'b'],function (){})
//路径配置 ： 可以将任何复杂路径和文件名都进行简化
require.config({
baseUrl: './js/one/two/three/', //基础路径
paths: { //别名
//别名： 剩下的路径
code: 'four/five/zidongqiaodaima',
bug: 'six/seven/zidongzhaobug'
}
});
//别名的路径 = baseUrl + 别名对应的路径
require(['code', 'bug'], function () {})
</script>
关于第三方插件模块化问题
答：如果我们使用define()来定义模块，要使用require()进行引入
实际工作中，一般插件都是第三方，而不是我们自己定义的
第三方插件是否支持模块化？
如果第三方插件用define进行定义，就可以使用require引入
目前： 主流插件都是支持模块化，但是有少数不支持模块（不支持模块插件，需要我们处理）
**支持模块化插件 和不支持模块化插件区别：**
1-支持模块化的插件知道自己依赖项是谁？ 在此模块执行之前，一定会先引入自己的依赖项；
2-不支持模块化的插件，不知道自己的依赖项是谁， 当前自己引入完成后就会执行；
不支持模块化
- 没有依赖项，没有导出项，require直接引入
- 有依赖项，没有导出项
- shim属性中进行配置
- 有依赖项且有导出项
- shim属性中进行配置
require.config({
baseUrl: "/modules",
paths: {
xyz: "./buzhichiamddeyouyilaixiangdemokuai",
jquery: "../jquery.min",
abc: "./buzhichiamddeyoudaochuxiangdemokuai",
},
//require.js中可通过设置shim，让不支持模块化的第三方内容
//和require.js能够实现更好的配合
shim: {
//配置xyz
xyz: {
//设置依赖项： jquery
deps: ["jquery"]
},
//配置abc
abc: {
deps: ["jquery"],
exports: "animate" //导出项名称
}
}
})
网友评论