js常见的几种封装方法，方便调用

Phyllis ·

更新时间:2024-11-13

· 604 次阅读

事件委托的封装

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

事件监听式绑定事件

function addEvent(ele,type,cb){
		if(ele.addEventListener){
			ele.addEventListener(type,cb,false);
		}else{
			ele.attachEvent("on"+type,cb)
		}
	}

阻止事件冒泡封装

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

获取行内样式的兼容

function getStyle(ele,attr){
    if(ele.currentStyle){
        return currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

获取可视窗口大小

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

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

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

缓冲运动的封装

function move(ele,attr,target){
clearInterval(ele.t);
ele.t=setInterval(()=>{
var s=getStyle(ele,attr);
var iNow=parseInt(s);
let speed=(target-iNow)/10;
speed=speed<0? Math.floor(speed) :Math.ceil(speed);
if(target==iNow){
clearInterval(ele.t);
}else{
ele.style[attr]=iNow+speed+"px";
}
},30);

随机数的封装

 function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}

获取随机数颜色的封装

 function randomColor(){
 return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
 }

补零

function buling(n){
	return n>=10 ? ""+n: "0" + n;
}

日期格式化

function createDate(){
        // 1.获取日期
        var d = new Date();
        // 2.获取每一部分
        var y = d.getFullYear();
        var m = d.getMonth() + 1;       // 月份直接处理了
        var qf_date = d.getDate();
        var qf_day = d.getDay();
        var h = d.getHours();
        var mts = d.getMinutes();
        var s = d.getSeconds();
        // 3.处理一些数据：周
        switch(qf_day){
            case 0:qf_day = "星期日";break;
            case 1:qf_day = "星期一";break;
            case 2:qf_day = "星期二";break;
            case 3:qf_day = "星期三";break;
            case 4:qf_day = "星期四";break;
            case 5:qf_day = "星期五";break;
            case 6:qf_day = "星期六";break;
        }
        // 4.拼接
        var str = y+"年"+buling(m)+"月"+buling(qf_date)+"日 "+qf_day+" "+
		buling(h)+":"+buling(mts)+":"+buling(s);
        return str;
    }
   // console.log(createDate());
    function buling(n){
        return n>=10 ? ""+n : "0"+n;
    }

数组去重

var arr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
		//console.log(arr);
		function fn(){
			for(var i=0;i<arr.length;i++){//遍历数组
				for(var j=i+1;j<arr.length;j++){//i分别于i+1和后面的依次进行比较
					if(arr[i]==arr[j]){//如果相等，删除j中的那个值
						arr.splice(j,1);
						j--;//防止第三个及以后的重复的忽略而没有进行比较
					}
				}
			}
			return arr;
		}

作者：zyfacd

封装方法调用方法封装 js

1024 个赞