JQuery小刨-1

没做过web前端，所以完全没有用过JQuery，以前因为兴趣对javascript稍微看过一些，但是不系统，不深入，都是浅尝而止。
最近一段时间，说闲不闲，但对什么都提不起兴趣来，大好的时光就被我这样就着乱七八糟的八卦新闻给吃下去了。
决定看点儿东西，看到全世界都在为JQuery疯狂，就稍微看看它的具体实现。

JQuery是什么，有什么优点儿就不讲了，Google一大堆，说也是贴人家的。
直接上源码（以版本1.4.2为准）。

首先映入我们眼帘的是一个大大的匿名方法调用。

(function( window, undefined ) {
....
})(window);

这段方法初看起来挺奇怪，其实就是定义了一个匿名方法，然后再调用它。
你也可以随便定义一个玩玩

	(function( a, b) {
		alert(a+b);
	})(1,2);

什么时候用这种奇怪的方式？就是当方法须被调用且只会被调用一次的时候。

然后看看匿名方法里的实现，首先是变量jQuery的声明，以及将其输出为全局变量。

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

当你用常用的$方法去调用的时候，实际上是调用了这个匿名方法里的局部方法变量jQuery,它会返回一个jQuery.fn.init方法的实例。

一般情况下，大家使用new去实例化一个方法的时候，实际上把这个方法当做类似于java里的class来用，但是大家可以看到这个jQuery.fn.init方法里面并没有定义可为调用方所用的变量以及方法，而是在最后有个返回（当然，前面也有直接返回this的，这个后面再讲解）

return jQuery.makeArray( selector, this );

这里其实涉及到javascript的一个特性，那就是当你用new 一个方法的形式去创建一个object的时候，所得到的实例取决这个方法的返回值。
如果方法的返回值是基本类型时，（new 方法）声明返回的是这个方法的实例。
如果方法的返回值是个object时，（new 方法）声明返回的就是这个方法的返回值。
测试下面这段代码就可窥一斑。

	function func1(a,b){
		this.a = a;
		this.b = b
		return new Number(a+b);
	}
	var var1 = new func1(1,2);
	alert(var1);
	alert(var1.a);
	alert(var1.b);

	function func2(a,b){
		this.a = a;
		this.b = b;
		return a+b;
	}
	var var2 = new func2(1,2);
	alert(var2);
	alert(var2.a);
	alert(var2.b);

依次输出为

3
undefined
undefined
[object Object]
1
2

后续的分析，我们便可以得知，jQuery.makeArray方法返回的是object，所以往前追溯，使用$方法调用后，得到的是jQuery.fn.init方法的返回值

return jQuery.makeArray( selector, this );

评论

9 楼 freshman008 2010-06-18  

楼主写的很细节，很有代表性

8 楼 weiqingfei 2010-04-13  

luolonghao 写道

weiqingfei 写道

lifesinger 写道

普通写法里，window 压缩后还是 window, undefined 还是 undefined
上面的写法，window 和 undefined 可以压缩成 w, u

呵呵，我明白你的意思了，不过我总觉得这不是什么重要原因，
压缩完全可以用 var w = window; 的方式。

使用var w = window，如果旧代码有很多window.xxx，必须都要修改成w.xxx，因为不能var window = window，现在用参数传进去不需要改旧代码。我觉得还有一个原因是方便运行部分代码，有利于单元测试。

压缩么，本来就是要替换的，在这个问题上，我不想联想太多。
我觉得就是，
1.把所有代码都放在一个方法里，减少全局变量定义，减少与自定义变量冲突，属于包装的一种。
2.方法必须且只会执行一次，使用匿名方法定义调用更加简洁。

7 楼 luolonghao 2010-04-13  

weiqingfei 写道

lifesinger 写道

普通写法里，window 压缩后还是 window, undefined 还是 undefined
上面的写法，window 和 undefined 可以压缩成 w, u

呵呵，我明白你的意思了，不过我总觉得这不是什么重要原因，
压缩完全可以用 var w = window; 的方式。

使用var w = window，如果旧代码有很多window.xxx，必须都要修改成w.xxx，因为不能var window = window，现在用参数传进去不需要改旧代码。我觉得还有一个原因是方便运行部分代码，有利于单元测试。

6 楼 weiqingfei 2010-04-12  

lifesinger 写道

普通写法里，window 压缩后还是 window, undefined 还是 undefined
上面的写法，window 和 undefined 可以压缩成 w, u

呵呵，我明白你的意思了，不过我总觉得这不是什么重要原因，
压缩完全可以用 var w = window; 的方式。

5 楼 luolonghao 2010-04-12  

weiqingfei 写道

lifesinger 写道

(function(window, undefined) {
)(window)

的好处之一是有利于压缩，压缩后，源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符，undefined 也是如此

var jQuery = function() ...
...
window.jQuery = jQuery
这种写法也是有利于内部代码组织和最后的代码压缩

jQuery 的代码里有不少“看不见”的优点

呵呵，我不知道你怎么得到的这个观点，我觉得即使不用匿名调用方式，只要是方法调用都可以实现这种压缩。

局部变量才可以这样压缩的

4 楼 lifesinger 2010-04-12  

普通写法里，window 压缩后还是 window, undefined 还是 undefined
上面的写法，window 和 undefined 可以压缩成 w, u

3 楼 weiqingfei 2010-04-12  

lifesinger 写道

(function(window, undefined) {
)(window)

的好处之一是有利于压缩，压缩后，源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符，undefined 也是如此

var jQuery = function() ...
...
window.jQuery = jQuery
这种写法也是有利于内部代码组织和最后的代码压缩

jQuery 的代码里有不少“看不见”的优点

呵呵，我不知道你怎么得到的这个观点，我觉得即使不用匿名调用方式，只要是方法调用都可以实现这种压缩。

2 楼 lifesinger 2010-04-12  

(function(window, undefined) {
)(window)

的好处之一是有利于压缩，压缩后，源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符，undefined 也是如此

var jQuery = function() ...
...
window.jQuery = jQuery
这种写法也是有利于内部代码组织和最后的代码压缩

jQuery 的代码里有不少“看不见”的优点

1 楼 caiceclb 2010-04-11  

如果方法的返回值是基本类型时，（new 方法）声明返回的是这个方法的实例。
如果方法的返回值是个object时，（new 方法）声明返回的就是这个方法的返回值。

对我来说是个 新点，学到了