RequireJS基本使用方法

1.为什么使用require.js

上面说到前端需要大量的类库，而JS类库更是占了大部分，在使用JS类库时，存在很多的依赖关系，比如jquery.cookie是基于jquery开发的、backbone是基于underscore的等等，这些依赖关系需要手动进行引用的顺序管理；另一方面，在不同的页面上，对于JS的引用需求也是不同的，如果希望做到按需加载，那么就要使用require.js这样的类库，它实现了异步加载、避免阻塞、提高了页面性能。

 

2.下载require.js

bower install --save requirejs

 

3.使用require.js

在views/index.html中添加：

<script type="text/javascript" src="/libs/requirejs/require.js" data-main="/js/index"></script>

注意：在使用require.js后，引用其它JS文件是不需要再加.js后缀的，所以data-main="/js/index"中index而非index.js

 

4.创建配置文件

在public/js下创建config.js文件，用于配置JS类库路径及依赖关系，以jquery和bootstrap为例

require.config({
    baseUrl: '/libs',
    paths: {
          jquery: 'jquery/dist/jquery',
          bootstrap: 'bootstrap/dist/js/bootstrap'                 
    }, 
    shim: {
          bootstrap: ['jquery']
    }  
});

注意：paths中的JS文件仍是不用加.js后缀的

　　   shim中指定了在引入bootstrap.js文件前必须引入jquery.js，因为前者是依赖于后者的

 

5.在JS文件中按需引用

在public/js文件夹下创建index.js文件

require(['./config'], function(config) {
    require(['bootstrap'], function() {
        //do something
    });
});

虽然，只引入了bootstrap.js文件，但因为在config.js文件中做了配置，会在bootstrap.js文件前引入jquery.js文件

可以打开浏览器的调试面板，查看

说明：红框内的就是由require.js生成的js引用

 

 

作者：@zhnoah
出处：http://www.cnblogs.com/zhnoah/
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连 
接，否则保留追究法律责任的权利。