每日學習心得：$.extend()方法和(function($){...})(jQuery)詳解

2014-02-09前言：

    節後頭兩天上班，主要是調整工作狀態。項目也不是很緊，趁著周末把年前遇到了一些關於JS和JQuery的一些問題給總結一下。主要是介紹JQuery的extend方法和（function($){}）(jQuery)，也會涉及一些相關的知識。

1.    JS中substring與substr的區別

之前在項目中用到substring方法，因為C#中也有字串的截取方法Substring方法，當時也沒有多想就誤以為這兩種方法的使用時一樣的。這樣就直接按照在C#中使用Substring的方式，直接在js中用了substring，在實際的項目中，有時候能得到正確的結果，但是有時候得到的結果卻讓人匪夷所思，後來仔細的調試跟蹤之後才發現，原來是Js中substring的方法跟C#中的Substring方法不一樣。關於C# 中的字串截取方法已經很簡單了，這裡就不再敘述了。主要講一個js中的substring方法，順便再講一下substr方法。

Substring：

該方法可以有一個參數也可以有兩個參數。

l  一個參數：

樣本： var str=“Olive”；

               str.substring(3);

        結果：“ve”

        說明：當substring只有一個參數時，參數表示從字串的第幾位開始截取，

直截取到字串結尾。

l  兩個參數：

        樣本：var str=“Olive”；

1)       Str.substring(3,4);

2)       Str.substring(3,2);

           結果：1) “v”  2) 0

           說明：當substring有兩個參數時，第一個參數表示從字串的第幾位開始截取，第二個參數表示截取到字串的第幾位。這點是個C#中字元截取不同的一點，所以才會導致不同的結果。

Substr：

該方法也可以有一個或兩個參數。

l  一個參數：

    說明：substr一個參數時，作用跟substring方法一個參數時一樣。

l  兩個參數：

    樣本：var str=“Olive”；

1)       Str.substr(3,2);

2)       Str.substr(3,4);

        結果：1) “ve” 2) “ve”

        說明：substr有兩個參數時，第一個參數表示從字串的第幾位開始截取，第二個參數表示截取多少位字串。這點跟C#中字元截取相同的，所以在以後的使用中，如果想要避免出現截取的問題最好還是使用substr。

2 $.extend()

因為項目中有些地方看到有用到這個方法，當時也不知道是什麼意思，見的多了就想了

解一下。原來這個方法還是挺有用的，多用在編寫外掛程式，當然，它本身也有一些重載原型。

2.1 extend(result,item1,item2…..)

這裡這個方法主要用來合并，將所有的參數項都合并result中，並返回result，但是這

樣就會破壞result的結構。

2.2 extend({},item1,item2,……)

用這個方法，可以將所得的結果全部合并在{}中，並返回，而且還不會破壞原有的項的結構。

樣本：

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

結果：

Result={name:”Momo”,age:23,sex:”gril”};

說明：

以上的結果表明extend方法將所有的項都合并到了{}中，但是，細心一點就會發現，其中item1中的name：“Momo” 將item中的name：“olive”給覆蓋了，這是怎麼回事？請接著往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法還有帶bool型參數的重載。

bool型參數為true表示深拷貝，為false時表示淺拷貝。具體可以通過一下樣本來說明：

樣本：

var item={name：“olive”,age:23,address{provice:”河南”,city:”鄭州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

結果：

Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

說明：

以上結果說明，當參數為ture時，即為深拷貝，當子項item1中的子項有與item中的子項相同屬性的值不一樣時，item1中子項的值會將item子項中的值給覆蓋，當子項item1的屬性跟item中的屬性不同時，會與item進行合并。

當參數為false時，子項item1中的子項中與item中的子項屬性相同時，item1中子項的屬性值會將item中的值給完全覆蓋。

2.4 $.extend(item)

該方法是將item合并到Jquery的全域對象中去，相當於為Jquery全域對象添加了一個

靜態方法（對應這裡的靜態方法，當然還有執行個體方法，在後邊有介紹）。

     樣本：

           $.extend({SayHello:function(value){alert(“hello “+value);}});

           這樣寫過之後，就可以直接調用SayHello方法：

           $.SayHello(“Olive”);

     說明：該方法相當於為Jquery類添加了新的方法。

2.5 $.fn.extend(item)

上邊提到的$.extend(item)說是為Jquery類添加了靜態方法，那麼這裡的$.fn.extend(item

)就是為每一個執行個體添加一個執行個體方法了。

     樣本：

         $.fn.extend({hello:function(value){alert(“hello “+value);}});

         這樣寫過之後，在擷取每一個樣本之後，都可以調用該方法：

         $(“#id”).hello(“Olive”);

 

3.（function($){….}）（jQuery）

初次看到這種寫法時，一頭霧水，不知所云。在網上尋找了一些資料之後才有點明白。

我們先看第一個括弧裡邊的內容：function($){….}，這不就是一個匿名的函數嗎？但是它的形參比較奇怪，是$,這裡主要是為了不與其它的庫衝突。

這樣我們就比較容易理解第一個括弧內的內容就是定義了一個匿名函數，我們在調用函數的時候，都是函數名後邊加上括弧以及實參，但是由於操作符的優先順序我們定義的匿名函數也需要用（）括起來。

現在我想大家已經很清楚這句話是什麼意思了吧。第一個括弧表示定義了一個匿名函數，然後第二個函數表示為該函數傳遞的參數，整個結合起來意思就是，定義了一個匿名函數，然後又調用該函數，該函數的實參為jQuery。

相當於：function fun($){…};fun(jQuery);

這種方法多用於存放開發的外掛程式，執行其中的代碼時，Dom對象並不一定載入完畢。於此相反的是$(function(){})，這種方法在使用時頁面的Dom對象已經載入完畢了。事實上該方法的全寫是：$(document).ready(function(){});

 

好了，今天就總結到這裡了，主要都是一些跟寫外掛程式相關的常用的方法，希望能給大家一些協助。