require.js

为什么使用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为根路径,代码如下

目录结构

require.js

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);
        }
    }
})

此时控制台会报异常

require.js

报错是因为是以根路径为baseUrl，找不到helper.js

require.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、加载即执行

把上面的代码结构稍微改一下：

require.js

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未加载，那是因为什么呢？

require.js