require.js (模块化开发的框架/插件/库/引擎)
<b>干嘛的:</b>代码管理
<b>为什么用:</b>
代码重复,全局变量污染,依赖也会有问题(a-->b-->c),慢
<b>解决的问题:</b>
动态的引入js 用谁引入谁--整洁
自动解决依赖
模块化开发
<b>下载:</b>
http://requirejs.org/
http://seajs.org
<b>要求:</b>
推荐: 要在服务器环境下使用
<b>注意::</b>
模块化,没有给你带来新的东西,只是加了一些书写格式
<b> CMD:</b>
1. 定义模块 模块==js文件 在js文件完成
define(function(require,exports,module){
这里面的东西外面要用,必须对外输出
exports.东西= 值
});
2. 使用模块(引入模块) 在html里面完成
requirejs:
require(['模块名/文件名'],function(参数){
参数 == 接收到的模块
参数modA.东西 在使用模块里面的内容
})
seajs:
seajs.use('模块名/文件名',function(参数){
参数 == 接收到的模块
参数modA.东西 在使用模块里面的内容
})
3. 引入多个模块 在html里面完成
require(['模块1','模块n'],function(参数1,参数n){}
4. 模块里面引入模块 在js里面完成
var modA = require('模块名')
modA.属性
<b>AMD:</b>
1. 定义模块 模块==js文件 在js文件完成
define(function(){
这里面的东西外面要用,必须对外输出
return {}
});
2. 使用模块(引入模块) 在html里面完成
requirejs:
require(['模块名/文件名'],function(参数){
参数 == 接收到的模块
参数modA.东西 在使用模块里面的内容
})
3. 引入多个模块 在html里面完成
require(['模块1','模块n'],function(参数1,参数n){}
4. 模块里面引入模块 在js里面完成
define(['依赖模块1','依赖模块2'],function(mod1,mod2){
mod1.属性;
});
<b>require提高:</b>
1)设置基础路径
require.config({
baseUrl:'js/xxx/xx/ooo'
});
2)引入第三方模块
require.config({
shim:{
'jquery-1.7.2':{
exports: '$'
}
}
});
<b>模块化开发流程:</b>
1)分析模块数量
common.js
getStyle.js
getByClass.js
tab.js
move.js
focusImg.js
mouseWheel.js
2).编写模块-->测试模块
3).使用模块(完成网站功能)