js几种常见的方法封装(阻止事件冒泡、事件委托、随机数),方便调用

       对于有的方法,逢用便创建,显得太麻烦不说,无形之中增加了我们的工作量,于是我们可以将常用的一些方法进行封装,以后我们就可以随用随拿啦。

注意:
       在封装一个方法之前,我们要先给方法起一个名字,最好是语义化名字,方便以后的理解,对优化和查找等方面都有好处。
       方法里面需要的参数我们可以设置参数名,可以看哪些是需要的就进行提取并且写到参数名的位置;
       还要注意一定要返回需要的值,不然会报错;
       并且在使用的时候一定要保证和参数名字是一一对应的。

1、阻止事件冒泡封装

function stopBubble(eve){
    if(event.stopPropagation){
        eve.stopPropagation();
    }else{
        eve.cancelBubble=true;
    }
}

2、事件委托的封装

function eveEnt(child,cb){
    return function(eve){
        let e = eve || window.eveEnt;
        let targetEle = e.target || e.srcElement;
        for(let i=0;i<child.length;i++){
            if(child[i] == targetEle){
                cb.call(targetEle)();
            }
        }
    }
}

3、获取可视窗口大小

function view() {
    return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight|| 0
    };
}

4、获取已经滚动到元素的左边界或上边界的像素数

function scroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}

5、event兼容

var eve = {
    getEvent: function(event) {
    return event || window.event;
}
}

6、随机数的封装

function random(min, max) {
    return Math.round(Math.random()*(max - min)+min);
  }
random(min, max) ;

7、获取行内样式的兼容

function getStyle(ele,attr){
    if(ele.currentStyle){
        return currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值