首先简介
一般html页面加载不同的js文件(模块)会使用<script>标签来引入
而多个模块之间可能存在先后依赖关系,如:
<script src="./js/jquery.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/artTemplate.js"></script>
显然,浏览器加载的时候,会停止渲染,整个页面失去响应时间不确定,而且要严格按照依赖性加载,依赖性强的位置靠后
require.js是JS模块原型和理论概念引用的库文件。它的作用就是为了解决依赖性:
1.实现js文件(模块)的异步加载,避免网页失去响应
2.管理模块之间的依赖性,便于代码的编写&维护
project/html页面上引入require.js(下载好放在project/js目录下)
<script src="./js/require.js"></script>
接下来可以加载自己的主模块(./js/main.js)
如果主模块main.js不依赖别的模块,直接写自己的js脚本
如果依赖其他模块就要按照AMD规范来写主模块的require函数
//定义被加载的模块的加载路径
require.config(
paths:{
/*BaseUrl:"project/"*/
"jquery":"./js/jquery.min", //路径可为相对/绝对路径/网址
"echarts":"./js/echart" //require.js加载的就是.js文件 所以.js可省
}
);
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
那么这个时候require.js加载的模块默认路径(当前路径)是与引入require.js的html页面的统计目录(BaseUrl:"project/")而需要异步加载的模块在project/js目录下,需要修改当前目录路径(BaseUrl:"./js")
//加载模块
加载模块require(["a","b"],function(a,b){ });
第一个参数:数组(所依赖的模块们)
第二个参数:回调函数(只有在指定依赖的模块加载完成后才会调用此方法)
require(["jquery","echarts"],function(jquery,echarts){
//函数体
});