RequireJs 依赖管理使用

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

 

posted on 2016-07-20 10:28  爱疯的小疯子  阅读(439)  评论(0)    收藏  举报

导航