requirejs基础
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,有时候js文件过多会导致加载慢等一系列的问题。
常用的方法:
requirejs.config
requirejs
define
requirejs.config
requirejs.config主要是指定模块的别名,这里jquery-1.9.1.js比较长,为了方便别的模块进行引入,所以我们将jquery-1.9.1.js修改为别名jquery
//配置别名,将jquery-1.9.1配置为别名jquery
//require.config方法用来指定模块的别名,方便模块的引入
requirejs.config({
paths:{
jquery:'jquery-1.9.1',
}
});
有时候可以直接引入网络资源:
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
"a" : "js/a"
}
})
requirejs
//引入对应的模块,编写我们的主代码,$和validate相当于对象的概念,
requirejs(['jquery','validate'],function($,validate){
$('body').css('background-color','red');
console.log(validate.isEqual(2222,2));
});
可以看到我们引入了jquery这个模块,实际上就是jquery-1.9.1.js这个文件。
另外require===requirejs
//引入对应的模块,编写我们的主代码,$和validate相当于对象的概念,
require(['jquery','validate'],function($,validate){
$('body').css('background-color','red');
console.log(validate.isEqual(2222,2));
});
require和requirejs里面接受一个数组参数,表示要引入的模块,然后回到一个函数,加载完成执行的代码。
define
编写一个模块
//编写模块
define(['validate'], function($) {
return{
isEmpty:function(){},
checkLength:function(){},
isEqual:function(str1,str2){
debugger
return str1==str2;
}
}
});
将编写的函数功能放入到return中。
引用
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="js/main" src="js/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
这里有一个data-main,作用是引入require.js之后。接下来调用的js文件。
扩展
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?
回答是可以的。
这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。
requirejs.config({
baseUrl : "/"+contextName+"/static/js/yfq",
urlArgs: "v=2016061604",
paths : {
"underscore" : "./libs/underscore-min",
"zepto" : "./libs/zepto.min",
"touch" : "./libs/touch",
"fx" : "./libs/fx",
"fx_methods" : "./libs/fx_methods",
"class" : "./libs/class",
"utils" : "./utils",
"IScroll" : "./libs/iscroll-lite",
"doT" : "./libs/doT.min"
},
shim : {
"zepto" : {exports : "$"},
"touch" : {deps : ["zepto"]},
"fx" : {deps : ["zepto"]},
"fx_methods" : {deps : ["zepto"]},
"underscore" : {exports : "_"},
"doT" : {exports : "doT"},
"IScroll" : {exports : "IScroll"},
"utils" : {
exports : "utils",
init : function() {
return(Utils)
}
},
}
});
require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。