$.extend()
因為項目中有些地方看到有用到這個方法,當時也不知道是什么意思,見的多了就想了
解一下。原來這個方法還是挺有用的,多用在編寫插件,當然,它本身也有一些重載原型。也可是實現靜態方法:
$.extend({
sayHello: function (name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //調用
$.sayHello('Wayou'); //帶參調用
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”);