一、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);
![](https://i-blog.csdnimg.cn/blog_migrate/7e27eac3ee2fa30e655ec40711166c3e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6c14e7c302d5c405cf787abaefebc853.gif)
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()
});