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」 」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>javascript

相關文章
相關標籤/搜索