js中封装函数-入门

前言

在日常开发过程中，会使用很多重复的功能，为了方便使用，我们将这些重复的功能，封装成函数，虽然这样做了，但是还是有点不方便，每次都得重新封装，能不能一劳永逸？答案是能，创建一个js文件，将所有的功能函数，都复制进去，以后要想使用某个功能，引入文件即可，就能够使用这个文件中的函数

补零

function buling(n){
    if(n >= 10){
        n = "" + n;
    }else{
        n = "0" + n;
    }
    //  buling(); 直接拿这个就行了

日期格式化

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 dateDiff(date1,date2){
    // 默认参数的处理
    // console.log(date1);
    // console.log(date2);
    var d1 = new Date(date1);
    // if(date2){
    //     // 设置指定日期
    //     var d2 = new Date(date2);
    // }else{
    //     // 获取当前日期
    //     var d2 = new Date();
    // }
    var d2 = date2 ? new Date(date2) : new Date();
    // console.log(d1);
    // console.log(d2);
    // 如何计算差值？
        // 不安全的做法：两个日期对象可以直接相减
        // console.log(d1 - d2);
        // 最安全的做法是，获取时间戳，然后相减
        var t1 = d1.getTime();
        var t2 = d2.getTime();

        var time = Math.abs(t1 - t2);
        // 根据毫秒数，计算天，时，分，秒
        var tian = parseInt(time/1000/60/60/24);
        var shi = parseInt((time - tian*24*60*60*1000)/1000/60/60);
        var fen = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000)/1000/60);
        var miao = parseInt((time - tian*24*60*60*1000 - shi*60*60*1000 - fen*60*1000)/1000);

        // 优化最终数据的拼接结果，想返回就返回，不想返回就直接打印
        console.log(tian + "天" + shi + "时" + fen + "分" + miao + "秒");
}
// dateDiff("2008,8,8 20:8:8", "1949,10,1,10:1:0"); 
// dateDiff("2008,8,8 20:8:8");

获取非行内样式

 // 获取非行内样式的兼容：必然会得到当前的样式值
    function getStyle(ele,attr){  //(元素，属性)
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }
    //  getStyle();

范围随机数

    //生成一个一阶段使用过的rgb的随机颜色值，结果使用字符串显示：rgb(210,145,67)
function random(a,b){
    return Math.round(Math.random()*(a-b)+b);
}
    // random()

随机颜色值

function randomRGB(){
    return "rgb(" + random(0,255) + "," + random(0,255) + "," + random(0,255) + ")";
}
    //  randomRGB()

数组去重

  function noRepeat(arr) {  //arr是一个数组
        for(var i = 0; i < arr.length-1; i++){
            for(var j = i+1; j < arr.length; j++){
                if(arr[i]===arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    // var arr2 = noRepeat(arr);
    //console.log(arr2)

运动得封装

function move(ele,attr,target){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        if(attr == "opacity"){
            var iNow = getStyle(ele,attr) * 100;
        }else{
            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);
}
// move();  元素对象,样式,目标距离 

事件冒泡的阻止，是有兼容的 取消冒泡stopBubble()

    // 方法兼容正常浏览器e.stopPropagation();
    // 属性兼容IE浏览器e.cancelBubble = true;
    function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }
//  stopBubble() ;

总结

虽然不是什么大牛，上面这些封装也是JS中最好理解、最通俗易懂的，如果我新的理解或内容，我会再次修改和补充的。有什么错误，请留言或者私聊，如果本文对您有帮助的话，请点赞和转发， 让我可以帮助到更多的人，让我们一起加油吧！

原创作品，违法必究

疫情期间，我们逆战必胜