快捷導(dǎo)航

通過(guò)jQuery源碼學(xué)習(xí)javascript(一)

更新時(shí)間：2012年12月27日 15:44:55 作者：

最近在做日志統(tǒng)計(jì)程序，發(fā)現(xiàn)對(duì)方的程序是在Jquery基礎(chǔ)上進(jìn)行開(kāi)發(fā)的，而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼，故決定研究Jquery源碼，模擬它的方法

Jquery這么普及，必有它過(guò)人之處，通過(guò)開(kāi)源代碼進(jìn)行學(xué)習(xí)，是個(gè)不錯(cuò)的學(xué)習(xí)方法?。?

以下是我模擬的方法，我盡量簡(jiǎn)化方法。

定義對(duì)象C(類(lèi)似于jquery的$方法)——這個(gè)也是jquery設(shè)計(jì)非常巧妙的地方

復(fù)制代碼代碼如下:

 
(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 
cQuery.fn = cQuery.prototype = { 
init : function () { 
　　　　　　　　 console.log(this); 
return this; 
}, 
test : function () { 
console.log('test'); 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery = cQuery; 
})(); 

C().test(); 

輸出結(jié)果

代碼分析

1、把cQuery注冊(cè)到window屬性中，當(dāng)成全局變量使用。用Ｃ做為簡(jiǎn)易名稱(chēng)。

window.C = window.cQuery = cQuery;

2、
cQuery.fn.init.prototype = cQuery.fn;
　　拿圖說(shuō)話（打印當(dāng)前對(duì)象cQuery）：

去掉該句截圖?！　?

填上此句截圖：

難點(diǎn)分析：原型傳遞
　　init的原型只是當(dāng)前的函數(shù)。　

　　用cQuery.fn.init.prototype = cQuery.fn;覆蓋init構(gòu)造器的原型對(duì)象，從而實(shí)現(xiàn)跨域訪問(wèn)。
評(píng)估：
　　這是一招妙棋，new cQuery.fn.init()創(chuàng)建的新對(duì)象擁有init構(gòu)造器的prototype原型對(duì)象的方法，通過(guò)改變prototype指針的指向，使其指向cQuery類(lèi)的prototype?！@樣創(chuàng)建出來(lái)的對(duì)象就繼承了cQuery.fn原型對(duì)象定義的方法。
　　3、用一個(gè)var定義變量，函數(shù)。Jquery源碼里用了79行定義了一連串的變量（在開(kāi)頭部分）。

each方法

復(fù)制代碼代碼如下:

 
(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 
cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
}, 
each : function(obj, callback) { // each 方法 
var name, length = obj.length; 
for (name in obj) { 
if (callback.call(obj[name], name, obj[name]) === false) { 
break; 
} 
} 
}, 
isWindow : function(obj) { 
return obj != null && obj == obj.window; 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery =cQuery; 
})(); 

C().each({ Height : 'height', Width : 'width'}, function(name, type){ console.log(this, name, type); }); 

輸出結(jié)果

難點(diǎn)分析：callback.call(obj[name], name, obj[name])
callback是function(name, type){ console.log(this, name,type);}這個(gè)方法
第一個(gè)obj[name]是"height“或"width"字符串，是callback函數(shù)里的this。
name,第二個(gè)obj[name]是傳給callback的參數(shù)。

isWindow()方法

在上面代碼的基礎(chǔ)上，進(jìn)行編寫(xiě)：

復(fù)制代碼代碼如下:

 
isWindow : function(obj) { 
return obj != null && obj == obj.window; 
} 

調(diào)用：

復(fù)制代碼代碼如下:

 
console.log(cquery.isWindow(window)); 
console.log(cquery.isWindow(document)); 

輸出結(jié)果

window對(duì)象有一個(gè)特殊的屬性window，等價(jià)于 self 屬性，它包含了對(duì)窗口自身的引用。通過(guò)這個(gè)屬性判斷是否是window對(duì)象!

總結(jié)

　　我也是剛開(kāi)始研究?？赡苡行┑胤秸f(shuō)的不是很清楚，如果有人能給我補(bǔ)充，那再好不過(guò)了。
　　時(shí)間不早了，下回再接著研究。

您可能感興趣的文章: