jQuery编程模仿

近来因为公司不断拖欠工资的关系,停顿了一段学习的时间。看书也有些凌乱,现将目前接触到的querySelectorAll方法作为框架基础的小类库贴出,由于此方法只在最新浏览器中被使用。在开发中仍以jQuery选择器为主,此文只供私下学习。

(function(w){
    if(!String.trim || typeof String.trim !== ‘function‘) {
        String.trim = function(str){
            switch(typeof str) {
                case ‘number‘ : return ‘‘ + str;
                case ‘string‘ : return str.replace(/^\s+|\s+$/g, ‘‘);
                default : return Object.prototype.toString.call(str); // 返回最原始的toString
            }
        };
    }
    var Garbin = function(obj) {
        this.data = obj;
    };
    var garbin = function(query){
        if(!String.trim(query) || typeof query !== ‘string‘) return null;
        var obj = w.document.querySelectorAll(query);
        return new Garbin(obj);
    };
    garbin.extend = function(a, b) {
        if(!a) return null;
        if(!b) return a;
        for(var k in b) a[k] = b[k]; 
        return a;
    };
    garbin.extend(garbin, {
        merge : function(a, b) {
            for(var k in b) if(!a.hasOwnProperty(k)) a[k] = b[k];
            return a;
        }
    });
    garbin.fn = Garbin.prototype;
    garbin.extend(Garbin.prototype, {
        get : function(idx) {
            if(!idx || isNaN(idx)) throw new TypeError(‘Param is not a Number type.‘);
            if(!this.data) throw new Error(‘point-null Error.‘);
            return this.data.item(idx);
        },
        val : function(val) {
            var data = this.data;
            if(val) {
                for (var i = 0; i < data.length; i++) {
                    data[i].setAttribute(‘value‘, val);
                }
                return this;
            } else if(data){
                if(this.data.length === 1) return data[0].getAttribute(‘value‘);
                else {
                    var result = [];
                    for (var i = 0; i < data.length; i++) { result.push(data[i].getAttribute(‘value‘)); }
                    return result;
                }
            }
        },
        attr : function(keyOrData, value) {
            var data = this.data;
            if(!keyOrData) return this;
            if(!value) {
                if(typeof keyOrData === ‘string‘) {
                    if(!data) return null;
                    if(data.length === 1) return data[0].getAttribute(keyOrData);
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result.push(data[i].getAttribute(keyOrData));
                    }
                    return result;
                } else {
                    for(var k in keyOrData) {
                        var v = keyOrData[k];
                        for (var i = 0; i < data.length; i++) {
                            data[i].setAttribute(k, v);
                        }
                    }
                    return this;
                } 
            }
            data[0].setAttribute(keyOrData, value);
            return this;
        },
        text : function(txt) {
            var data = this.data;
            if(!data) return this;
            var parseHTML = function(html) {
                if(!html) return null;
                return html.replace(/<.*>/, ‘‘);
            };
            if(!txt) {
                if(data.length === 1) return parseHTML(data[0].innerHTML);
                var result = [];
                for (var i = 0; i < data.length; i++) {
                    result.push(parseHTML(data[i].innerHTML));
                }
                return result;
            } else {
                var html = ‘<‘ + data[0].innerHTML.replace(/^[^<]*<|>[^>]*$/g, ‘‘);
                if(data.length === 1) data[0].innerHTML = txt + html;
                else {
                    for (var i = 0; i < data.length; i++) {
                        data[i].innerHTML = txt + html;
                    }
                }
                return this;
            }
        },
        html : function(html) {
            var data = this.data;
            if(!data || data.length < 1) return null;
            if(!html) {
                if(data.length === 1) return data[0].innerHTML;
                var result = [];
                for (var i = 0; i < data.length; i++) {
                    result.push(data[i].innerHTML);
                }
                return result;
            } else {
                if(data.length === 1) data[0].innerHTML = html;
                else {
                    for (var i = 0; i < data.length; i++) {
                        data[i].innerHTML = html;
                    }
                }
                return this;
            }
        },
        css : function(keyOrData, value) {
            var data = this.data;
            if(!keyOrData) return this;
            if(!value) {
                if(typeof keyOrData === ‘string‘) {
                    if(!data) return null;
                    if(data.length === 1) return data[0].style[keyOrData];
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result.push(data[i].style[keyOrData]);
                    }
                    return result;
                } else {
                    for(var k in keyOrData) {
                        var v = keyOrData[k];
                        for (var i = 0; i < data.length; i++) {
                            data[i].style[k] = v;
                        }
                    }
                    return this;
                } 
            }
            data[0].style[keyOrData] = value;
            return this;
        },
        show : function() {
            return this.css(‘visibility‘, ‘visible‘);
        },
        hide : function() {
            return this.css(‘visibility‘, ‘hidden‘);
        },
        find : function(query) {
            if(!String.trim(query) || typeof query !== ‘string‘) return null;
            var data = this.data;
            if(!data) return;
            if(data.length === 1) {
                return new Garbin(data[0].querySelectorAll(query));
            } else {
                var result = [];
                for (var i = 0; i < data.length; i++) {
                    var tmpArr = data[i].querySelectorAll(query);
                    for (var j = 0; j < tmpArr.length; j++) {
                        result.push(tmpArr.item(j));
                    }
                }
                return new Garbin(result);
            }
        }
    });
    garbin.extend(w, { garbin : garbin });
}(window));

 

jQuery编程模仿,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。