jQuery 1.2.6 源码阅读解读

jQuery 1.2.6 源码阅读解读

1.初始化方法

(function(){
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(){
        return new jQuery.fn.init();
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(){
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承
    jQuery.extend=function.fn.extend=function(){};
    //添加静态方法
    jQuery.extend({});
    //添加实例方法
    jQuery.fn.extend({});
    
});

2.实现选择器

(function(){
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(selector){
        return new jQuery.fn.init(selector);
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(selector){
            var elements=document.getElementsByTagName(selector);
            Array.prototype.push.apply(this.elements);
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承
    jQuery.extend=function.fn.extend=function(){};
    //添加静态方法
    jQuery.extend({});
    //添加实例方法
    jQuery.fn.extend({});
    
});

3.继承

(function(){
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(selector){
        return new jQuery.fn.init(selector);
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(selector){
            var elements=document.getElementsByTagName(selector);
            Array.prototype.push.apply(this.elements);
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承 并且只处理只有一个参数，也就是参数的扩展
    jQuery.extend=function.fn.extend=function(){
        var o=arguments[0];
        for (var p in o) {
            this[p]=o[p];
        }
    };
    //添加静态方法
    jQuery.extend({});
    //添加实例方法
    jQuery.fn.extend({});
    
});

4.添加静态方法

(function(){
    //解决版本冲突
    var _$=window.$;
    var _jQuery=window.jQuery;
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(selector){
        return new jQuery.fn.init(selector);
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(selector){
            var elements=document.getElementsByTagName(selector);
            Array.prototype.push.apply(this.elements);
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承 并且只处理只有一个参数，也就是参数的扩展
    jQuery.extend=function.fn.extend=function(){
        var o=arguments[0];
        for (var p in o) {
            this[p]=o[p];
        }
    };
    //添加静态方法
    jQuery.extend({
        trim:function(text){
            return (text || '').replace(/^\s+|\s+$/g,'');
        },
        noConflict:function(){
            window.$=_$;
            window.jQuery=_jQuery;
            return jQuery;
        }
    });
    //添加实例方法
    jQuery.fn.extend({});
    
});

5.添加实例方法

(function(){
    //解决版本冲突
    var _$=window.$;
    var _jQuery=window.jQuery;
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(selector){
        return new jQuery.fn.init(selector);
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(selector){
            var elements=document.getElementsByTagName(selector);
            Array.prototype.push.apply(this.elements);
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承 并且只处理只有一个参数，也就是参数的扩展
    jQuery.extend=function.fn.extend=function(){
        var o=arguments[0];
        for (var p in o) {
            this[p]=o[p];
        }
    };
    //添加静态方法
    jQuery.extend({
        trim:function(text){
            return (text || '').replace(/^\s+|\s+$/g,'');
        },
        noConflict:function(){
            window.$=_$;
            window.jQuery=_jQuery;
            return jQuery;
        }
    });
    //添加实例方法
    jQuery.fn.extend({
        get:function(num){
            return this[num];
        },
        each:function(fn){
            for (var i=0;i<this.length;i++) {
                fn(i,this[i]);
            }
        },
        css:function(){
            var l=arguments.length;
            if(l==1){
                return this[0].style[arguments[0]];
            }else{
                var name=arguments[0];
                var value=arguments[1];
                this.each(function(index,ele){
                    ele.style[name]=value;
                })
            }
        }
    });
    
});

6.链式操作

(function(){
    //解决版本冲突
    var _$=window.$;
    var _jQuery=window.jQuery;
    //暴露外部使用的接口
    var jQuery=window.jQuery=window.$=function(selector){
        return new jQuery.fn.init(selector);
    };
    //处理原型对象
    jQuery.fn=jQuery.prototype={
        init:function(selector){
            var elements=document.getElementsByTagName(selector);
            Array.prototype.push.apply(this.elements);
            return this;
        },
        jQuery:'1.0.0',
        length:0,
        size:function(){
            return this.length;
        }
    };
    jQuery.fn.init.prototype=jQuery.fn;
    //实现继承 并且只处理只有一个参数，也就是参数的扩展
    jQuery.extend=function.fn.extend=function(){
        var o=arguments[0];
        for (var p in o) {
            this[p]=o[p];
        }
    };
    //添加静态方法
    jQuery.extend({
        trim:function(text){
            return (text || '').replace(/^\s+|\s+$/g,'');
        },
        noConflict:function(){
            window.$=_$;
            window.jQuery=_jQuery;
            return jQuery;
        }
    });
    //添加实例方法
    jQuery.fn.extend({
        get:function(num){
            return this[num];
        },
        each:function(fn){
            for (var i=0;i<this.length;i++) {
                fn(i,this[i]);
            }
            return this;
        },
        css:function(){
            var l=arguments.length;
            if(l==1){
                return this[0].style[arguments[0]];
            }else{
                var name=arguments[0];
                var value=arguments[1];
                this.each(function(index,ele){
                    ele.style[name]=value;
                })
            }
            return this;
        }
    });
    
});

7.后续学习

 * 1.面向对象JavaScript
 * 2.jQuery1.2.6源码
 * 3.常用的JavaScript的设计模式
 * 4.高性能JavaScript
 * 5.js权威指南

转载于:https://www.cnblogs.com/zhnaglei/p/8629982.html