requirejs
requireJS
1.安装
npm install --save requirejs
2.使用步骤
2.1引包
<!--在index.html中引入require.js文件并指定主入口模块-->
<script data-main="./lib/main.js" src="./node_modules/requirejs/require.js"></script>
2.2 主模块
```js
/*在主模块中:- rquirejs第一个参数是一个数组,
- 传递依赖的模块回调函数的参数是前面模块所暴露的接口对象
- */
requirejs(['./lib/abc.js'],function(aModule){
console.log(aModule);//Object {name: "模块a"}
});
```- 2.3 定义一个模块
//定义一个没有依赖的模块
define(function(){
//通过return 的形式向外暴露接口对象
return {
name:'sa',
text:function(){
sonsole.log("hahah");
}
}
});
2.4 定义有依赖的模块
//参数一:模块名,必须与模块文件名保持一致
//参数二:本模块所依赖的模块
//参数三:回调函数,回调函数的参数与依赖模块相对应,模块暴露的数据接口
define(['./c'],function(cModule){
return {
name:'bb',
text:function(){
console.log('bbbbb');
}
}
})
2.5 定义一个而又依赖的模块,并且模块有自己的名字
js
//名字在打包的时候使用,
//在加载的时候需要按照名字去加载
define('c',['./c'],function(cModule){
return {
name:'bb',
text:function(){
console.log('bbbbb');
}
}
})
取的名字必须与加载文件的名字相一致
2.6 在主模块文件中配置基础路径
> 配置了基础路径,那所有的模块标示都会基于这个路径去查找 ```js requirejs.config({ baseUrl:'./js'//相对于index.html }); ``` > 注意:第三包不要出现在项目之外
2.7 在模块中引入jQuery
requirejs(['./lib/abc.js', './lib/jq.js'], function (aModule, jqModule) {
//jq.js模块引用了jQuery
console.log(aModule);//Object {name: "模块a"}
console.log(jqModule);//undefined???
});
/*这个模块依赖jQuery模块*/
/*jquery.js与当前文件在同一个路径下,此时路径是相对于本文件还是相对于index.html??*/
define('jquery',['./jquery.js'],function($){
return $(function(){
console.log("jQuery执行了");
return "jQuery执行了";
})
});