jQuery源码解析1(Utilities)

使用jquery两年多了,  我最早是使用的是prototype库，后来使用mootools， 直到后来弟弟推荐我使用jquery(他是个UI设计师)，就一直用到现在。 我是被它的简洁和精炼所吸引的。

#F;QM,t.n%P0 

我喜欢看源代码，以前开发eclipse rcp时，就喜欢看eclipse的源码，因为有时候API文档并不那么明了，eclipse优秀的架构配合JDT强大的功能，让我们很容易地看懂。 一个设计优秀的产品，它的代码应该也是易于理解的。 现在我做web用的是php的ci，在开发过程中也是时常查看它的源代码。

G`&H8D"cO2`I2|6n0 pcMing工作室N5Y5zjO(uk

为了更好地使用jquery, 所以我阅读了jquery的源代码。不敢独享，所以写出来，相互讨论，一起进步。pcMing工作室3^\'}@pk3~'B

T-f"?8tT^ Zg7_*f0我使用的是 1.3.2pcMing工作室X#X4f$t$F7e QHnN

J%[$C(V m9r0 pcMing工作室(E)Sh(a1l!}

/Ub)~4Plb}0我们从开始的地方开始：pcMing工作室I4J{*a'o

(function() {
 ...	
})();

 pcMing工作室9Iq6{ W@.B(y'h

所有代码包含在以上的函数中，避免名字冲突。

N/X.E"o
T4V0 

1. 几个"全局变量"

gH,H RTvh1h7C']%q0 pcMing工作室p;^[.?S0Ye(V

var 
	window = this,
	undefined, 
	_jQuery = window.jQuery, 
	_$ = window.$,

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

	// A simple way to check for HTML strings or ID strings
	quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
	// Is it a simple selector
	isSimple = /^.[^:#\[\.,]*$/;

Sj%E1zfi|+d0 

1.1pcMing工作室1Gbp7}C,Qw],e

 pcMing工作室F0TSnXgRj

 window还是那个window,undefined还是那个undefined，只是这样让js 解释器更快地找到他们，提高速度。pcMing工作室U&r.nye _ad_

 pcMing工作室&|/hTR#Ye

R'dU(e.f1a;`0 _jQuery= window.jQuery

6z9]F;QY"S Bz*b)c0_$= window.$,

s!?+CZ0F}*j5X:|G0 

保存原来的 jQuery 和 $, 因为默认情况下jquery占用名字空间 jQuery 和$pcMing工作室*e/`#gufb5h:|

w-p$k$YKC Y#|S/Cc0 

`I~?9or
b0搜索一下使用 _jQuery的地方吧：

P }e7V{t0 

9wv@MrD0 pcMing工作室~s\:rdd~

jQuery.extend({
	noConflict: function( deep ) {
		window.$ = _$;

		if ( deep )
			window.jQuery = _jQuery;

		return jQuery;
	},

OK， 是为了noConflict。pcMing工作室fz)Q6J6a1T2Pl!})s

bY0?6UJCQ
d0 pcMing工作室0a.k{O#_

比如我们要同时使用prototype和jquery, 可以先让html页面包含 prototype.js 再包含 jquery.js。

 pcMing工作室0~l1ouq+?$KJjL

upa!oC9L-D T?0然后调用  jq = jQuery.noConflict();   接着就可以用jq来使用jQuery框架， $ 就变回 prototype.js 中的方法了。pcMing工作室x\l4t}lO

#]r!]&|*Sq(DL0 pcMing工作室j)ER,cZZ4^N

还有一个deep参数， 可以让另一个jQuery(可能不怎么有名， 但对你的项目有用) 和 现在的jQuery 共存。pcMing工作室c_;{dU9Gh

m"Fcvnr7eYP0 

W_!Usg|3d&Y0quickExpr: 是一个正则表达式， 用于快速匹配一个 html tag 或 id 字符串（如 '#id')

isSimple:也是一个与此同时表达式, 用于匹配一个 selector (css 选择器)pcMing工作室8^k,SOq
g9e-xI @

HM%w_ DT9K0 

1.2

 pcMing工作室VM'b#l+v{F

C,g6}o,Q ?U8G0 pcMing工作室'{2la(i w6Fj3i

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

 pcMing工作室c*sobz#y6RT&][

我们思考： jQuery.fn.init 是构造函数， 那它的实例方法应该由 : jQuery.fn.init.prototype 指定。

ifJ:wD i?0 

搜索它， 在541行得到以下代码：

#x+]mP2T0^T'N0 

0J3gyLPH;d0 pcMing工作室;v4yC;gr8z

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

 pcMing工作室P!p J7|.\%uGA

` ie8hr%P0所以 我们平常使用 $('#abc') 或 jQuery('#abc') 

]Igqa0E0 pcMing工作室l{cR!ch){#d

7y{
@ XP9TO`0$ 就是 jQuery，它返回一个对象。这个对象的构造函数是 jQuery.fn.init(...pcMing工作室7L+x*U(JiWdX

这个对象的实例方法和字段就是 jQuery.fn 的成员。

,t"O-JC&vO6~D0 pcMing工作室)B.iU*pwx
Ye

jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) {
	...
	},
	size: function() {
		return this.length;
	},
        ...

WF*Zs5DQg%DxT,L0 pcMing工作室`#^"l mM_-R\yH

从以上可以看出，下面的代码等效。pcMing工作室x0h+AH_3E%JJf

var a = $('#id'); // a = new jQuery('#id');

a.size();pcMing工作室fsl6szH#Qw

7Pp)[r!H0上面我们隐约看到了jQuery的插件结构， 你可以添加方法到 jQuery.fn，就可以在jQuery对象中使用。

_~.d3{!w$[0 pcMing工作室#Z1_j#_I6?d\g

但首先，我们先看几个通用工具方法，因为其他很多部分使用它们。pcMing工作室.@w9\9\Kk0W`i

i`5Sy
cTm/\0