js插件 $.extend()與$.fn.extend() 基礎


插件的理解。$.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框架中>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章