为什么要使用require.js
异步加载文件，简化依赖关系
?？榛?， 一个文件就是一个?？?，减少全局变量
如何使用
define定义?？?/p>
require加载模块
tips:
一般不写?？槊?，让自动打包来完成
requireJS以一个相对于baseUrl的地址来加载所有代码
加载机制
RequireJS使用head.appendChild()将每一个依赖加载为一个script标签?！疽馕蹲趴梢钥缬蚍梦省?/p>
加载即执行
配置模块路径
-
paths-映射不放于baseUrl下的?？槊?/p>
requirejs.config({ baseUrl: '/js', paths: { 'jquery': 'lib/jquery' //模块名：?？槁肪? } }) *** 另一种方式 *** requirejs.config({ baseUrl: '/js', paths: { 'jquery': [ 'lib/jquery2', //首先加载的模块 'lib/jquery' //第一个加载失败后的备用文件 ] } })
定义?？?/h3>
-
函数式定义
// 最佳实践：不写死?？槊? 即'helper'部分
// 依赖的?？榭捎锌晌? 即['jquery']部分
define('helper', ['jquery'], function($){
return{
trim: function(str) {
return $.trim(str);
}
}
})
-
定义简单的对象
define({
userName: '',
name: ''，
eamil: ''
})
shim > 配置不支持AMD的模板
shim({
'modernizr': { //不支持AMD的?？? deps: ['jquery'], //依赖的?？? exports: 'Modernizr', //全局变量作为?？槎韵? init: function($) { //初始化函数，返回的对象代替exports作为?？槎韵? return $;
}
}
})
其它常用配置
-
waitSeconds
下载js等待的时间，默认7秒；如果设置为0，则禁止等待超时。
-
urlArgs
下载文件时间，在URL后面增加额外的query参数
更多内多参考
- RequireJS官网：http://requirejs.org/
- RequireJS和AMD规范：http://javascript.ruanyifeng.com/tool/requirejs.html
函数式定义
// 最佳实践：不写死?？槊? 即'helper'部分
// 依赖的?？榭捎锌晌? 即['jquery']部分
define('helper', ['jquery'], function($){
return{
trim: function(str) {
return $.trim(str);
}
}
})
定义简单的对象
define({
userName: '',
name: ''，
eamil: ''
})
shim({
'modernizr': { //不支持AMD的?？? deps: ['jquery'], //依赖的?？? exports: 'Modernizr', //全局变量作为?？槎韵? init: function($) { //初始化函数，返回的对象代替exports作为?？槎韵? return $;
}
}
})
waitSeconds
下载js等待的时间，默认7秒；如果设置为0，则禁止等待超时。
urlArgs
下载文件时间，在URL后面增加额外的query参数
