jQuery 源碼分析筆記
更新時間:2011年05月25日 20:18:35 作者:
jQuery 最新版本1.6.1的時間戳2011年5月12日。開發(fā)未壓縮版本229KB,共8937行代碼。
jQuery的宗旨是Write Less, Do More。它對JavaScript的開發(fā)風(fēng)格侵入性不如YUI那么強,當(dāng)然也不如Dojo和YUI如此龐大。它極大的簡化了JavaScript的日常開發(fā)工作,主要是DOM元素的操作(從名字Query就可以看出)。另外一個主要工作就是每個前端開發(fā)者都需要面對的瀏覽器兼容性。jQuery兼容所有主流瀏覽器的大部分版本,從萬惡的IE6開始直到Firefox,Chrome等現(xiàn)代瀏覽器。除了居于核心的一小部分代碼之外,剩下的jQuery都是松散的函數(shù),擴展性很強。http://plugins.jquery.com上有成千上萬的jQuery插件,你需要的功能幾乎都有對應(yīng)的jQuery插件,而且不止一個。
jQuery代碼的頭部是License聲明。采用了GPLv2和MIT雙協(xié)議。而在jQuery聲明下是另一個項目的聲明:Sizzle。這是jQuery作者另外的一個開源項目,在MIT、BSD和GPL下發(fā)布。它是一個獨立的selector實現(xiàn)(pure-JavaScript CSS selector engine),可以獨立使用。它的壓縮版本只有3KB多一點,號稱效率最高的選擇器實現(xiàn)。jQuery從1.3開始使用Sizzle代替了原來的selector實現(xiàn)。
JS代碼中有大量的()和{},這里使用的是Vim閱讀,因為%命令可以快速的找到匹配的括號。
代碼總體結(jié)構(gòu)和變量
jQuery的代碼整體上就是一個匿名函數(shù)調(diào)用:
(function (window, undefined) {
// ...
})(window);
這是為了避免污染全局對象,同時也可以方便的管理執(zhí)行上下文。這個技巧在JS代碼中經(jīng)常見到,在jQuery代碼中也很常見。比如,在jQuery和其他JS庫同時使用時,$符號可能已經(jīng)被使用了。為了仍然使用$符號:
(function ($) {
// $("...")... 照常使用$
})(jQuery);
在這里傳入真正的jQuery對象。
下面進入真正的實現(xiàn)部分,首先是$,也就是jQuery對象的聲明,其中最基本的兩個成員也列出來了:
var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的初始化函數(shù)
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 一大堆變量聲明
// fn是主要的函數(shù)實現(xiàn)點,也是jQuery插件的起點。實際上就是JS原型
jQuery.fn = jQuery.prototype = {
};
// 一個擴展對象用的函數(shù),可以動態(tài)地往對象上加成員。以后往jQuery里面加成員都是用extend函數(shù)完成的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();
jQuery對象是核心對象,所有$(...)得到的都是jQuery對象,除了少部分直接實現(xiàn)在jQuery下的Utility函數(shù)之外,大部分函數(shù)都是用extend方法加到j(luò)Query對象里的。
jQuery代碼的頭部是License聲明。采用了GPLv2和MIT雙協(xié)議。而在jQuery聲明下是另一個項目的聲明:Sizzle。這是jQuery作者另外的一個開源項目,在MIT、BSD和GPL下發(fā)布。它是一個獨立的selector實現(xiàn)(pure-JavaScript CSS selector engine),可以獨立使用。它的壓縮版本只有3KB多一點,號稱效率最高的選擇器實現(xiàn)。jQuery從1.3開始使用Sizzle代替了原來的selector實現(xiàn)。
JS代碼中有大量的()和{},這里使用的是Vim閱讀,因為%命令可以快速的找到匹配的括號。
代碼總體結(jié)構(gòu)和變量
jQuery的代碼整體上就是一個匿名函數(shù)調(diào)用:
復(fù)制代碼 代碼如下:
(function (window, undefined) {
// ...
})(window);
這是為了避免污染全局對象,同時也可以方便的管理執(zhí)行上下文。這個技巧在JS代碼中經(jīng)常見到,在jQuery代碼中也很常見。比如,在jQuery和其他JS庫同時使用時,$符號可能已經(jīng)被使用了。為了仍然使用$符號:
復(fù)制代碼 代碼如下:
(function ($) {
// $("...")... 照常使用$
})(jQuery);
在這里傳入真正的jQuery對象。
下面進入真正的實現(xiàn)部分,首先是$,也就是jQuery對象的聲明,其中最基本的兩個成員也列出來了:
復(fù)制代碼 代碼如下:
var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的初始化函數(shù)
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 一大堆變量聲明
// fn是主要的函數(shù)實現(xiàn)點,也是jQuery插件的起點。實際上就是JS原型
jQuery.fn = jQuery.prototype = {
};
// 一個擴展對象用的函數(shù),可以動態(tài)地往對象上加成員。以后往jQuery里面加成員都是用extend函數(shù)完成的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();
jQuery對象是核心對象,所有$(...)得到的都是jQuery對象,除了少部分直接實現(xiàn)在jQuery下的Utility函數(shù)之外,大部分函數(shù)都是用extend方法加到j(luò)Query對象里的。
相關(guān)文章
PHP簡單實現(xiàn)多維數(shù)組合并與排序功能示例
這篇文章主要介紹了PHP簡單實現(xiàn)多維數(shù)組合并與排序功能,涉及php數(shù)組合并、排序等相關(guān)操作及array_merge、array_multisort等函數(shù)使用技巧,需要的朋友可以參考下2017-09-09PHP無限分類代碼,支持數(shù)組格式化、直接輸出菜單兩種方式
一朋友寫的PHP無限分類代碼,分享給大家,支持數(shù)組格式化、直接輸出菜單兩種方式2011-05-05php實現(xiàn)將二維關(guān)聯(lián)數(shù)組轉(zhuǎn)換成字符串的方法詳解
這篇文章主要介紹了php實現(xiàn)將二維關(guān)聯(lián)數(shù)組轉(zhuǎn)換成字符串的方法,涉及php數(shù)組遞歸遍歷、轉(zhuǎn)換、去重、拼接等相關(guān)操作技巧,需要的朋友可以參考下2017-07-07PHP流Streams、包裝器wrapper概念與用法實例詳解
這篇文章主要介紹了PHP流Streams、包裝器wrapper概念與用法,結(jié)合實例形式分析了php中流Streams與包裝器wrapper的基本概念及使用方法,需要的朋友可以參考下2017-11-11php實現(xiàn)異步數(shù)據(jù)調(diào)用的方法
這篇文章主要介紹了php實現(xiàn)異步數(shù)據(jù)調(diào)用的方法,分享了4種PHP異步執(zhí)行的常用方式,感興趣的小伙伴們可以參考一下2015-12-12