jQuery 源碼分析筆記
更新時(shí)間:2011年05月25日 20:18:35 作者:
jQuery 最新版本1.6.1的時(shí)間戳2011年5月12日。開(kāi)發(fā)未壓縮版本229KB,共8937行代碼。
jQuery的宗旨是Write Less, Do More。它對(duì)JavaScript的開(kāi)發(fā)風(fēng)格侵入性不如YUI那么強(qiáng),當(dāng)然也不如Dojo和YUI如此龐大。它極大的簡(jiǎn)化了JavaScript的日常開(kāi)發(fā)工作,主要是DOM元素的操作(從名字Query就可以看出)。另外一個(gè)主要工作就是每個(gè)前端開(kāi)發(fā)者都需要面對(duì)的瀏覽器兼容性。jQuery兼容所有主流瀏覽器的大部分版本,從萬(wàn)惡的IE6開(kāi)始直到Firefox,Chrome等現(xiàn)代瀏覽器。除了居于核心的一小部分代碼之外,剩下的jQuery都是松散的函數(shù),擴(kuò)展性很強(qiáng)。http://plugins.jquery.com上有成千上萬(wàn)的jQuery插件,你需要的功能幾乎都有對(duì)應(yīng)的jQuery插件,而且不止一個(gè)。
jQuery代碼的頭部是License聲明。采用了GPLv2和MIT雙協(xié)議。而在jQuery聲明下是另一個(gè)項(xiàng)目的聲明:Sizzle。這是jQuery作者另外的一個(gè)開(kāi)源項(xiàng)目,在MIT、BSD和GPL下發(fā)布。它是一個(gè)獨(dú)立的selector實(shí)現(xiàn)(pure-JavaScript CSS selector engine),可以獨(dú)立使用。它的壓縮版本只有3KB多一點(diǎn),號(hào)稱效率最高的選擇器實(shí)現(xiàn)。jQuery從1.3開(kāi)始使用Sizzle代替了原來(lái)的selector實(shí)現(xiàn)。
JS代碼中有大量的()和{},這里使用的是Vim閱讀,因?yàn)?命令可以快速的找到匹配的括號(hào)。
代碼總體結(jié)構(gòu)和變量
jQuery的代碼整體上就是一個(gè)匿名函數(shù)調(diào)用:
(function (window, undefined) {
// ...
})(window);
這是為了避免污染全局對(duì)象,同時(shí)也可以方便的管理執(zhí)行上下文。這個(gè)技巧在JS代碼中經(jīng)常見(jiàn)到,在jQuery代碼中也很常見(jiàn)。比如,在jQuery和其他JS庫(kù)同時(shí)使用時(shí),$符號(hào)可能已經(jīng)被使用了。為了仍然使用$符號(hào):
(function ($) {
// $("...")... 照常使用$
})(jQuery);
在這里傳入真正的jQuery對(duì)象。
下面進(jìn)入真正的實(shí)現(xiàn)部分,首先是$,也就是jQuery對(duì)象的聲明,其中最基本的兩個(gè)成員也列出來(lái)了:
var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的初始化函數(shù)
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 一大堆變量聲明
// fn是主要的函數(shù)實(shí)現(xiàn)點(diǎn),也是jQuery插件的起點(diǎn)。實(shí)際上就是JS原型
jQuery.fn = jQuery.prototype = {
};
// 一個(gè)擴(kuò)展對(duì)象用的函數(shù),可以動(dòng)態(tài)地往對(duì)象上加成員。以后往jQuery里面加成員都是用extend函數(shù)完成的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();
jQuery對(duì)象是核心對(duì)象,所有$(...)得到的都是jQuery對(duì)象,除了少部分直接實(shí)現(xiàn)在jQuery下的Utility函數(shù)之外,大部分函數(shù)都是用extend方法加到j(luò)Query對(duì)象里的。
jQuery代碼的頭部是License聲明。采用了GPLv2和MIT雙協(xié)議。而在jQuery聲明下是另一個(gè)項(xiàng)目的聲明:Sizzle。這是jQuery作者另外的一個(gè)開(kāi)源項(xiàng)目,在MIT、BSD和GPL下發(fā)布。它是一個(gè)獨(dú)立的selector實(shí)現(xiàn)(pure-JavaScript CSS selector engine),可以獨(dú)立使用。它的壓縮版本只有3KB多一點(diǎn),號(hào)稱效率最高的選擇器實(shí)現(xiàn)。jQuery從1.3開(kāi)始使用Sizzle代替了原來(lái)的selector實(shí)現(xiàn)。
JS代碼中有大量的()和{},這里使用的是Vim閱讀,因?yàn)?命令可以快速的找到匹配的括號(hào)。
代碼總體結(jié)構(gòu)和變量
jQuery的代碼整體上就是一個(gè)匿名函數(shù)調(diào)用:
復(fù)制代碼 代碼如下:
(function (window, undefined) {
// ...
})(window);
這是為了避免污染全局對(duì)象,同時(shí)也可以方便的管理執(zhí)行上下文。這個(gè)技巧在JS代碼中經(jīng)常見(jiàn)到,在jQuery代碼中也很常見(jiàn)。比如,在jQuery和其他JS庫(kù)同時(shí)使用時(shí),$符號(hào)可能已經(jīng)被使用了。為了仍然使用$符號(hào):
復(fù)制代碼 代碼如下:
(function ($) {
// $("...")... 照常使用$
})(jQuery);
在這里傳入真正的jQuery對(duì)象。
下面進(jìn)入真正的實(shí)現(xiàn)部分,首先是$,也就是jQuery對(duì)象的聲明,其中最基本的兩個(gè)成員也列出來(lái)了:
復(fù)制代碼 代碼如下:
var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的初始化函數(shù)
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 一大堆變量聲明
// fn是主要的函數(shù)實(shí)現(xiàn)點(diǎn),也是jQuery插件的起點(diǎn)。實(shí)際上就是JS原型
jQuery.fn = jQuery.prototype = {
};
// 一個(gè)擴(kuò)展對(duì)象用的函數(shù),可以動(dòng)態(tài)地往對(duì)象上加成員。以后往jQuery里面加成員都是用extend函數(shù)完成的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();
jQuery對(duì)象是核心對(duì)象,所有$(...)得到的都是jQuery對(duì)象,除了少部分直接實(shí)現(xiàn)在jQuery下的Utility函數(shù)之外,大部分函數(shù)都是用extend方法加到j(luò)Query對(duì)象里的。
相關(guān)文章
PHP錯(cuò)誤Parse error: syntax error, unexpected end of file in te
這篇文章主要介紹了PHP錯(cuò)誤Parse error: syntax error, unexpected end of file in test.php on line 12解決方法,需要的朋友可以參考下2014-06-06
基于PHP實(shí)現(xiàn)解密或加密Cloudflar郵箱保護(hù)
這篇文章主要介紹了基于PHP實(shí)現(xiàn)解密Cloudflar郵箱保護(hù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
php cookie 作用范圍–不要在當(dāng)前頁(yè)面使用你的cookie
這兩天在調(diào)試bug的時(shí)候遇到了一個(gè)問(wèn)題,就是頁(yè)面莫名其妙的會(huì)跳轉(zhuǎn)到登陸頁(yè)面2009-03-03
解析php框架codeigniter中如何使用框架的session
本篇文章是對(duì)php框架codeigniter中如何使用框架的session進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
PHP面向?qū)ο蟪绦蛟O(shè)計(jì)模擬一般面向?qū)ο笳Z(yǔ)言中的方法重載(overload)示例
這篇文章主要介紹了PHP面向?qū)ο蟪绦蛟O(shè)計(jì)模擬一般面向?qū)ο笳Z(yǔ)言中的方法重載(overload),結(jié)合具體實(shí)例形式分析了php模擬一般面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言中方法重載的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-06-06

