jQuery源码分析随笔

一次在写jquery插件的经历，让自己发现了js水很深，自己很菜。然后慢慢发现js包括了原型、闭包、作用域等一些很常用的知识点。

 

首先jquery源码的主要结构

下面就是在做分析jquery源码时自己的一些备注

(function(window){
    var jQuery = function(select){
        //privatefunc();
        return new jQuery.fn.init(select);
        //这边必须new一个对象（这时this指向init对象），不然return jQuery.fn.init(select);中this指向jQuery.fn，而jQuery.fn其实是个定义了很多方法的集合
    }
    
    jQuery.test = function(){//静态方法
        console.log('call test method');
    }
    
    var privatefunc = function (){//内部方法，不能再 外面调用,需要让外部调用及jquery的做法：window.privatefunc = privatefunc;这也是闭包
        console.log(this)
        console.log('call privatefunc method');
    }

    jQuery.fn = jQuery.prototype = {
        init:function(select){
            console.log(this)
            var _this = this;
            if(!select){
                return this;
            }
            _this.ele = document.documentElement.querySelectorAll(select);
            _this.length = _this.ele.length;
            return _this;
        },
        show: function(){
            if(this.length===0){
                return;
            }
            for(var i=0;i<this.length;i++){
                this.ele[i].style.display = 'block';
            }
            console.log('call show method')
            return this;
        },
        hide: function(){
            if(this.length===0){
                return;
            }
            for(var i=0;i<this.length;i++){
                this.ele[i].style.display = 'none';
            }
            console.log('call hide method')
            return this;
        },
        click: function(){
            console.log('call click method')
            return this;
        },
        each: function(fn){
            for(var i=0;i<this.length;i++){
                fn.call(this.ele[i], i, this.ele[i])
            }
        },
        morefunc: function(){
            
        }
        
    }
    
    jQuery.fn.init.prototype = jQuery.fn;
    
    window.jQuery = jQuery; //将jQuery赋值给window.jQuery，全局变量。这样外部就可以直接访问jQuery函数了
    
})(window,undefined)

下面我从自己一开始比较疑惑的几个点进行分析

1、jQuery 到底是什么?

　 通常$('div')返回的是new jQuery.fn.init( selector, context )这个对象，也就是init这个函数对象，这里面会查询div标签的dom对象数组、length还有jquery的实例方法。

　　

 

2、jQuery.fn和jQuery的区别？

　　jQuery.fn是个方法的集合，通过jQuery.fn.init.prototype = jQuery.fn，这样jQuery.fn.init就包含了jQuery的所有实例方法，jQuery.fn也就是jQuery的所有实例方法。

      jQuery.fn.init.prototype==jQuery.prototype==jQuery.fn

 

3、jQuery为什么要调用jQuery.fn.init来实例化？

　　jQuery的初始化可以$('div')、new $('div')。为了能通过$('div')方便的进行初始化，就需要在构造方法中返回new jQuery.fn.init(select)来巧妙的实现他。

　　jQuery.fn.init刚好具备了jquery的所有的实例方法。

　　比如在jQuery构造方法中直接return this或者new jQuery()，很明显这是没办法实现的。

 

4、存在的疑问

　  jQuery.fn这个变量总是让人很绕。如果直接换成jQueryFn不知道可不可以，也许是为了写插件时把jQuery.prototype提供出去吧。

　　jQuery.fn.plugin = plugin;

 

5、总结

　 首先创建一个闭包，在里面申请一个变量jQuery，然后挂载window下，让闭包外的作用域也能进行访问；

　 其次创建一个jquery别名的jquery.fn=jquery.prototype，并将jquery.fn.init.prototype = jquery.fn;
     最后$('.div')的方法返回new jquery.fn.init()的实例。这样这个实例也拥有了jquery.fn的方法。

(function(window, undefined){
var jquery = function(selected, content){
return jquery.fn.init();
}
//方便后续我们初始化jquery对象时$('div')而不用new jQuery('div')来初始化
jquery.fn.init.prototype = jquery.fn;

})(window)