对函数进行封装是一个良好的程序思想,是一个良性的编程方法。当我们需要某功能函数时,我们只需要调用即可,不需要自己写程序,这样大大的减少了我们的工作量。提高了程序运行的安全性和可移植性,同时还提高了代码的保密性。岂不美哉!下面我就分享一些常用的封装函数,方便大家使用。
1.事件委托的封装
function eveEnt(child,cb){
return function(eve){
var e = eve || window.event;
var mubiaoEle = e.target || e.srcElement;
for(var i = 0;i<child.length;i++){
if(child[i]==mubiaoEle){
cb.bind(mubiaoEle)();
}
}
}
}
2.获取非行内样式的兼容:必然会得到当前的样式值
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
3.运动的封装(包括透明度)
//ele代表元素,attr代表属性,target代表目标位置
function move(ele,attr,target){
clearInterval(ele.t);
ele.t = setInterval(() => {
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
//getStyle用到了获取样式封装函数
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (target - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow === target){
clearInterval(ele.t);
}else{
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
}, 30);
}
4.阻止事件冒泡封装
function stopBubble(eve){
if(event.stopPropagation){
eve.stopPropagation();
}else{
eve.cancelBubble=true;
}
}
5.获取可视窗口大小
function view() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight|| 0
};
}
6.随机数的封装
function random(min, max) {
return Math.round(Math.random()*(max - min)+min);
}
后续我会补充更多的封装函数方便大家使用,大家尽情期待哈:)