Require.js 详细了解

一、Require.js 作用

1.1、是JS 文件加载器，实现js脚本的AMD异步加载。

保证不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能。

1.2、实现JS、CSS文件的规范化，模块化。

使用 define() 定义符合require规范的模块；
使用require.config() 配置模块ID和它对应的js模块所在文件路径；
使用require()指定其所依赖的模块；
使用r.js合并优化。

1.3、可以管理JS模块/文件之间的依赖。

JS模块化，文件化之后，它们之间的依赖可以通过require.js优雅的解决。

1.4、压缩合并多个JS和CSS文件。

require.js中提供的优化器 r.js 可以来优化页面中的js脚本和css文件，达到提高页面响应速度，减少页面所需要的http/https请求次数。

1.5、实现CDN回退

这一隐藏功能，可以支持当CDN加载不正确时，回退加载本地相应的库。

二、Require.js 用法

2.1、在Html页面中添加标签

<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。在上面语句中作用，就是加载js目录下面的main.js，这个文件会第一个被require.js加载。

由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

2.2、main.js示例

baseUrl ：基目录;
paths ：js文件路径;
shim : 配置依赖关系;
require([主模块])

packages：从CommonJS包(package)中加载模块。参见从包中加载模块。

waitSeconds：在放弃加载一个脚本之前等待的秒数。设为0禁用等待超时。默认为7秒。

context：命名一个加载上下文。这允许require.js在同一页面上加载模块的多个版本，如果每个顶层require调用都指定了一个唯一的上下文字符串。想要正确地使用，请参考多版本支持一节。

deps：指定要加载的一个依赖数组。当将require设置为一个config object在加载require.js之前使用时很有用。一旦require.js被定义，这些依赖就已加载。使用deps就像调用require([])，但它在loader处理配置完毕之后就立即生效。它并不阻塞其他的require()调用，它仅是指定某些模块作为config块的一部分而异步加载的手段而已。

callback：在deps加载完毕后执行的函数。当将require设置为一个config object在加载require.js之前使用时很有用，其作为配置的deps数组加载完毕后为require指定的函数。

enforceDefine：如果设置为true，则当一个脚本不是通过define()定义且不具备可供检查的shim导出字串值时，就会抛出错误。参考在IE中捕获加载错误一节。

xhtml：如果设置为true，则使用document.createElementNS()去创建script元素。

urlArgs：RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例：

urlArgs: "bust=" +  (new Date()).getTime()

在开发中这很有用，但请记得在部署到生产环境之前移除它。

scriptType：指定RequireJS将script标签插入document时所用的type=""值。默认为“text/javascript”。想要启用Firefox的JavaScript 1.8特性，可使用值“text/javascript;version=1.8”。

 

/*
* main.js
*/
(function() {
     require.config({
          baseUrl : './',
          paths : {
               jquery : 'assets/js/jquery/jquery.min',
               bootstrap : 'assets/bootstrap/js/bootstrap.min'
          },
          shim : {
               bootstrap : {
                    deps : [ 'jquery' ],
                    exports : 'bootstrap'
               }
          }
         
     });

     require(['bootstrap' ], function() {
          console.log(all loaded);
     });

})(this);

 

requirejs.config({
    baseUrl : "js",
    map : {
        "*" : {
            "css"  : "css",
            "text" : "text"
        }
    },
    paths : {
        "jquery"                   : "lib/jquery-1.12.4",
        "bootstrap"                : "lib/bootstrap-3.0.0/js/bootstrap.min",
        "bootstrap.datepicker"     : "lib/bootstrap.datepicker/js/bootstrap.datepicker",
        "bootstrap.datetimepicker" : "lib/bootstrap.datetimepicker/js/bootstrap.datetimepicker.min",
        "modernizr"                : "lib/modernizr-2.6.2/js/modernizr",
        "underscore"               : "lib/underscore-1.4.1/js/underscore.min",
        "backbone"                 : "lib/backbone-0.9.2/js/backbone.min",
        "app"                      : "app"
    },
    shim : {
        "bootstrap"                : { deps : [ "css!lib/bootstrap-3.0.0/css/bootstrap.min" ] },
        "bootstrap.datepicker"     : { deps : [ "bootstrap", "css!lib/bootstrap.datepicker/css/bootstrap.datepicker" ] },
        "bootstrap.datetimepicker" : { deps : [ "bootstrap.datepicker", "css!lib/bootstrap.datetimepicker/css/bootstrap.datetimepicker.min" ] },
        "underscore"               : { exports : '_' },
        "backbone"                 : { deps : [ "jquery", "underscore" ], exports : "Backbone" },
        "app"                      : { deps : [ "jquery", "bootstrap", "bootstrap.datepicker", "bootstrap.datetimepicker", "modernizr", "underscore", "backbone", "css!../css/style" ] }
    },
    urlArgs : "bust=" + (new Date()).getTime()
});