JQuery小刨-1

本文将带领你深入了解jQuery的实现原理,特别是匿名方法的使用及如何将其作为全局变量引入到你的JavaScript项目中。通过剖析jQuery 1.4.2版本的源码,揭示匿名方法调用的独特之处及其在实际应用中的价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

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

[color=red]什么时候用这种奇怪的方式?就是当方法须被调用且只会被调用一次的时候。[/color]

然后看看匿名方法里的实现,首先是变量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的时候,所得到的实例取决这个方法的返回值。
[color=red]如果方法的返回值是基本类型时,(new 方法)声明返回的是这个方法的实例。
如果方法的返回值是个object时,(new 方法)声明返回的就是这个方法的返回值。[/color]
测试下面这段代码就可窥一斑。

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 );
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值