php封装成一个模块,js里封装一个方法--模块化-CSDN博客

模块化就是通过每一个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

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

aBtn[i].index = i;

aBtn[i].onclick = function(){for(var i = 0;i

aBtn[i].className ='';

}

aBtn[this.index].className = 'on';

move.move(oUl,{left:-this.index*aLi[0].offsetWidth});

}

})

第四个js文件 init.js

require(['slider'],function(mod){

mod.slide()