为什么使用require.js?
1、异步加载文件
2、模块化开发
a、 一个文件一个模块
b、减少全局变量
如何使用?
define:定义模块
//第一个参数helper是模块名,如果省略,以文件路径作为模块名字
//第二个参数是模块依赖,可以有多个依赖
//第三个参数是模块实现function,参数顺序对应依赖模块名字
define('helper',['jquery'],function($)){
return {
trim: function(str){
return $.trim(str);
}
}
}
require: 加载模块
require(['helper'],function(helper){
var str = helper.trim(' amd ')
console.log(str);
})
requireJS以一个相对于baseUrl的地址来加载所有的代码,其中又分为三种情况:
1、baseUrl为根路径,代码如下
目录结构
index.html
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta charset="utf-8">
</head>
<body>
<h1>require.js和自动打包</h1>
<script src="js/require.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
require(['helper'],function(helper){
var str = helper.trim(' amd ')
console.log(str);
})
helper.js
define('helper',['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
})
此时控制台会报异常
报错是因为是以根路径为baseUrl,找不到helper.js
两种解决方法见下
2、baseUrl为data-main指定的,代码如下
index.html
<!DOCTYPE html>
<html>
<head>
<title>require.js</title>
<meta charset="utf-8">
</head>
<body>
<h1>require.js和自动打包</h1>
<script src="js/require.js" data-main="js/app"></script>
</body>
</html>
app.js
require(['helper'],function(helper){
var str = helper.trim(' amd ')
console.log(str);
})
helper.js
define('helper',['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
})
3、定义baseUrl
index.html
<!DOCTYPE html>
<html>
<head>
<title>require.js</title>
<meta charset="utf-8">
</head>
<body>
<h1>require.js和自动打包</h1>
<script src="js/require.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
require.config({
baseUrl: './js',
});
require(['helper'],function(helper){
var str = helper.trim(' amd ')
console.log(str);
})
helper.js
define('helper',['jquery'],function($){
return {
trim: function(str){
return $.trim(str);
}
}
})
加载机制:
a、requireJS使用head.appendChild()将每一个以来加载为一个script标签
b、加载即执行
把上面的代码结构稍微改一下:
index.html
<!DOCTYPE html>
<html>
<head>
<title>require.js</title>
<meta charset="utf-8">
</head>
<body>
<h1>require.js和自动打包</h1>
<script src="js/lib/require/require.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
require.config({
baseUrl: './js',
});
require(['helper'],function(helper){
var str = helper.trim(' amd ')
console.log(str);
})
help.js
define('helper',['./lib/jquery/jquery'],function($){
console.log($);
return {
trim: function(str){
return $.trim(str);
}
}
})
运行程序发现控制台会输出错误,错误提示是trim未定义,难道jquery没有加载成功?我们查看Network中jquery是正常加载的,那就不是因为jq未加载,那是因为什么呢?
打开jquery源码,搜索AMD,会发现jquery.js指定了模块名就是jquery,而我们在helper.js中请求模块名是lib/jquery/jquery,模块名不一样,所以找不到,这时候要怎么处理呢?
要解决上面的问题,我们需要paths配置模块路径
配置了paths后,修改helper.js 中jquery的路径,在运行上面的代码即可。
paths作用: 映射不放于baseUrl下的模块名
paths对象的第二参数还可以是数组
第一个jq加载不到的时候,就会加载本地jq。