模块化就是通过每一个js里封装一个方法：用exports将他输出， 在下一个js用require的方法加载js时就会将方法输出。然后在主页面引入require.js;
模块化基本写法：
define(function(require,exports,module){
})require:加载一个模块，后面跟的是一个js文件名
exports:输出
module:模块
举一个例子：
第一个js文件 ,get.js:
define(function(require,exports,module){
//将封装的这个函数，作为要输出的一个方法：其封装函数是用来返该元素所对应的属性的值。
exports.getStyle = function (obj,name){
//if判断考虑的是兼容的问题
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
})第二个文件：StarMove.js
SmartB2B行业电子商务
下载
SmartB2B 是一款基于PHP、MySQL、Smarty的B2B行业电子商务网站管理系统，系统提供了供求模型、企业模型、产品模型、人才招聘模型、资讯模型等模块，适用于想在行业里取得领先地位的企业快速假设B2B网站，可以运行于Linux与Windows等多重服务器环境，安装方便，使用灵活。 系统使用当前流行的PHP语言开发，以MySQL为数据库，采用B/S架构，MVC模式开发。融入了模型化、模板
define(function(require,exports,module){
//加载上一个模块
var get = require('get');
//在输出一个方法封装的运动框架
exports.move = function move(obj,json,complete){
//为了解决计时器多次调用出现的问题，在开始就清除它
clearInterval(obj.timer);
//判断有没有输入这个参数，如果没有进行默认
var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing || 'ease-out';
var count = parseInt(complete.dur/30);//总次数
//起始位置
var start = {};//{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json){
start[name] = parseFloat(get.getStyle(obj,name));
dis[name] = json[name] - start[name];
}
var n = 0;//当前步数
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(complete.easing){
case 'linear':
var cur = start[name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[name];
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3))*dis[name];
break;
}
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}
if(n == count){
clearInterval(obj.timer)
complete.fn && complete.fn();
}
},30)
}
})第三个js文件 slide.js
define(function (require,exports,module){var move = require('StartMove');var aBtn = document.getElementById('banner').getElementsByTagName('span');var oUl = document.getElementById('banner').getElementsByTagName('ul')[0];var aLi = oUl.children; //三张图片所占的宽度，length返回的是字符串中的字符数oUl.style.width = aLi.length*aLi[0].offsetWidth+'px';
exports.slide = function(){for(var i=0;i第四个js文件 init.js
require(['slider'],function(mod){
mod.slide()
})
主页面 banner.html
就会完成一个用模块化封装的轮播图：
要注意require的使用方法
