Acquaintance jQuery source

For in-depth study under jQuery, recently going to look at the source, my heart just started to see this in fact rejected. . . The first impression is good difficult to understand, no way hoe was always going to bite, read a lot of articles analyzing the source blog, of course, is the first to Aaron 's interpretation of the source jQuery series begins with the overall architecture. The introduction is quite detailed, it is recommended to be skeptical - of course the vision to see, not necessarily other people write is right, knock out under the verification is king, comments after this article can also see, it is for everyone the article questioned some places.

After reading this article I actually know half of the state, and later to see a summary of the blog post, presumably on the basis of the summary.

click here

I do not want to repeat the same words at the record, just want to say what I understand the difficult place to find.

First attach Source:

      
      
       
       jQuery = 
       
       function( selector, context ) {
      
      
      
          
       
       return 
       
       new jQuery.fn.init( selector, context, rootjQuery );
      
      
      
      
       
       },
      
      
      
      
       
       jQuery.fn = jQuery.prototype = { 
      
      
      
          
       
       constructor: jQuery,
      
      
      
      
       
           init: function( selector, context, rootjQuery ) {
      
      
      
      
       
               ...
      
      
      
      
       
               return 
       
       this;
      
      
      
      
       
           }
      
      
      
      
       
           ...
      
      
      
      
       
       }
      
      
      
      
       
       jQuery.fn.init.prototype = jQuery.fn;

1. jQueryWhy should returnnew jQuery.fn.init
first time in order for us to call jQuery like this:

1 2	$( '#id').css(); $.ajax();

JQuery is to be seen as a class, on the prototype binding method is equivalent member method, binding method on jQuery tools, static method is equivalent to the class, you will be able to call these methods directly after instantiation.
So how we can return an instance of it, most likely to think that return new jQuery ();
finished there is something wrong is not found, var jQuery = function(selector, context) { return new jQuery();}this method into a cycle of death. The method is then put into a prototype to

      
      
       
       jQuery = 
       
       function( selector, context ) {
      
      
      
          
       
       return jQuery.fn.init();
      
      
      
      
       
       },
      
      
      
      
       
       jQuery.fn = jQuery.prototype = {
      
      
      
      
       
           init: 
       
       function() {
      
      
      
                  
       
       this.name=
       
       'Tom';
      
      
      
                  
       
       return 
       
       this;
      
      
      
      
       
           },
      
      
      
      
       
           anotherName:
       
       'Mike'
      
      
      
      
       
       };
      
      
      
      
       
       console.log(jQuery().anotherName);
       
       //"Mike"
      
      
      
      
       
       console.log(jQuery().name);
       
       //"Tom"

这样返回实例对象是解决了，但是this原本只指向jQuery类的，这里却指向了jQuery.fn;所以需要隔离出作用域出来。故返回的是new jQuery.fn.init();

但是这个时候，jQuery并不能调用jQuery.fn上的方法了。所以才有了这一句：
jQuery.fn.init.prototype = jQuery.fn;将init的原型指向jQuery.fn,也就是用jQuery的原型对象覆盖init的原型对象，因为JQ对象根本就是init函数的实例对象，console.log(jQuery() instanceof jQuery.prototype.init); //true;这样一来，jQuery就能调用jQuery.fn上的属性和方法了。

2.为什么为了避免全局污染的时候要传入第二个参数undefined

在参数列表中给出undefined，但是不传入值，那么就确保了函数内部undefined是自身的值。在ECMAScript5之前undefined都是可写的，也就是undefined可以赋值的。jQuery作者这么做的目的还有防止程序员对undefined进行赋值后使得代码出现了不可预料的bug。

以上就是个人结合各方博客对于初识源码中难点的理解，有不对的请指出，不胜感激~

附上两篇博文的链接：
http://www.cnblogs.com/aaronjs/p/3278578.html

http://www.cnblogs.com/SheilaSun/p/4779895.html

原文:大专栏初识jQuery源码

Acquaintance jQuery source

Guess you like