溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery擴展函數是什么，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
上次分析了jquery的源碼，分享了jquery的核心框架架構，這一次我們拋開源碼，只關注功能，來看一下jquery的擴展函數的使用到底有何神奇之處。
為了看起來方便，我將所有的講解都附在了代碼中，這樣看起來會更直觀，由于我將多種測試放在一個頁面當中，所以會有很多alert彈出，這里各位在測試的時候，可以將其中的功能分開來放，這樣可以更加直觀的看到效果。
好了，現在就看一下jquery的擴展函數與我的人生吧。
<html>
<head>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
/*
*jquery的extend方法的原版形式，jquery.extend(deep,target,source1,source2......)以及
*jquery.fn.extend(deep,target,source1,source2......)，下面分別演示兩個函數的區別與相同之處。
*參數詳解：
*deep：boolean類型，意為是否要深度拷貝
*target：Object類型，意為要擴展的目標對象
*source1：Object類型，意為被擴展的資源對象
*source2....:與source1相同，理論上可以有無限個
*/
//此處擴展的是$（即jQuery，以后都用$），當只有一個Object類型參數的時候，此方法擴展$。
$.extend(
{
testExtend:function(){
alert('extend success');
}
}
);
//此處擴展的是$()(即jQuery對象，以后都用$()），當只有一個Object類型參數的時候，此方法擴展$()。
$.fn.extend(
{
testFnExtend:function(){
alert('extend fn success');
}
}
);
//此處將成功彈出
$.testExtend();
//此處將報錯，所以我們用try{}catch{}包圍起來看錯誤信息，將提示錯誤。
try{
$("testDiv").testExtend();
}catch(e){
alert(e.toString());
}
//反過來也是一樣，此處將成功彈出
$("testDiv").testFnExtend();
//此處將報錯，所以我們用try{}catch{}包圍起來看錯誤信息，將提示錯誤。
try{
$.testFnExtend();
}catch(e){
alert(e.toString());
}
//下面將演示不擴展$或者$()的情況，即我們設定一個目標對象
var target = {};//目標對象
//此處target將作為目標對象擴展
$.extend(target,
{
testExtend:function(){
alert('extend success');
}
}
);
//擴展成功后，target具有testExtend方法
target.testExtend();
//下面我們看下兩個方法的作用是否相同
var targetFn = {};//目標對象
//此處targetFn將作為目標對象擴展
$.fn.extend(targetFn,
{
testExtend:function(){
alert('extend success');
}
}
);
//targetFn被成功擴展，擴展成功后，targetFn具有testExtend方法，說明指定了target，二者效果相同，用哪個都一樣
targetFn.testExtend();
/*最后我們來看下深度拷貝的含義，深度拷貝用文字來解釋的意思是，當被擴展的屬性如果也是一個對象的時候，那么也會
*將該屬性作為對象來擴展，而不會覆蓋屬性的對象中原有的屬性。
*這個文字解釋略顯蒼白，我們來看一下實際的效果會如何。
*/
//首先我們需要一個對象，這個對象的某一個屬性又是一個對象。
//為了便于理解，這次我們采用現實當中的例子，我將為技術獻身，以下純屬虛構。
var me = {
name:"zuoxiaolong",
sex:"man",
//注意，這里我的女朋友，我的屬性，也是一個對象
girlFriend:{
name:"secret",
sex:"woman"
}
};
//下面首先采用非深度拷貝的方式對我進行擴展，此處不再區分$.extend和$.fn.extend，因為二者在有目標對象的情況下，效果相同
$.extend(me,
{
work:"programmer",//擴展我的工作為程序員
girlFriend:{
work:"rich"//擴展我女朋友的職業為富婆，這是不是若干人群的夢想
}
}
);
//我們來看下非深度拷貝，擴展以后的結果，我的生活會變成什么樣子
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//特別注意我的女朋友被擴展的結果
alert("girlFriend.name:" + me.girlFriend.name);
alert("girlFriend.sex:" + me.girlFriend.sex);
alert("girlFriend.work:" + me.girlFriend.work);
/*
*是不是發現我女朋友的名字和性別都未知了，這是因為在非深度拷貝的情況下，如
*果屬性為對象，將會被擴展的屬性值直接覆蓋掉，也就是原來的屬性name和sex會被直接覆蓋，即name和sex會被work覆蓋
*/
//我當然不能讓我的生活如此悲催，一個連性別都不知道的富婆如何做我的女友，我們來看下神奇的深度拷貝
//這里我們需要重新定義me這個對象，因為之前已經被擴展了，這里要將我的生活重新來過
me = {
name:"zuoxiaolong",
sex:"man",
girlFriend:{
name:"secret",
sex:"woman"
}
};
//注意，增加了第一個參數，deep為true，即深度拷貝
$.extend(true,me,
{
work:"programmer",//依然擴展我的工作為程序員
girlFriend:{
name:"chaolu",//當有相同屬性名的時候會被覆蓋
work:"manager"//當有多出的屬性名的時候會被擴展，擴展我女朋友的職業為經理
}
}
);
//我們來重新查看一下擴展后的對象，看我的生活是否恢復正常
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//特別注意我的女朋友被擴展的結果
alert("girlFriend.name:" + me.girlFriend.name);
alert("girlFriend.sex:" + me.girlFriend.sex);
alert("girlFriend.work:" + me.girlFriend.work);
//我的生活已經恢復正常，一切都完美了
//以上為屬性為對象時的情況，那么當屬性為數組時，則會以數組的下標進行覆蓋和擴展
//文字解釋依舊蒼白，我們來看例子，我將依然獻身給技術
me = {
name:"zuoxiaolong",
sex:"man",
//這里注意，我的好朋友是一個數組
goodFriends:["xubo","xiaochen","xiaoqiang"]
};
//下面我們來看下深度拷貝對數組的影響
//第一個參數為true，深度拷貝
$.extend(true,me,
{
work:"programmer",//依然擴展我的工作為程序員
goodFriends:["shiqiang","andi","liulei"]
}
);
//我的工作將被正常擴展
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//主要關注我的好朋友的變化，這里或許有的人會以為在深度拷貝的情況下，我的好朋友將成為六個人，我們看結果
alert("goodFriends:" + me.goodFriends);
//結果顯示我原來的三個好朋友沒有了，這里解釋下為何在深度拷貝的情況下，會覆蓋我原來的朋友，剛才我已經解釋過
//對數組的深度拷貝會以下標進行判斷，所以說雖然是深度拷貝，但是后面擴展的goodFriends[0]和前面定義的goodFriends[0]，將
//會被認為是同一個屬性名，所以依據同名替換的原理，這里我原來的朋友將會被替換。
//你或許會說，那能不能將六個人都擴展為我的好朋友。答案是否定的，這樣直接擴展，無論如何，前三個位置都將會被擴展的頭三個好朋友覆蓋。
//人生總是不完美的，有了新的好朋友，舊的朋友就容易被遺忘，但是只要你努力，你可以同時擁有，就像下面這樣
me = {
name:"zuoxiaolong",
sex:"man",
//這里注意，我的好朋友是一個數組
goodFriends:["xubo","xiaochen","xiaoqiang"]
};
var newGoodFriends = ["shiqiang","andi","liulei"];
var nowGoodFriends = me.goodFriends.concat(newGoodFriends);//將原來的好朋友與新的好朋友努力連接在一起
//第一個參數取消，非深度拷貝，因為我們已經復制了前三個好朋友，雖然會被覆蓋，但我們已經保存
$.extend(true,me,
{
work:"programmer",//依然擴展我的工作為程序員
goodFriends:nowGoodFriends
}
);
//我的工作將被正常擴展
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//再次關注我的好朋友的變化，我們看結果
alert("goodFriends:" + me.goodFriends);
//總結，人生有得到就有失去，但有些我們可以通過努力留住很多
//從以上結果我們可以看出，當屬性為數組時，如果source屬性中數組的長度大于target目標對象屬性中數組的長度，那么無論是否深度拷貝，
//都將徹底覆蓋原有的數組元素，那么如果source屬性中數組的長度小于target目標對象屬性中數組的長度，是否深度拷貝是否會影響結果呢。
//答案是肯定的，當出現上述情況時，如果非深度拷貝，將直接覆蓋原有屬性的數組，如果為深度拷貝，則會留下原有數組多出的元素。
//下面看示例，依舊恢復我的生活
me = {
name:"zuoxiaolong",
sex:"man",
//這里注意，我的好朋友是一個數組
goodFriends:["xubo","xiaochen","xiaoqiang"]
};
//注意，此處為非深度拷貝，這時將覆蓋原有數組
$.extend(me,
{
work:"programmer",//依然擴展我的工作為程序員
goodFriends:["shiqiang","andi"]//此處注意，這里將要擴展的數組長度小于原來的長度
}
);
//我的工作將被正常擴展
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//再次關注我的好朋友的變化，我們看結果，是否會將原有的好朋友全部覆蓋
alert("goodFriends:" + me.goodFriends);
//結果顯示，非深度拷貝，將直接覆蓋原有的數組，我的好朋友開始減少，我們來看深度拷貝會出現什么情況
//依舊恢復我的生活
me = {
name:"zuoxiaolong",
sex:"man",
//這里注意，我的好朋友是一個數組
goodFriends:["xubo","xiaochen","xiaoqiang"]
};
//注意，此處添加深度拷貝deep為true，這時將覆蓋原有數組的相同部分，多余部分保存
$.extend(true,me,
{
work:"programmer",//依然擴展我的工作為程序員
goodFriends:["shiqiang","andi"]
}
);
//我的工作將被正常擴展
alert("name:" + me.name);
alert("sex:" + me.sex);
alert("work:" + me.work);
//再次關注我的好朋友的變化，我們看結果，是否會留下多余的部分的好朋友，也就是這位叫"xiaoqiang"的朋友
alert("goodFriends:" + me.goodFriends);
//從結果中看到，前兩個好朋友被后面的擴展所替代，但是在深度拷貝下，最后的第三個好朋友將會被留存
//從這里我們看出，當source屬性中數組的長度小于target屬性中數組的長度時，是否深度拷貝則會影響結果，反之則不會影響。
</script>
</head>
<body>
<h3 id="testDiv">jquery extend test</h3>
</body>
</html>jquery將我的人生顛覆好幾次，我們總要來一下人生的總結，下面我們來整體的看一下這兩個擴展函數：
1.當第一個參數為boolean類型時，將指示是否深度拷貝。
2.當參數中只有一個Objec類型的時候，$.extend擴展的是$，$.fn.extend擴展的是$()。
3.當參數中有兩個或兩個以上的Object類型的時候，第一個Object類型的參數將作為target被擴展，而后面所有的Object類型的參數的屬性都將被添加到target當中。
總結下深度拷貝：
1.當出現屬性為對象時，如果選擇深度拷貝，則會覆蓋同名的屬性，擴展多出的屬性。否則，則直接覆蓋整個對象。
2.當出現屬性為數組時，如果選擇深度拷貝，則會覆蓋同索引的屬性，如果有多出的屬性，則保留。否則，則直接覆蓋整個數組。
看完上述內容，你們掌握jquery擴展函數是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
