jQuery.extend 函數詳解(轉載)

標籤：des   style   blog   http   color   io   os   使用   java   

轉載自http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

JQuery的extend擴充方法：      

Jquery的擴充方法extend是我們在寫外掛程式的過程中常用的方法，該方法有一些重載原型，在此，我們一起去瞭解瞭解。      

一、Jquery的擴充方法原型是:　　　

extend(dest,src1,src2,src3...);

它的含義是將src1,src2,src3...合并到dest中,傳回值為合并後的dest,由此可以看出該方法合并後，是修改了dest的結構的。如果想要得到合并的結果卻又不想修改dest的結構，可以如下使用：

var newSrc=$.extend({},src1,src2,src3...)//也就是將"{}"作為dest參數。

這樣就可以將src1,src2,src3...進行合并，然後將合并結果返回給newSrc了。如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那麼合并後的結果

result={name:"Jerry",age:21,sex:"Boy"}

也就是說後面的參數如果和前面的參數存在相同的名稱，那麼後面的會覆蓋前面的參數值。

二、省略dest參數       

上述的extend方法原型中的dest參數是可以省略的，如果省略了，則該方法就只能有一個src參數，而且是將該src合并到調用extend方法的對象中去，如：  　　

1、$.extend(src)  　　

該方法就是將src合并到jquery的全域對象中去，如：

$.extend({ hello:function(){alert(‘hello‘);} });

就是將hello方法合并到jquery的全域對象中。  　　

2、$.fn.extend(src)  　　

該方法將src合并到jquery的執行個體對象中去，如:

$.fn.extend({ hello:function(){alert(‘hello‘);} });

就是將hello方法合并到jquery的執行個體對象中。

下面例舉幾個常用的擴充執行個體：

$.extend({net:{}});

 這是在jquery全域對象中擴充一個net命名空間。

$.extend($.net,{ hello:function(){alert(‘hello‘);} })

這是將hello方法擴充到之前擴充的Jquery的net命名空間中去。

三、Jquery的extend方法還有一個重載原型：  

extend(boolean,dest,src1,src2,src3...)

第一個參數boolean代表是否進行深度拷貝，其餘參數和前面介紹的一致，什麼叫深層拷貝，我們看一個例子：

var result=$.extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );

我們可以看出src1中嵌套子物件location:{city:"Boston"},src2中也嵌套子物件location:{state:"MA"},第一個深度拷貝參數為true，那麼合并後的結果就是： 

result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}

 也就是說它會將src中的嵌套子物件也進行合并，而如果第一個參數boolean為false，我們看看合并的結果是什麼，如下：

var result=$.extend( false, {}, { name: "John", location:{city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );

那麼合并後的結果就是:

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

 以上就是$.extend()在項目中經常會使用到的一些細節。

=========================

jquery的extend和fn.extend

jQuery為開發外掛程式提拱了兩個方法，分別是：

jQuery.fn.extend(object);

jQuery.extend(object);

 

jQuery.extend(object); 為擴充jQuery類本身.為類添加新的方法。

jQuery.fn.extend(object);給jQuery對象添加方法。

 

fn 是什麼東西呢。查看jQuery代碼，就不難發現。

 

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {//....　

　　　//......

};

 

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。

雖然 javascript　沒有明確的類的概念，但是用類來理解它，會更方便。

jQuery便是一個封裝得非常好的類，比如我們用 語句　$("#btn1") 會產生一個 jQuery類的執行個體。

 

jQuery.extend(object);　為jQuery類添加添加類方法，可以理解為添加靜態方法。如：

 

$.extend({

　　add:function(a,b){return a+b;}

});

 

便為　jQuery　添加一個為 add　的　“靜態方法”，之後便可以在引入 jQuery　的地方，使用這個方法了，

$.add(3,4);  //return 7

 

jQuery.fn.extend(object); 對jQuery.prototype進得擴充，就是為jQuery類添加“成員函數”。jQuery類的執行個體可以使用這個“成員函數”。

比如我們要開發一個外掛程式，做一個特殊的編輯框，當它被點擊時，便alert 當前編輯框裡的內容。可以這麼做：

Java代碼 

1. $.fn.extend({    
2.    alertWhileClick:function(){    
3.        $(this).click(function(){    
4.             alert($(this).val());    
5.         });    
6.     }    
7. });    
8.     
9. $("#input1").alertWhileClick(); //頁面上為：<input id="input1" type="text"/>   

$("#input1")　為一個jQuery執行個體，當它調用成員方法 alertWhileClick後，便實現了擴充，每次被點擊時它會先彈出目前編輯裡的內容。

jQuery.extend 函數詳解(轉載)