What?
声明不同js文件之间的依赖,可以按需、并行、延时载入js库,可以让我们的代码以模块化的方式组织。
When?
对于中大型项目,为了团队成员更好得发挥协同力,各自管理各自的JS代码,按需调用各自或公共组件,使代码更加清晰,个人比较推荐使用requireJS,不要问我为什么不适用seaJs,没兴趣。requireJS使用比较简单,那么快上车,老司机准备开车了......
How?
1.在html中引入requirejs
通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个 工作会交给requirejs来做。
<script src="**/require.js" data-main="*/config"></script>
属性 data-main 是告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块。
2.配置require
a. 配置requirejs 比如项目中用到哪些模块,文件路径是什么,载入程序主模块
requirejs.config({
baseUrl: '/public/js',
paths: {
app: 'app'
}
});
加载文件
之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库 为例:
require.config({
baseUrl : '/public/js',
paths : {
//当百度的jquery没有加载成功后,会加载本地js目录下的jquery
jquery : ['http://libs.baidu.com/jquery/2.0.3/jquery', '/public/js/jquery'],
jqueryUI : 'http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui', app : 'app'
}
});
require(["jquery","jqueryUI","a"],function($,$UI){
$(function(){
alert("load finished");
});
});