jQuery 是一个 JavaScript 库,对JavaScript进行了很好的封装,极大地简化了 JavaScript 编程。jQuery中用到了JavaScript的很多经典思想,对jQuery源码的学习,也能进一步加深对JavaScript的理解。本次学习主要参照 jQuery 2.0.3.js 版本。
自执行匿名函数
jQuery 2.0.3.js 文档总共有8829行,我们可以发现除了开头的几行注释,所有关于jQuery的代码都包括在一个匿名自执行函数中,也就是下面这个函数:
(function( window, undefined ) {
//其他代码
})( window );
为什么要这么写呢?我们先看一个简单的例子:
(function(window,undefined){
var a = 10;
console.log(a); // 10
})(window);
console.log(a); //a is not defined
上述程序中第一个为输出为10,第二个a会报错,提示没有定义。这是因为函数内部变量和方法在函数外部不能访问到,因此把jQuery的所有代码都放在一个函数中,这样的好处把内部的变量和方法函数变成局部的,而不与外部其他的变量和函数冲突。
那么外部如果需要调用到jQuery内部的变量和方法该如何调用呢?常用的在函数外部想调用函数内部的变量和方法就是将函数内部的变量和方法挂载到window对象上,同样是上面那个例子,我们将其改成如下:
(function(window,undefined){
var a = 10;
console.log(a); // 10
window.a = a;
})(window);
console.log(a); // 10
这样就能访问到函数内部的变量a了。同样,jQuery中就是使用的这个思想,在文档61行定义了一个jQuery函数,如下:
我们平时使用时调用jQuery或者是$符号访问的就是这个函数,这里需要注意的上述函数返回的是一个对象。要访问到这个函数,按照上面的方法,就是将该方法挂到window对象下,在文档的第8826行就是执行这个操作:
这样,我们在外部就能访问到函数内部的变量和方法了。
函数参数
1、window参数
我们可以发现自执行函数传入了一个window参数,传入window参数的作用主要有以下两点:
访问变量都是从最近的开始查找,当查找不到时才一级一级往上面查找,将window当做参数传进来可以更快的查找到。
把window参数传进来更利于压缩,在压缩的时候,可以用更简单的字母或单词代替window参数。我们查看 jquery-2.0.3.min.js 发现参数window用e代替了,变成如下形式:
(function(e, undefined){
e //表示window
})(window);
这样在函数内部window都用e代替了,有利于压缩。
2、undefined参数
Undefined是window下的一个属性,但是因为在有些浏览器下undefined的是可以被修改的。例如在IE8下面:
var undefined = 10;
alert(undefined); // 10
因此传入undefined的作用就是为了防止外部的对undefined进行修改,这样jQuery内部如果访问undefined的,首先访问到的是传入的undefined参数,而不会访问外部的undefined,所以即使外部对undefined进行了修改,也没有影响。