讀jQuery之一(對象的組成)
至今電腦里還存放著當時的API文檔,發(fā)個圖感嘆下

在這段時間內,我的入門老師是墨墨,其實至今他仍然是我敬仰的同事之一。他的編程造詣很高,相信早已突破了編程語言的限制。在大家都在使用Prototype.js的時候,在jQuery尚未在國內流行的時候,他就已經(jīng)把jQuery引入到項目中了。
言歸正傳吧,目前的jQuery版本已經(jīng)到了1.6.1。從當時的2000行左右膨脹到了9000行。相信不久就會突破1w行。對于一些簡單網(wǎng)頁來說引入一個jQuery已經(jīng)不再那么輕量了。這里的研讀的是1.6.1這個版本,我會邊讀邊寫,最后會寫出一個1000行左右的“迷你jQuery”。
以下是jQuery 1.6.1 代碼片段
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
...
class2type = {};
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector, context, rootjQuery){
}
}
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
初看上去像是在用 原型方式 在寫一個類jQuery(別名$),但實際我們使用時是函數(shù)調用$("#id"),卻不是new $("#id")。
標識符 jQuery是一個function,其內new了一個function init的實例,然后返回。至此我們知道其真正的構造器是jQuery.fn.init。jQuery寫的實在詭異,它把init又掛在了jQuery的prototype上,閱讀起來有些繞人。
jQuery.fn.init.prototype = jQuery.fn; 是關鍵的一句。該句把function jQuery的原型賦值給了function init的原型。當調用$("#id")時返回的對象組成包括兩個部分。
1,由function init中this帶的(如this.context);
2,由function jQuery的prototype帶的(如this.size/this.toArray);
模仿jQuery寫一個
// zchain-0.1.js
function $(selector){
return new $.prototype.init(selector);
}
$.prototype={
init:function(selector){
if(selector === undefined){
this.length = 0;
return this;
}
if(selector.nodeType==1){
this[0] = selector;
}else{
this[0]=document.getElementById(selector);
}
this.length=1;
},
css:function(name,value){
this[0].style[name] = value;
return this;//鏈式調用
},
hide:function(){
var self=this;
setTimeout(function(){
self[0].style.display="none";
},3000);
return this;//鏈式調用
}
}
$.prototype.init.prototype=$.prototype;
簡單起見,這里選擇器只傳html element或元素id(后續(xù)會增強,但不實現(xiàn)全部css selector),this上掛了length屬性,賦值為1。
當我們調用時
var obj = $();
console.dir(obj);
$()實際沒有什么意義,只是為了測試調用后obj的組成。firebug控制臺輸出如下:
length:0;
init:function
attr:function
hide:function
即obj對象是由function init中this及function $.prototype組成的。
再看下$.prototype上的方法,我只添加了css和hide方法,這兩個方法的實現(xiàn)也是極其簡陋的。
<script src="http://files.cnblogs.com/snandy/zchain-0.1.js"></script>
<div id='content'>3 seconds later I will hide.</div>
<script type="text/javascript">
$("content").css("color","red").hide();
</script>
先調用css設置了字體顏色為紅色,3秒后隱藏了。
總結下:
jQuery對象指的是jQuery.prototype.init的實例,簡單的說就是new jQuery.prototype.init。這里jQuery.prototype.init的類型是function,可以看成是一個類。
jQuery對象由以下部分組成:
1,掛在jQuery.prototype.init中的this上的屬性或方法。
2,掛在jQuery.prototype.init.prototype上的屬性或方法。
3,因為把jQuery.prototype賦值給了jQuery.prototype.init.prototype,所以掛在jQuery.prototype上的屬性和方法也是jQuery對象的一部分。
4,通過jQuery.fn.extend({...})方式擴展的屬性或方法(后續(xù)提到)。
/201106/yuanma/zchain.rar
相關文章
jquery+CSS實現(xiàn)的多級豎向展開樹形TRee菜單效果
這篇文章主要介紹了jquery+CSS實現(xiàn)的多級豎向展開樹形TRee菜單效果,通過jquery自定義函數(shù)設置相應參數(shù)實現(xiàn)屬性TRee菜單效果的功能,非常具有實用價值,需要的朋友可以參考下2015-08-08
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
基于Bootstrap和jQuery構建前端分頁工具實例代碼
本文給大家介紹基于Bootstrap和jQuery構建前端分頁工具實例代碼,包括前端分頁的優(yōu)缺點和解決辦法,對jquery bootstrap分頁知識感興趣的朋友一起通過本文學習吧2016-11-11
jQuery實現(xiàn)表格的數(shù)據(jù)拖拽
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格的數(shù)據(jù)拖拽,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02
jQuery動態(tài)添加可拖動元素完整實例(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加可拖動元素的方法,可實現(xiàn)簡單的點擊添加元素,并且添加的元素可進行拖動操作.涉及jQuery響應鼠標事件動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2016-06-06

