浏览 3685 次
锁定老帖子 主题:JQuery小刨-1
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-04-07
最后修改:2010-04-08
最近一段时间,说闲不闲,但对什么都提不起兴趣来,大好的时光就被我这样就着乱七八糟的八卦新闻给吃下去了。 决定看点儿东西,看到全世界都在为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 ); 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-04-11
最后修改:2010-04-11
如果方法的返回值是基本类型时,(new 方法)声明返回的是这个方法的实例。
如果方法的返回值是个object时,(new 方法)声明返回的就是这个方法的返回值。 对我来说是个 新点,学到了 |
|
返回顶楼 | |
发表时间:2010-04-12
(function(window, undefined) {
)(window) 的好处之一是有利于压缩,压缩后,源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符,undefined 也是如此 var jQuery = function() ... ... window.jQuery = jQuery 这种写法也是有利于内部代码组织和最后的代码压缩 jQuery 的代码里有不少“看不见”的优点 |
|
返回顶楼 | |
发表时间:2010-04-12
lifesinger 写道 (function(window, undefined) {
)(window) 的好处之一是有利于压缩,压缩后,源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符,undefined 也是如此 var jQuery = function() ... ... window.jQuery = jQuery 这种写法也是有利于内部代码组织和最后的代码压缩 jQuery 的代码里有不少“看不见”的优点 呵呵,我不知道你怎么得到的这个观点,我觉得即使不用匿名调用方式,只要是方法调用都可以实现这种压缩。 |
|
返回顶楼 | |
发表时间:2010-04-12
普通写法里,window 压缩后还是 window, undefined 还是 undefined
上面的写法,window 和 undefined 可以压缩成 w, u |
|
返回顶楼 | |
发表时间:2010-04-12
weiqingfei 写道 lifesinger 写道 (function(window, undefined) {
)(window) 的好处之一是有利于压缩,压缩后,源码里除了上面的第二个 window, 其它 window 都能被替换成一个字符,undefined 也是如此 var jQuery = function() ... ... window.jQuery = jQuery 这种写法也是有利于内部代码组织和最后的代码压缩 jQuery 的代码里有不少“看不见”的优点 呵呵,我不知道你怎么得到的这个观点,我觉得即使不用匿名调用方式,只要是方法调用都可以实现这种压缩。 局部变量才可以这样压缩的 |
|
返回顶楼 | |
发表时间:2010-04-12
lifesinger 写道 普通写法里,window 压缩后还是 window, undefined 还是 undefined
上面的写法,window 和 undefined 可以压缩成 w, u 呵呵,我明白你的意思了,不过我总觉得这不是什么重要原因, 压缩完全可以用 var w = window; 的方式。 |
|
返回顶楼 | |
发表时间: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,现在用参数传进去不需要改旧代码。我觉得还有一个原因是方便运行部分代码,有利于单元测试。 |
|
返回顶楼 | |
发表时间: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.方法必须且只会执行一次,使用匿名方法定义调用更加简洁。 |
|
返回顶楼 | |
发表时间:2010-06-18
楼主写的很细节,很有代表性
|
|
返回顶楼 | |