JS学习：第二周——NO.4DOM库

DOM库封装练习

var utils = (function () {
    var flg = 'getComputedStyle' in window;//惰性思想的运用；
    function makeArray(arg) {
        if (flg) {//标准浏览器
            return Array.prototype.slice.call(arg);
        } else {
            var ary = [];
            for (var i = 0; i < arg.length; i++) {
                ary.push(arg[i]);
            }
            return ary;
        }
    }

    function jsonParse(jsonStr) {
        return 'JSON' in window ? JSON.parse(jsonStr) : eval('(' + jsonStr + ')');
    }

    function rnd(n, m) {
        n = Number(n);
        m = Number(m);
        if (isNaN(n) || isNaN(m)) {
            return Math.random();//当返回0-1之间的随机小数，说明参数传错了；
        }
        if (n > m) {
            var tmp = m;
            m = n;
            n = tmp;
        }
        return Math.round(Math.random() * (m - n) + n);
    }

    function getByClass(strClass, parent) {
        parent = parent || document;
        if (flg) {
            return this.makeArray(parent.getElementsByClassName(strClass));
        }
        //对IE浏览器兼容处理；
        var aryClass = strClass.replace(/(^ +)|( +$)/g, '').split(/\s+/g);
        var nodeList = parent.getElementsByTagName('*');
        var ary = [];
        for (var i = 0; i < nodeList.length; i++) {
            var cur = nodeList[i];
            var bOk = true;
            for (var j = 0; j < aryClass.length; j++) {
                var reg = new RegExp('(^| +)' + aryClass[j] + '( +|$)');
                if (!reg.test(cur.className)) {
                    bOk = false;
                    break;
                }
            }
            if (bOk) {
                ary.push(cur);
            }
        }
        return ary;
    }

    function hasClass(curEle, cName) {
        var reg = new RegExp('(^| +)' + cName + '( +|$)', 'g');
        return reg.test(curEle.className);
    }

    function addClass(curEle, strClass) {
        var aryClass = strClass.replace(/(^ +)|( +$)/g, '').split(/\s+/g);
        for (var i = 0; i < aryClass.length; i++) {
            if (!this.hasClass(curEle, aryClass[i])) {
                curEle.className += ' ' + aryClass[i];
            }
        }
    }

    function removeClass(curEle, strClass) {
        var aryClass = strClass.replace(/(^ +)|( +$)/g, '').split(/\s+/g);
        for (var i = 0; i < aryClass.length; i++) {
            var reg = new RegExp('(^| +)' + aryClass[i] + '( +|$)', 'g');
            if (reg.test(curEle.className)) {
                curEle.className = curEle.className.replace(reg, ' ').replace(/(^ +)|( +$)/g, '').replace(/\s+/g, ' ');
            }
        }
    }

    function getCss(curEle, attr) {
        var val = null;
        var reg = null;
        if (flg) {
            val = getComputedStyle(curEle, false)[attr];
        } else {
            if (attr === 'opacity') {
                val = curEle.currentStyle['filter'];//‘alpha(opacity=10)’;
                reg = /^alpha\(opacity[=:](\d+(\.\d+)?)\)$/;
                return reg.test(val) ? RegExp.$1 / 100 : 1;
            }
            val = curEle.currentStyle[attr];
        }
        //如果带单位了，干掉单位；
        reg = /^([+-])?(\d+(\.\d+)?)(px|pt|rem|em)?$/gi;
        return reg.test(val) ? parseFloat(val) : val;
    }

    function setCss(curEle, attr, value) {
        //升级3：处理float
        if (attr === 'float') {
            curEle.style.cssFloat = value;
            curEle.style.styleFloat = value;
            return;
        }
        //升级2：处理透明度
        if (attr == 'opacity') {
            curEle.style.opacity = value;
            curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')';
            return;
        }
        var reg = /(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))/gi;
        //升级1：处理单位；
        if (reg.test(attr)) {
            if (value !== 'auto' || value.toString().indexOf('%') == -1) {
                value = parseFloat(value) + 'px';
            }
        }
        curEle.style[attr] = value;
    }

    function setGroupCss(curEle, opt) {
        if (Object.prototype.toString.call(opt) !== '[object Object]') return;
        for (var attr in opt) {
            this.setCss(curEle, attr, opt[attr]);
        }

    }

    function css(curEle) {
        var argTwo = arguments[1];
        if (typeof argTwo === 'string') {
            var argThree = arguments[2];
            if (argThree === undefined) {//第三个参数没有-获取
                return this.getCss(curEle, argTwo);
            } else {//当有第三个参数-设置一个样式
                this.setCss(curEle, argTwo, argThree);
            }
        }
        if ({}.toString.call(argTwo) === '[object Object]') {
            this.setGroupCss(curEle, argTwo);
        }
    }

    function win(attr, value) {
        if (value === undefined) {
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = document.body[attr] = value;
    }

    function offset(curEle) {
        var l = curEle.offsetLeft;
        var t = curEle.offsetTop;
        var par = curEle.offsetParent;
        while (par) {
            if (window.navigator.userAgent.indexOf('MSIE 8') == -1) {
                l += par.clientLeft;
                t += par.clientTop;
            }
            l += par.offsetLeft;
            t += par.offsetTop;
            par = par.offsetParent;
        }
        return {left: l, top: t}
    }

    function getChildren(curEle, tagName) {
        var childs = curEle.childNodes;//获取所有的子节点
        var ary = [];
        for (var i = 0; i < childs.length; i++) {
            var cur = childs[i];
            if (cur.nodeType == 1) {//首先保证是子元素，再考虑是否过滤；
                if (tagName) {
                    if (cur.tagName.toLocaleLowerCase() === tagName.toLowerCase()) {
                        ary.push(cur);
                    }
                } else {
                    ary.push(cur)
                }
            }
        }
        return ary;
    }

    function prev(curEle) {
        if (flg) {
            return curEle.previousElementSibling;
        }
        var pre = curEle.previousSibling;
        while (pre && pre.nodeType !== 1) {
            pre = pre.previousSibling;
        }
        return pre;
    }

    function next(curEle) {
        if (flg) {
            return curEle.nextElementSibling;
        }
        var nex = curEle.nextSibling;
        while (nex && nex.nodeType !== 1) {
            nex = nex.nextSibling;
        }
        return nex;
    }

    function sibling(curEle) {
        var ary = [];
        var pre = this.prev(curEle);
        var nex = this.next(curEle);
        if (pre) ary.push(pre);
        if (nex) ary.push(nex);
        return ary;
    }

    function prevAll(curEle) {
        var ary = [];
        var pre = this.prev(curEle);
        while (pre) {
            ary.push(pre);
            pre = this.prev(pre);
        }
        return ary;
    }

    function nextAll(curEle) {
        var nex = this.next(curEle);
        var ary = [];
        while (nex) {
            ary.push(nex);
            nex = this.next(nex);
        }
        return ary;
    }

    function siblings(curEle) {
        var ary1 = this.prevAll(curEle);
        var ary2 = this.nextAll(curEle);
        return ary1.concat(ary2);
    }

    function firstChild(curEle) {
        var children = this.getChildren(curEle);
        return children[0];
    }

    function lastChild(curEle) {
        var children = this.getChildren(curEle);
        return children[children.length - 1];
    }

    function index(curEle) {
        return this.prevAll(curEle).length;
    }

    function appendChild(curEle, parent) {
        parent.appendChild(curEle);
    }

    function prependChild(curEle, parent) {
        var first = this.firstChild(parent);
        if (first) {
            parent.insertBefore(curEle, first);
        } else {
            parent.appendChild(curEle);
        }
    }

    function insertBefore(curEle, oldEle) {
        oldEle.parentNode.insertBefore(curEle, oldEle);
    }

    function insertAfter(curEle, oldEle) {
        var nex = this.next(oldEle);
        if (nex) {
            oldEle.parentNode.insertBefore(curEle, nex);
        } else {
            oldEle.parentNode.appendChild(curEle);
        }
    }

    return {
        //makeArray:类数组转数组
        makeArray: makeArray,
        //jsonParse:把JSON格式的字符串转成JSON格式的数据（对象）
        jsonParse: jsonParse,
        //rnd:求一定范围的随机数，包含最大值；
        rnd: rnd,
        //getByClass:通过class名，可以限制范围的获取元素
        getByClass: getByClass,
        //hasClass:判断元素身上是否有某个class名
        hasClass: hasClass,
        //addClass:给元素批量添加出class名
        addClass: addClass,
        //removeClass:从元素身上批量删除class名
        removeClass: removeClass,
        //getCss:获取非行间样式
        getCss: getCss,
        //setCss:给元素设置一个样式
        setCss: setCss,
        //setGroupCss:给元素设置一组样式
        setGroupCss: setGroupCss,
        //css:集获取，设置一个，设置一组为一体；
        css: css,
        //win:浏览器盒子模型的兼容处理
        win: win,
        //offset:元素偏移量的兼容处理；
        offset: offset,
        //getChildren:获取当前元素下的所有子元素（可以通过标签名过滤子元素）
        getChildren: getChildren,
        //prev：获取当前元素的上一个哥哥元素
        prev: prev,
        //next:获取当前元素的下一个弟弟元素
        next: next,
        //sibling:获取当前元素的相邻元素；
        sibling: sibling,
        //prevAll:获取当前元素所有的哥哥元素
        prevAll: prevAll,
        //nextAll:获取当前元素所有的弟弟元素
        nextAll: nextAll,
        //siblings:获取当前元素所有的兄弟元素；
        siblings: siblings,
        //firstChild:获取当前容器下第一个子元素
        firstChild: firstChild,
        //lastChild:获取当前容器下最后一个子元素
        lastChild: lastChild,
        //index:当前元素的索引（当前元素排行第几）；
        index: index,
        //appendChild:把新元素插入到父容器的末尾；
        appendChild: appendChild,
        //prependChild:把新元素插入到父容器的开头；
        prependChild: prependChild,
        //insertBefore:把新元素插入到指定元素的前面
        insertBefore: insertBefore,
        //insertAfter:把新元素插入到指定元素的后面；
        insertAfter: insertAfter
    }
})();