在学习require.js时首先要了解它的作用:
- 有效的防止命名冲突
- 声明不同js文件之间的依赖
- 可以让我们的代码以模块化的方式组织,内容更加明了。
常用到的方法:
- require.config
- require
- define
开始require.js学习:DEMO
- HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>require</title>
</head>
<body>
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>*************data-main:入口文件,将require.js加载完毕后立马调用的文件 - js
//main.js文件
require.config({
//定义别名
paths:{
jquery:'jquery-1.8.3.min'
}
});
//require有两个参数,数组,回调函数
require(['jquery','test/validate'],function($,validate){
console.log(validate.isEqual(1,'1'));
validate.add(2,3);
});//validate.js
//定义模块需要通过define
define(['jquery'],function($){
return{
isEqual:function(str1,str2){
return str1===str2;
},
add:function(x1,x2){
var x=x1+x2;
var html='<span style="color:red">'+x+'</span>';
$('body').append(html);
}
};
});