1. 程式人生 > >$.extend()方法和(function($){...})(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(){});

一輩子很短,努力的做好兩件事就好;第一件事是熱愛生活,好好的去愛身邊的人;第二件事是努力學習,在工作中取得不一樣的成績,實現自己的價值,而不是僅僅為了賺錢;

轉載 https://www.cnblogs.com/linjiaxin/p/7363143.html