jQuery學習手記（二）——源碼解析

今天主要深入學習了一下jQuery，由於自己javascript方面的基礎知識不足，所以直接看其源碼比較吃力，或者說好多地方根本就看不懂，
於是就在網上查閱了部分關於其源碼分析的資料，找到兩份資料感覺不錯。其一是《jQuery工作原理解析以及原始碼示
例》（http://sharryjava.javaeye.com/blog/819203），另一份是從網上下載的《jQuery1.2.6源碼分
析》。由於暫時還未接觸到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對象屬性/方法/事件的外掛程式式擴充，jQuery使用了一種稱為prototype的設計模式。如
果您有一些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),以及外掛程式初始化的”配置”對象思想.

***********************************************************************************************************************************************

       在WEB開發中，我們用到js，主要是完成如下五個方面的事情：

       1、採用getElementById在Dom文檔中找到Dom元素，然後取值或設值。

        2、對元素採用innerHTML取其內容或設定其內容。

        3、對元素進行事件的監聽（如click）

        4、通過改變元素的CSS樣式，達到視覺上的效果。

         5、通過ajax從伺服器取值，往指定元素裡填充內容。

        

從上面可以看出，在使用JS開發就是在對Dom元素在進行操作。這個Dom元素可能是單個或是集合的形式。對元素操作，對於
document,window是可以直接飲用，但對於其他的dom元素，我們得從Dom文檔樹尋找得到吧。這樣我們可以把JS的操作分析兩部分任務：
一、尋找Dom元素；二、對Dom元素進行操作。

       實際上我們可以把jQuery解釋為jQuery實質就是一個查詢器。在查詢器的基礎上提供對尋找到的元素進行操作的功能。這樣說來jQuery就是查詢和操作的統一。查詢是入口，操作是結果。

       

jQuery對象在代碼分成兩部分，一部分是jQuery的靜態方法，也可以稱作實用方法或工具，通過jQuery.xxxx()的jQuery命名空間
直接引用。第二部分是jQuery的執行個體方法，通過jQuery(xx)或$(xx)來產生jQuery執行個體，然後通過這個執行個體來引用的方法。這部分的方
法大多數是從採用靜態方法代理來完成功能。真正的功能性的操作都在jQuery的靜態方法中實現。

        這些功能細分起來 ，可以分成以下幾個部分：

        1、Selector尋找元素。這個尋找不但包含CSS1~CSS3的CSS Selector功能，還包含其對直接引用或間接引用Dom元素而擴充的一些功能。

        2、Dom元素的屬性操作。Dom元素可以看作html的標籤，對於屬性的操作就是對於標籤的屬性進行操作。這個屬性操作包含增加、修改、刪除、取值等。

        3、Dom元素的CSS操作。CSS是控制頁面的顯示的效果。對CSS的操作那就得包含高度、寬度、display等這些常用的CSS的功能。

        4、Ajax的操作。Ajax的功能就是非同步從伺服器取資料然後進行相關操作。

        5、Event的操作。對Event的相容做了統一的處理。

        6、動畫(Fx)的操作。可以看作是CSS樣式上的擴充。

      以上其實都是引自《jQuery1.2.6源碼分析》，因為沒有實際的應用需求，所以對裡面的內容並沒有細看，有需要的可以自己翻看其中的內容。