jQuery框架代码解析

jQuery是一款优秀的js框架。它应用广泛，插件众多。它的框架代码质量也非常优秀。在平时的js编码中也是可以借鉴的。


整体框架

1.整体形式

(function(window,undefined){
       … …
       var jQuery = (function(){
              var jQuery = function(selector,context,rootjQuery){
                     … …
              }
              … …
              rootjQuery = jQuery(document);
              … …
              return jQuery;
	})();
       … …
	window.jQuery = window.$ = jQuery;
})(window);

以上代码是jQuery框架的整体形式,请注意看，它将所有jQuery代码放入匿名函数，这样可防止命名冲突和全局变量的出现。而函数定义后面再带一个括号(function(){…})(),可在函数载入时即执行函数体。将外部window对象传入函数内部，最后扩展window的属性window.jQuery=window.$=jQuery.

2.jQuery实例化

var jQuery = function(selector,context){
	return new jQuery.fn.init(selector,context,rootjQuery);
}

js实例化的过程，简单来讲就是创建一个空的Object,然后继承prototype的属性与方法。接着执行一遍这个function.(此上是我的理解，有误差请指出,理解以上非常重要)

这里jQuery函数实际上返回的是jQuery.fn.init的一个实例。

jQuery.fn = jQuery.prototype = {
        init:function(selector,context,rootjQuery){
               … …
        }
}

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

按我上面的逻辑来走一遍。jQuery函数要返回jQuery.fn.init的实例。jQuery.fn.init实例化时首先创建一个空的Object,然后继承jQuery.fn.init.prototype的属性与方法。而jQuery.fn.init.prototype赋值为jQuery.fn,所以jQuery.fn.init的实例有jQuery.fn的所有属性与方法。再接着执行一遍init方法，完成初始化。

那么看到这里也就能明白，很多地方常讲的扩展jQuery时，不能直接在jQuery上扩展属性。如jQuery.test=function(){}.而要在jQuery.fn上扩展，常见的是jQuery.fn.test=function(){…}。

当然对于静态调用，是可以扩展jQuery本身的。如我们可能会见到这两种形式:$(“#id”)和$.ajax.这两个是截然不同的。$(“#id”)它调用了一个函数，返回的是前面所讲的jQuery.fn.init的一个实例。而$.ajax,是调用的$函数的静态方法ajax。

实际上对于jQuery本身所提供的很多通用方法，它都是提供静态与实例化两种方法。如jQuery.extend=jQuery.fn.extend=function(){… …},还有一些是实例化方法内部直接调用静态方法。如each:function(callback,args){ return jQuery.each(this,callback,args)}

选择器

jQuery最令人称颂的就是它强大的选择器.下面带大家一起来认识吧.

选择器的代码都放在init方法中。

1.空的选择器,包括$(),$(“”),$(null),$(undefined)调用形式。

if (!selector){
        return this;
}

它直接返回一个jQuery对象。

2.Dom元素选择器,例如$(document.getElementById(“id”))

if (selector.nodeType){
        this.context = this[0] = selector;
        this.length =1;
        return this;
}

此时，它会将jQuery对象的context与0属性赋值为dom元素，将length属性赋值为1.以下为一演示此特征的例子：$(document.getElementById("test")).context.innerHTML = "test";

3.body元素选择器.jQuery中对body元素作用作了优化，进行特殊对待

if ( selector === "body" && !context && document.body ) {
                     this.context = document;
                     this[0] = document.body;
                     this.selector = selector;
                     this.length = 1;
                     return this;
       }

代码很简单，以下例子就会使用以上选择器。例如：$("body").css("background-color","#ff0000");

4. 字符串选择器。这个才是选择器里面最重要的。它又分为许多小类。一一道来。

 4.1  html选择器，形如$(“<div>test</div>”)或$(“<div></div>”)。它的selctor返回的是一个dom元素的数组.然后将数组放入jquery对象中。此时将jquery对象当作数组来用。

match= [null, selector,null];
if(match[1]){
         ret = rsingleTag.exec(selector);// rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/
         selector = [ doc.createElement( ret[1] ) ];
}
jQuery.merge( this, selector );

以上我只是将jQuery代码中的一个分支中的片段拿出来了。但原理都是一样的.

4.2 id选择器,用的相当多。如$(“#id”)

match = quickExpr.exec( selector );// quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/
elem = document.getElementById( match[2] );
this.length = 1;
this[0] = elem;
this.context = document;
this.selector = selector;
return this;

jQuery的id选择器也是使用的document.getElementById来获取元素。

还有很多，在这里不写啦，有需要的可以自行下载源码进行解读。欢迎多多评价。