jQuery工作原理解析以及原始碼示例
jQuery的開篇聲明裡有一段非常重要的話:jQuery是為了改變javascript的編碼方式而設計的。從這段話可以看出jQuery本身並不是UI元件庫或其他的一般AJAX類庫。jQuery改變javascript編碼方式!
那麼它是如何實現它的宣告的呢?這裡,用以下的一段簡短的使用流程:
1、查詢(建立)jQuery物件:$("selector")
;
2、呼叫jQuery物件的方法完成我們需要完成的工作:$("selector").doOurWork();
好了,jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個步驟是jQuery的編碼邏輯核心!
要實現這種簡潔編碼方式,建立jQuery物件這一環節至關重要。因此,jQuery的dom元素查詢能力相當強悍。此外,jQuery物件的方法肯定是有限的,有限的方法滿足不了日益增長各有所需的要求,所以,必須提供jQuery物件方法的擴充套件能力。
強悍的dom元素查詢能力,以及隨心所欲的方法擴充套件,這兩點正是jQuery的核心所在!
來一個簡單的示例,來說明jQuery是如何工作的:
< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head> <title>無標題頁</title> </head> <body id=”bd”> <a href=”http://www.baidu.com”>baidu</a> </body> </html> <script type=”text/javascript” src=”../Script/jquery.js”></script> <script type=”text/javascript” > $(function(){ $(“a“).click(function(e){//1)查詢$(”a”);2)jQuery物件事件click;3)jQuery物件方法hide $(this).hide(“slow“); return false; }); }); </script>
jQuery中有一個“配置”的思想,這一點使得物件的屬性/事件等設定變得容易理解且十分簡便,如下一個拖拽元件的初始化:
$(document).ready(
function()
{
$(’#drag1′).Draggable({
handle: “ax“, //屬性設定
onStart: function(el,x,y){ //事件監聽器設定
}
});
}
);
可以看到,$("#drag1")
是查詢並建立一個jquery物件,然後呼叫Draggable方法進行拖拽初始化,在此方法呼叫時,傳遞一個“配置”物件,進行拖拽操作的初始化配置。這一“配置”的思想,極大簡化了一些編碼步驟,並相當直觀和易懂。
以下我進行三個問答:
1、問:為什麼$(selector)
之後,返回的是jQuery物件?
答:從jQuery的原始碼中,我們可以知道:var $ = jQuery
。因此當我們$(selector)
操作時,其實就是jQuery(selector)
,建立的是一個jQuery物件。當然正確的寫法應該是這樣的:var jq = new $(selector);
而jQuery使用了一個小技巧在外部避免了new,在jquery方法內部:if ( window == this ) return new jQuery(selector);
2、問:為什麼建立一個jQuery物件之後,我們可以這樣寫$(selector).each(function(index){…});
進行遍歷操作呢?
答:其實jQuery(selector)
方法呼叫時,在jQuery(selector)
方法內部,最後返回的是一個數組:return this.setArray(a);
而each方法體內部是一個for迴圈,在迴圈體內是這樣呼叫的:method.call(this[i],i)
。
3、問:為什麼jQuery能做到jQuery物件屬性/方法/事件的外掛式擴充套件?
答:如果您有一些javasciprt的面向物件方面的知識,就會知道,jQuery.prototype
原型物件上的擴充套件屬性/方法和事件,將會給jQuery的物件“擴充套件”。基於這一點,jQuery是這樣寫的:jQuery.fn = jQuery.prototype
。所以,當我們擴充套件一個外掛功能時,如下:
jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); };
其實就是:
jQuery.prototype.check = function() { return this.each(function() { this.checked = true; }); };
綜上所述,jQuery給我們帶來了一個簡潔方便的編碼模型(1>建立jQuery物件;2>直接使用jQuery物件的屬性/方法/事件),一個強悍的dom元素查詢器($),外掛式程式設計介面(jQuery.fn),以及外掛初始化的”配置”物件思想.
附:實現自己的jQuery
< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Untitled Page</title>
</head>
<body>
<div id=”d”>divvv</div>
<div id=”fsd”>fdsf</div>
</body>
</html>
<script type=”text/javascript”>
//實現自己的MyQuery框架
var MyQuery = function(selector){
if ( window == this ) return new MyQuery(selector);
//這裡只實現dom型別的簡單查詢,嘿嘿
var doms = document.getElementsByTagName(selector);
var arr = [];
for(var i=0; i<doms .length; i++){
arr.push(doms.item(i));
}
return this.setArray(arr);
}
MyQuery.prototype.setArray = function( arr ) {
this.length = 0;
[].push.apply( this, arr );
return this;
}
MyQuery.fn = MyQuery.prototype;
var $ = MyQuery;
//外掛擴充套件1)each
MyQuery.fn.each = function(method){
for(var i=0,l=this.length; i<l; i++){
method.call(this[i],i);
}
}
//外掛擴充套件2)show
MyQuery.fn.show = function(){
this.each(function(i){
alert(i+“:“+this.id+“:“+this.innerHTML);
});
}
//debugger
$(“div“).show();
</script></doms></script>