使用HTML5简单实现一个JQuery

最近在做一个Android平台的几个WebApp，一开始使用JQuery类库，在后来性能优化的时候发现有些问题：一是JQuery类库有点大，在网络加载的时候有点慢，二是加载类库执行有点慢；后来就可以是否应该用JQuery。大部分是用JQuery的时候，用的最多的也就是JQuery对DOM操作方便和Ajax方便；JQuery的开发代码有9000多行，而且很多功能我们是用不到的；加上开发平台是Android，浏览器当然固定是webkit内核了，所以兼容性的代码要去掉好大一部分。所以我开始考虑来写一个简单使用的代码库，这样就可以不用使用JQuery了。

　　JQuery最强大的地方莫过于她的选择器，要写个类库要满足这个功能；HTML5就提供了这个标准：document.querySelector、document.querySelectorAll！

　　document.querySelector返回的是DOM对象，document.querySelectorAll返回的是DOM数组，那么就可以这样来实现我们需要的JQuery功能了。

按 Ctrl+C 复制代码

eq : function (i) {
                    if(this.element && this.element.length > 0){
                        return $$(this.element[i]);
                    }
                    return null;
                },

get : function (i) {
                    var _ = this.eq(i);
                    return _ ? _.element[0] : null;
                },

html : function (html){
                    if(this.element && this.element.length > 0){
                        if(arguments.length == 1){
                            for (var i = 0; i < this.element.length; i++) {
                                this.element[i].innerHTML = html;
                            };
                        }
                        else{
                            return this.element[0].innerHTML;
                        }
                    }
                },

css : function (name, value){
                    if(this.element && this.element.length > 0){
                        if(arguments.length == 2) {
                            this.element[0].style[name] = value;
                        }
                        else{
                            return this.element[0].style[name];
                        }
                    }
                },

append : function (object){
                    if(this.element && this.element.length > 0){
                        for (var i = 0; i < this.element.length; i++) {
                            this.element[i].appendChild(object);
                        }
                    }
                },

remove : function (object){
                    if(this.element && this.element.length > 0){
                        for (var i = 0; i < this.element.length; i++) {
                            if(this.element[i].parentNode){
                                this.element[i].parentNode.removeChild(this.element[i]);
                            }
                            else{
                                document.body.removeChild(this.element[i]);
                            }                            
                        };
                    }
                },

insert : function (param){
                    if(this.element && this.element.length > 0){
                        for (var i = 0; i < this.element.length; i++) {
                            var object = document.createElement(param.type);
                            if(param.id) object.id = param.id;
                            if(param.class) object.className = param.class;
                            if(param.html) object.innerHTML = param.html;
                            this.element[i].appendChild(object);
                        }
                    }
                },

click : function (fn){
                    this.bind('click', fn);
                },

bind : function(type, fn){
                    if(this.element && this.element.length > 0){
                        for (var i = 0; i < this.element.length; i++) {
                            this.element[i].addEventListener(type, fn);
                        }
                    }
                },

attr : function(name){
                    if(this.element && this.element.length > 0){
                        var attr = this.element[0].attributes[name];
                        if(attr){
                            return attr.value;
                        }
                    }
                    return null;
                }
            }
            return query;
        },

ajax : function(p) {
            var xhr = new XMLHttpRequest();
            if(p.url){
                if(p.type && p.type.toUpperCase() == 'POST') {
                    p.type = 'POST';
                }
                else{
                    p.type = 'GET';
                }
                if(p.async){
                    p.async = true;
                }
                else{
                    p.async = false;
                }
                xhr.onerror = p.error;
                xhr.open(p.type, p.url, p.async);
                xhr.onreadystatechange = function () {
                    if(xhr.readyState === 1){
                        if(p.beforeSend) {
                            p.beforeSend();
                        }
                    }
                    else if(xhr.readyState === 4){
                        if(xhr.status == 200) {
                            p.success && p.success(xhr.responseText);
                        }
                        else{
                            console.log(p.url, xhr.status);
                            p.error && p.error( xhr.status, xhr );
                        }
                        p.complete && p.complete();
                    }
                }
                xhr.send( p.data || null );
            }
            this.abort = function (){
                xhr.abort();
            };
        }
    };
    global.Query = global.$ = Query;
    global.$$ = Query.Get;
})(window);

按 Ctrl+C 复制代码

一百多行代码，很方便，不用在去加载那几百K的JQuery了。而且想怎么改就怎么改！

posted @ 2013-09-30 21:27 mimo0 阅读(372) 评论(0) 收藏举报

刷新页面返回顶部

mimo0

使用HTML5简单实现一个JQuery

公告