逐行分析jQuery源码
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
逐⾏分析jQuery源码
注意:本次源码分析选择2.0.3(因为不⽀持IE6、7、8,就少了很多兼容的hack的写法,对了解jQuery的实现原理有很⼤的帮助)
1.jQuery有不同的版本,从
2.x版本便不再⽀持IE6、7、8
将jQuery拆分长框架⼀点⼀点进⾏了解
2.
(function ())();
这个叫匿名函数⾃执⾏
3.匿名函数⾃执⾏的好处是什么呢?
匿名函数⾃执⾏⾥⾯的所有东西都是⼀个局部的。
防⽌和其他的代码冲突。
栗⼦①
(function () {
var a=10;
})();
alert(a);
控制台报错,说a is not defined。
4.如何能够访问到匿名函数⾃执⾏中的⽅法呢?
很多种⽅法(⊙o⊙)哦。
可以把你要对外提供的接⼝作为window的属性或者是⽅法。
栗⼦②
(function () {
var a=10;
function abc(){
alert(a);
}
//将abc⽅法作为window的⽅法,就可以在匿名函数⾃执⾏外⾯进⾏访问了
window.abc=abc;
})();
abc();
但是要对外提供接⼝,我们才能找到使⽤的⽅法和属性
5.在jQuery中,$()是jQuery()的简写⽅式。
6.在jQuery⽂件中第21⾏到第94⾏就是定义了⼀些变量和函数。
其中,60-64⾏是⼀个特别重要的函数,就是平时⽤的$() jQuery()对外的接⼝
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
但是现在这个jQuery还是以局部变量的形式存在,要提供对外的接⼝,才能使⽤。
提供接⼝在第8823-8827⾏
// If there is a window object, that at least has a document property,
// define jQuery and $ identifiers
if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}
7.在第96-283⾏,都是给jQuery对象添加⼀些⽅法和属性。
prototype(原型)是⾯向对象的东西,所以说,jQuery就是⼀个基于⾯向对象的程序,jQuery⾥⾯写的都是跟⾯向对象有关的。
//96⾏
jQuery.fn = jQuery.prototype
8.为什么jQuery是⼀个基于⾯向对象的程序??
栗⼦③
//jQuery是这样调⽤⽅法的对吧。
是不是和下⾯数组使⽤⽅法的⽅式⾮常像。
//但是实际上$("div")他本⾝是⼀个函数调⽤,但是函数调⽤的执⾏结果是⼀个对象,所以,这就是为什么说jQuery是基于⾯向对象的程序喽~~~ $("div").css();
$("div").text();
//这是Array对象⽅法的使⽤⽅式,先实例化⼀个对象,然后使⽤对象调⽤⽅法。
var arr=new Array(3);
arr.sort();
arr.splice();
//61--64
jQuery = function( selector, context ) {
//在这个函数执⾏完了就是⼀个new构造函数的过程,返回的就是⼀个jQuery对象~~既然返回的是对象,当然可以调⽤⽅法喽~~
return new jQuery.fn.init( selector, context, rootjQuery );
}
9.285--347⾏--> extend:是jQuery当中的⼀个继承⽅法,希望后续添加的⽅法都能挂在jQuery对象上,很⽅便扩展
10.
//通过使⽤对象调⽤的⽅法,是实例⽅法。
$().text();
$().html();
//$是⼀个函数,在函数下⾯来扩展⽅法的话,就是扩展⼀些静态⽅法
//在jQuery当中,给⾯向对象扩展静态属性和静态⽅法叫做扩展⼯具⽅法
//⼯具⽅法和实例⽅法区别就在于,它既可以给jQuery对象来⽤,也可以给源⽣的JS来⽤,实例⽅法只能给jQuery对象调⽤
$.trim();
$.proxy();
11.静态⽅法和实例⽅法在jQuery中的关系?
可以把静态⽅法看作是在jQuery中的最底层,⽽实例⽅法是上⼀层或者是更⾼层的。
很多⽅法都是实例⽅法,⾥⾯调⽤的都是⼯具⽅法。
12.877⾏--2856⾏ Sizzle 复杂选择器的实现
13.2880⾏--3042⾏ Callbacks 回调对象 : 函数的统⼀管理。