前端

一些原生小方法

  • addClass
    往node或者nodelist中添加class
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function addClass($els, classNames) {
        function addOneClass($el, classNames) {
            var resultClass = $el.className.split(" ");
            var newClassNames = classNames.split(" ");
            newClassNames.forEach(function (newClass) {
                if (resultClass.indexOf(newClass) < 0) {
                    resultClass.push(newClass);
                }
            });
            $el.className = resultClass.join(" ");
        }
        if ($els instanceof Node) {
            addOneClass($els, classNames);
        } else {
            for (var i = 0; i < $els.length; i++) {
                addOneClass($els[i], classNames);
            }
        }
    }
  • removeClass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function removeClass($els, classNames) {
    function removeOneClass($el, classNames) {
        var thisClass = $el.className.split(" ");
        var removeClassNames = classNames.split(" ");
        var resultClass = [];
        thisClass.forEach(function (eachClass) {
            if (removeClassNames.indexOf(eachClass) < 0) {
                resultClass.push(eachClass);
            }
        });
        $el.className = resultClass.join(" ");
    }
    if ($els instanceof Node) {
        removeOneClass($els, classNames);
    } else {
        for (var i = 0; i < $els.length; i++) {
            removeOneClass($els[i], classNames);
        }
    }
}

  • hasClass

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function hasClass($el, className) {
        if ($el instanceof Node) {
            var classes = $el.className.split(" ");
            if (className && classes.indexOf(className) > -1) {
                return true;
            }
            return false;
        } else {
            return false;
        }
    }

  • getStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getStyle($node, styleName, configObj) {
    configObj = shallowExtend({
            pseudoElt: null
        },
        configObj || {}
    );
    var styles = null;
    if ($node.currentStyle) {
        styles = $node.currentStyle;
    } else if (window.getComputedStyle) {
        styles = window.getComputedStyle($node, configObj.pseudoElt);
    } else {
        console.log("can not resolve this function");
        return;
    }
    styleName = toHump(styleName);
    return styles[styleName];
}
  • toHump
    a-bc-de -> aBcDe
1
2
3
4
5
function toHump(name) {
    return name.replace(/\-(\w)/g, function (all, letter) {
        return letter.toUpperCase();
    });
}
  • shallowExtend 浅继承
1
2
3
4
5
6
function shallowExtend(obj1, obj2) {
    for (var propsName in obj2) {
        obj1[propsName] = obj2[propsName];
    }
    return obj1;
}
  • arrayLikeToArray 类数组转数组
1
2
3
function arrayLikeToArray(arrayLikeObj) {
    return [].slice.call(arrayLikeObj);
}
  • isJSON
1
2
3
function isJSON(obj) {
    return typeof (obj) === "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length
}
  • toStringWithPadZero
    number 按显示位数转 字符串，不足位的填充0
    如： 2 显示2位
    结果： 02
1
2
3
4
5
6
7
8
9
function toStringWithPadZero(num, length) {
    var numLength = (num + "").length;
    if (numLength >= length) {
        return num + "";
    } else {
        var arr = new Array(length - numLength + 1);
        return arr.join('0') + "" + num;
    }
}