为什么要使用require.js
异步加载文件，简化依赖关系
模块化开发， 一个文件就是一个模块，减少全局变量
如何使用
define定义模块
require加载模块
tips:
一般不写模块名，让自动打包来完成
requireJS以一个相对于baseUrl的地址来加载所有代码
加载机制
RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。【意味着可以跨域访问】
加载即执行
配置模块路径
-
paths-映射不放于baseUrl下的模块名
requirejs.config({ baseUrl: '/js', paths: { 'jquery': 'lib/jquery' //模块名：模块路径 } }) *** 另一种方式 *** requirejs.config({ baseUrl: '/js', paths: { 'jquery': [ 'lib/jquery2', //首先加载的模块 'lib/jquery' //第一个加载失败后的备用文件 ] } })
定义模块
-
函数式定义
// 最佳实践：不写死模块名, 即'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