为什么使用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。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
