代码改变世界

无污染的DOM扩展

2010-04-27 15:09  BlueDream  阅读(371)  评论(0编辑  收藏  举报

像prototype.js的那种直接在元素上原型进行扩展.作者也渐渐的感觉到了吃力.所以避免对原生对象污染还是很有必要的.

【简易的扩展函数】

myWrapper = (function() {
    var push = [].push;
    
    function NodeList(elems) {
        this.length = 0;
        this.merge(elems.nodeType ? [elems] : elems);
    }

    function myWrapper(elems) {
        return new NodeList(elems);
    }

    myWrapper.NodeList = NodeList;

    NodeList.prototype = {
        merge: function(array) {
            try {
                push.apply(this, array);
            } catch (e) {
                var i = this.length, j = 0;

                for (var l = array.length; j < l; ++j) {
                    this[i++] = array[j];
                } 

                this.length = i;
            }
            return this;
        },

        each: function(fn) {
            for (var i = -1, l = this.length; ++i < l;) {
                fn.call(this[i], this[i], i, l, this);
            } 
            return this;
        }
    };
    return myWrapper;
})();

myWrapper.NodeList.prototype.applyCSS = (function() {
    var hasOwn = Object.prototype.hasOwnProperty;
    return function(props) {
        for (var i = -1, l = this.length; ++i < l;) {
            for (var p in props) {
                if (hasOwn.call(props, p)) {
                    this[i].style[p] = props[p];
                } 
            }
        }
        
        return this;

    };
}());

myWrapper(document.body).applyCSS({
    background: 'red',
    color: 'yellow'
});