一些常用封装函数的分享

对函数进行封装是一个良好的程序思想,是一个良性的编程方法。当我们需要某功能函数时,我们只需要调用即可,不需要自己写程序,这样大大的减少了我们的工作量。提高了程序运行的安全性和可移植性,同时还提高了代码的保密性。岂不美哉!下面我就分享一些常用的封装函数,方便大家使用。

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);
 }

后续我会补充更多的封装函数方便大家使用,大家尽情期待哈:)

发布了15 篇原创文章 · 获赞 10 · 访问量 495

猜你喜欢

转载自blog.csdn.net/weixin_43797492/article/details/104621990
今日推荐