每日學習心得：$.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(){});

 

好了，今天就總結到這裏了，主要都是一些跟寫插件相關的經常使用的方法，但願能給你們一些幫助。