jquery 外掛程式開發及extend

標籤：class   code   http   java   tar   ext   

  以下資訊是在看了IBM上的一篇文章（使用 jQuery（中級），第 2 部分: 建立自己的外掛程式）http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/?ca=drs-tp4608之後，自己的一些想法。

    這文章主要是從如何寫一個外掛程式上來說，中間主要用到的還是在jQuery.fn上做文章，通過定義一個閉包函數，將jQuery作為參數傳遞過去，再在這個fn增加自己的函數來實現。中間有幾個問題，記錄如下：

    1，為什麼往fn上加函數就可以讓jquery對象調用了呢？

看了下代碼，注意到這句（jQuery.fn = jQuery.prototype），這句其實很明白了，jQuery.fn實際上就是jQuery.prototype，通過原型來實現一個函數的添加。而在fn上追加的函數上使用this,這個this實際上就是jQuery對象。因為fn就是prototype,調用函數者就是jQuery實現上就是jQuery的一個執行個體化對象。

 

    看了下文章中關於外掛程式開發的，具體代碼倒是其次，主要是其中有幾個要點很重要。複製如下：

    1，讓內部方法私人化，這其實就是說在自己寫的外掛程式裡面，因為這個函數可能就自己的外掛程式調用，這其實也是為了避免代碼汙染。在jquery中有很多例子的。

    2，讓預設值可覆蓋，這就是說在程式中可能會有一些預設值。所以需要在傳遞參數中，傳遞一些可以覆蓋預設參數的東西，比如參數中經常傳遞options這個參數，其實就是拿來覆蓋預設參數的。

 

    還有幾個外掛程式開發規則，複製如下：

    1，檔案命名為 “jquery.<your plug-in name>.js”，這個沒什麼說的。

    2，所有新方法都附加到 jQuery.fn 對象，所有新功能都附加到 jQuery 對象，這個其實就是往對象上加函數。外掛程式寫法就是jQuery.fn.plugin=function(options)的這種樣子。

    3，“this” 用於引用 jQuery 對象。這個如果按照第條規則，this肯定引用到jQuery的。

    4，外掛程式中定義的所有方法/函數的末尾都必須帶有一個 “;”（分號），否則將不利於代碼的最小化。這個不清楚了。

    5，除有特別註明外，所有方法都必須返回 jQuery 對象，其實就是返回this。這個主要是為了鏈式編程吧，jQuery中到處都是這種。

    6，總是在外掛程式代碼中使用 “jQuery” 而不是 “$”。這個不是強制的，比如中我寫的閉包就可以這樣寫：(function($))(jQuery)的這種格式，然後在裡面使用$，這裡的$其實就是jQuery，這個是參數傳遞上的東西。

 

   最後就是裡面經常用到的extend函數了。簡單看了下，整個函數很簡單，就是一個複製過程，但在jQuery中經常用到，比如ajax就是通過extend帶到jquery中的。

    這裡面有個問題，我們使用ajax都是通過$.ajax這種形式訪問的，這就表明ajax其實不算是jquery對象的一個方法，最多算一個靜態方法。這就實際上說明，extend是往一個對象上追加資訊，而$.ajax是往$這個類對象上加，而不是jqury執行個體對象站加，所以就不能用類似$().ajax的形式來進行ajax訪問了，後者返回的是一個undefined資訊。在方法內部，實際上就是一個this引用的問題了。

    還是將jquery自己的代碼貼出來，在上面加註釋資訊。

 

Js代碼  

1. jQuery.extend = jQuery.fn.extend = function() {  
2.     //target就是複製目的是哪個對象，這裡首先就是第一個參數。  
3.     //i表示source的起始座標。0被target佔用，所以源是目的的下一個  
4.     //length,當前參數長度了;deep,是否深度copy,深度copy就是將裡面的對象再次序列化,進行迭代調用  
5.     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;  
6.   
7.     //處理第一個函數是boolean的情況,就是說第一個函數可以控制是否深度copy,那這樣的話接下來的參數就是往後移位了.  
8.     //jquery中很多地方都是這種處理情況,往往參數列表中有個參數缺失,那麼不需要用null來佔位,而是直接將後面的參數移到前面來,這樣就有一個處理參數移位的問題.  
9.     //在這個裡面,第一個參數被佔位,那麼target就為1位了,源再+1往後走了.  
10.     if ( typeof target === "boolean" ) {  
11.         deep = target;  
12.         target = arguments[1] || {};  
13.         // skip the boolean and the target  
14.         i = 2;  
15.     }  
16.   
17.     //處理這個目的不是object對象,且又不是函數的,這樣的話,實際target可能就是其他東西,比如字串或者基本類型等,這時就將target進行改變.實際上就是忽略target的原來資訊.可以理解成一個用source來代替target.  
18.     if ( typeof target !== "object" && !jQuery.isFunction(target) )  
19.         target = {};  
20.   
21.     //如果length==i,其實就是沒有source的情況,那麼將將target變成source,原先的target就直接用調用者this代替了.這樣的話,其實就是直接往調用者上加東西.  
22.     //這個用$.ajax來理解,最適合了.原始碼中jQuery.extend({ajax:function()});的形式,其實就是直接往$上加函數,因為調用者就是jQuery  
23.     if ( length == i ) {  
24.         target = this;  
25.         --i;  
26.     }  
27.     //進行迴圈,將source(可能有很多個source,按順序進行copy),也就是說可以這樣寫$.extend(target,source1,source2);  
28.     //這樣後面的資訊可以覆蓋前面的資訊,而source1可以是函數內建的一個預設資訊,source2可以對資訊變更.  
29.     for ( ; i < length; i++ )  
30.         // Only deal with non-null/undefined values  
31.         if ( (options = arguments[ i ]) != null )  
32.             // Extend the base object  
33.             for ( var name in options ) {  
34.                 //這裡就對兩邊進行取資訊了,src表示從target中取的資訊(這個可能是null,當然也可能不是,不是的話,那麼後面的copy就可能要覆蓋這個值了)  
35.                 //copy就是從source中取的資訊了.  
36.                 var src = target[ name ], copy = options[ name ];  
37.   
38.                 // Prevent never-ending loop  
39.                 //這裡主要是為了防止在深度copy的情況下,出現無限迭代的情況.比如這種情況:extend(true,target,{"a":target}),這樣的話,就會出現無限copy了  
40.                 if ( target === copy )  
41.                     continue;  
42.   
43.                 // //這裡就是處理深度copy了,如果需要,就進行深度copy,將copy後的值加到target中  
44.                 if ( deep && copy && typeof copy === "object" && !copy.nodeType )  
45.                     target[ name ] = jQuery.extend( deep,   
46.                         // Never move original objects, clone them  
47.                         src || ( copy.length != null ? [ ] : { } )  
48.                     , copy );  
49.   
50.                 // 不加undefined值  
51.                 else if ( copy !== undefined )  
52.                     target[ name ] = copy;  
53.   
54.             }  
55.   
56.     // 返回target  
57.     return target;  
58. };  

     翻譯都是按照自己的理解來翻譯的，可能不對。

    

     在看了這個東西，感覺在其他程式中（我做java,java中很多這種）也有很多類似的設定，需要進行類似迭代處理，比較直觀的就是java中java對象轉json的處理了，都一樣要對一個對象json化成一個string，中間仍要處理各種類型的資訊，還要避免無限迭代等。

 

     以上都是整個jquery中大資訊中的小小的一部分。瞭解一些，總比過後忘了好。