基于原生JS封装Tool库（源码）

Tool库

var Tool = function() {
    //getElementByClassName在IE678中不存在，因此可以用来判断是不是低版本浏览器
    this.flag = "getElementsByClassName" in document;
};
Tool.prototype = {
    constructor: Tool,
    //常用函数
    //通过ClassName获取元素
    getElementsByClassName: function(context, cName) {
        var context = context || document;
        var ary = [];
        if (this.flag) {
            return this.listToArray(context.getElementsByClassName(cName));
        }
        var allNode = context.getElementsByTagName("*");
        var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)");
        for (var i = 0; i < allNode.length; i++) {
            var cur = allNode[i];
            if (reg.test(cur.className)) {
                ary.push(cur);
            }
        }
        return ary;
    },
    //将JSON字符串转换成JSON对象
    toJSON: function(jsonStr) {
        var jsonObj = null;
        try {
            jsonObj = JSON.parse(jsonStr);
        } catch (e) {
            jsonObj = eval("(" + jsonStr + ")");
        }
        return jsonObj;
    },
    //判断数据类型
    isType: function(value, type) {
        var type = arguments[1] || "object",
            reg = new RegExp("\\[object " + type + "\\]", "i");
        return reg.test(Object.prototype.toString.call(value));
    },
    //将类数组转换成数组
    listToArray: function(likeAry) {
        var ary = [];
        if (this.flag) {
            ary = Array.prototype.slice.call(likeAry, 0);
        } else {
            for (var i = 0; i < likeAry.length; i++) {
                ary.push(likeAry[i]);
            }
        }
        return ary;
    },
    /***下面是设置DOM***/
    /**
     * getEleChildren:获取指定节点名的元素节点们；第二个参数如果不传，则返回obj下的所有子元素节点；
     * @param  parent [Node]
     * @param  tagName [String]
     * @return ary 元素节点数组
     */
    getEleChildren: function(parent, tagName) {
        var allNode = parent.childNodes,
            ary = [],
            reg = new RegExp("^" + tagName + "&", "i");
        for (var i = 0; i < allNode.length; i++) {
            var cur = allNode[i];
            if (cur.nodeType === 1) {
                if (tagName) {
                    if (reg.test(cur.nodeName)) {
                        ary.push(cur);
                    }
                    continue;
                }
                ary.push(cur);
            }
        }
        return ary;
    },
    //获取第一个元素节点
    getFirst: function(curEle) {
        var childern = this.getEleChildren(curEle);
        return childern.length > 0 ? childern[0] : null;
    },
    //获取最后一个元素节点
    getLast: function(curEle) {
        var childern = this.getEleChildren(curEle);
        return childern.length > 0 ? childern[childern.length - 1] : null;
    },
    //获取上一个哥哥元素节点
    getPre: function(curEle) {
        if (this.flag) {
            return curEle.previousElementSibling;
        }
        var pre = curEle.previousSibling;
        while (pre && pre.nodeType !== 1) {
            pre = pre.previousSibling;
        }
        return pre;
    },
    //获取所有的哥哥元素节点们
    getPres: function(curEle) {
        var ary = [],
            next = this.getPre(curEle);
        while (next) {
            ary.unshift(next);
            next = this.getPre(next);
        }
        return ary;
    },
    //获取下一个弟弟元素节点
    getNext: function(curEle) {
        if (this.flag) {
            return curEle.nextElementSibling;
        }
        var next = curEle.nextSibling;
        while (next && next.nodeType !== 1) {
            next = next.nextSibling;
        }
        return next;
    },
    getNexts: function(curEle) {
        var ary = [],
            next = this.getNext(curEle);
        while (next) {
            ary.unshift(next);
            next = this.getNext(next);
        }
        return ary;
    },
    //获取以一个哥哥元素节点和下一个弟弟元素节点
    getSibling: function(curEle) {
        var ary = [],
            pre = this.getPre(curEle),
            next = this.getNext(curEle);
        pre ? ary.push(pre) : void 0;
        next ? ary.push(next) : void 0;
        return ary;
    },
    //获取所有的兄弟元素节点（除自己）
    getSiblings: function(curEle) {
        var pres = this.getPres(curEle),
            nexts = this.getNexts(curEle);
        return pres.concat(nexts);
    },
    //获取元素的索引值
    getIndex: function(curEle) {
        return this.getPres(curEle).length;
    },
    //在oldEle后面插入新的元素newEle。若未指定oldEle，则直接添加在后面
    insertAfter: function(newEle, oldEle) {
        var next = this.getNext(oldEle),
            par = oldEle.parentNode;
        next ? par.insertBefore(newEle, next) : par.appendChild(newEle);
    },
    //把一个元素节点添加为parentEle的第一个子节点
    prependChild: function(parentEle, curEle) {
        var first = this.getFirst(parentEle);
        first ? parentEle.insertBefore(curEle, first) : parentEle.appendChild(curEle);
    },
    //不传str：获取元素的innerHTML
    //传str：设置元素的innerHTML为str
    innerHTML: function(curEle, str) {
        var str = str || "";
        if (!str) {
            return curEle.innerHTML;
        }
        curEle.innerHTML = str;
    },
    //处理元素的innerText和TextContent的兼容性（传一个参数获取，传两个参数设置）
    text: function(ele, str) { //处理innerText和textContent的兼容性；传一个参数是获取；2个参数是设置；
        if (ele && ele.nodeType && ele.nodeType == 1) {
            if (str === undefined) { //如果str没有传，那么方法是获取元素的文本内容；
                if (typeof ele.textContent == 'string')
                    return ele.textContent;
                else
                    return ele.innerText;
            } else { //如果传了，就是添加文本内容
                if (str === null) {
                    alert('text方法参数错误,str为null！');
                    return;
                } else if (typeof str == 'string') {
                    if (typeof ele.textContent == 'string') {
                        ele.textContent += str;
                    } else {
                        ele.innerText += str;
                    }
                } else {
                    alert('text方法的参数错误！')
                }
            }
        } else {
            alert('text方法的ele参数错误！')
        }
    },
    /***下面是设置CSS***/
    setCss: function(curEle, attr, value) { //设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写；
        if (typeof value === "undefined") { //如果有第三个参数，就是设置Css；如果没有就是获取Css；
            var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
            var value = this.flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
            return !reg.test(attr) ? parseFloat(value) : value;
        } else {
            switch (attr) {
                case "opacity":
                    curEle["style"][attr] = value;
                    curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
                    break;
                case "float":
                    curEle["style"].cssFloat = value;
                    curEle["style"].styleFloat = value;
                    break;
                case "backgroundColor":
                    curEle["style"][attr] = value;
                    break;
                case "zIndex":
                    curEle["style"][attr] = value;
                    break;
                default:
                    curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
            }
        }
    },
    setGroupCss: function(curEle, cssObj) { //给元素设置一组属性；cssObj是一个对象类型；
        for (var key in cssObj) {
            this.setCss(curEle, key, cssObj[key]);
        }
    },
    offset: function(curEle) { //获取偏移量；
        var par = curEle.offsetParent,
            left = curEle.offsetLeft,
            top = curEle.offsetTop;
        while (par) {
            left += par.offsetLeft;
            top += par.offsetTop;
            if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
                left += par.clientLeft;
                top += par.clientTop;
            }
            par = par.offsetParent;
        }
        return { left: left, top: top };
    },
    hasClassName: function(curEle, cName) { //判断是否有某个className；
        var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)");
        return reg.test(curEle.className);
    },
    addClassName: function(curEle, cName) { //增加某个className；
        if (!this.hasClassName(curEle, cName)) {
            curEle.className += (" " + cName);
        }
    },
    removeClassName: function(curEle, cName) { //移除类样式的方法；
        var reg = new RegExp("(?:^| +)" + cName + "(?: +|$)", "g");
        if (this.hasClassName(curEle, cName)) {
            curEle.className = curEle.className.replace(reg, " ");
        }
    }
};
//在DOM库上增加方法，同时不影响原来的方法；在类的原型上增加方法
~ function() {
    //数组去重
    Array.prototype.removeRepeat = function() {
        let obj = {};
        for (let i = 0; i < this.length; i++) {
            if (obj[this[i]] === undefined) {
                obj[this[i]] = this[i];
            } else {
                this[i--] = this[this.length - 1];
                this.length--;
            }
        }
        obj = null;
        return this;
    };
    //forEach兼容处理
    Array.prototype.forEachPro = function(fn, context) {
        var context = context || window;
        if (this.forEach) {
            this.forEach(fn, context);
            return this;
        }
        for (var i = 0; i < this.length; i++) {
            fn.call(context, this[i], i, this);
        }
        return this;
    };
    //判断是否为公有属性
    Object.prototype.myHasProperty = function(attr) {
        return (attr in this) && !this.hasOwnProperty(attr);
    };
    //去除首尾空格
    String.prototype.myTrim = function() {
        return this.replace(/^\s*|\s*$/g, "");
    };
    //是不是有效的
    String.prototype.mySub = function(len, isD) {
        var len = len || 10,
            isD = isD || false,
            str = "",
            n = 0;
        for (var i = 0; i < this.length; i++) {
            var s = this.charAt(i);
            /[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++;
            if (n > len) {
                isD ? str += "..." : void 0;
                break;
            }
            str += s;

        }
        return str;
    };
    /*
     *formatTime:时间字符串的格式化
     *@params
     *	templete:[string] 我们最后期望获取日期格式的模板 模板规则：{0}->年 {1}->月...
     *@return
     *	[string]格式化后的时间字符串
     */
    String.prototype.myFormatTime = function(templete) {

        //1.首先获取时间字符串的年月日等信息
        let timeAry = this.match(/\d+/g);
        //模板字符串
        //let templete = "{0}年{1}月{2}日 {3}时{4}分{5}秒";
        var templete = templete || "{0}年{1}月{2}日 {3}时{4}分{5}秒";
        templete = templete.replace(/\{(\d+)\}/g, (content, $1) => {
            //=>content:当前大正则匹配的信息  $1：小分组匹配到的信息
            //=>以$1的值为索引，到timeAry中找到对应的时间（如果没有则用"00"表示）
            let time = timeAry[$1] || "00";
            time.length < 2 ? time = "0" + time : time;
            return time;
        });
        return templete;
    };
    /*
     *queryURLParams:获取URL地址问好后面的参数信息（可能也包含HASH值）
     *@params
     *@retuen
     *	[object]把所有问好参数信息已键值对的方式存储起来并返回
     */
    String.prototype.myQueryURLParams = function() {
        let obj = {};
        this.replace(/([^?=&#]+)=([^?=&#]+)/g, (...[, $1, $2]) => { obj[$1] = obj[$2] });
        this.replace(/#([^?=&#]+)/g, (...[, $1]) => obj['HASH'] = $1);
        return obj;
    };
    /*
     *millimeter:实现大数字的千分符处理
     *@params
     *@return
     */
    String.prototype.millimeter = function() {
        return this.replace(/\d{1,3}(?=(\d{3})+$)/g, content => content + ',');
    };

}();