萬盛學電腦網 >> 數據庫 >> 數據庫綜合 >> jQuery工作原理解析
jQuery工作原理解析
這是一篇關於jQuery工作原理解析的文章，下面我們就與大家一起分享。
jQuery的開篇聲明裡有一段非常重要的話:jQuery是為了改變javascript的編碼方式而設計的.
從這段話可以看出jQuery本身並不是UI組件庫或其他的一般AJAX類庫.
jQuery改變javascript編碼方式!
那麼它是如何實現它的聲明的呢?這裡,用以下的一段簡短的使用流程:
1)查找(創建)jQuery對象:$(”selector”);
2)調用jQuery對象的方法完成我們需要完成的工作:$(”selector”).doOurWork();
ok,jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的.這兩個步驟是jQuery的編碼邏輯核心!
要實現這種簡潔編碼方式,創建jQuery對象這一環節至關重要.因此,jQuery的dom元素查找能力相當強悍.此外,jQuery對象的方法肯定是有限的,有限的方法滿足不了日益增長各有所需的要求,所以,必須提供jQuery對象方法的擴展能力.
強悍的dom元素查找能力,以及隨心所欲的方法擴展,這兩點正是jQuery的核心所在!
來一個簡單的示例,來說明jQuery是如何工作的:
< !DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
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),以及插件初始化的”配置”對屬性/事件等設置變得容易理解且十分簡便,如下一個拖拽組件的初始化:
$(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工作原理解析的相關內容，希望對大家可以有所幫助。
