插件的理解。$.extend()與$.fn.extend()
插件開發包括兩種:1.類級別的插件開發,即$.extend()擴展jquery對象本身;2.對象級別的插件開發,即$.fn.extend()擴展jquery元素集來提供新的方法。
1.類級別的插件開發
1.(function($){
$.extend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)
調用:$.hello(),$.world()
2.採用命名空間
(function($){
$.myExtend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)
調用:$.myExtend.hello(),$.myExtend.world()
2.對象級別的插件開發
1.(function($){
$.fn.extend({
myAnimate:function(){}
})
})(jQuery)
調用:$("#myAnimate").myAnimate()
2.(function($){
$.fn.myAnimate=function(){}
})(jQuery)
調用:$("#myAnimate").myAnimate()
3.$.extend()有兩種用法
一種是擴展方法,如上述所示。
另一種是合併對象獲得一個新的對象,$([deep],target,options,defaluts,...),
例如:
var settings={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(settings,defaults);
結果:settings={validate:true,limit:2,name:"sm"}
var empty={};
var options={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(empty,options,defaults);
結果:settings={validate:true,limit:2,name:"sm"};
deep可以爲ture或false
var result={true,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}
結果:result={name:"a",num:3,location:{city:"H",state:"D",county:"CH"}}
var result={false,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}
結果:result={name:"a",num:3,location:{state:"D",county:"CH"}}
4.匿名函數(最大的用途是創建閉包)
例如:(function($){})(jQuery)等價於!function(){}(jQuery)<這個用在bootstrp框架中>
js插件 $.extend()與$.fn.extend() 基礎
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.