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

　 5.回到顶部的例子

(function($){
    $.extend({
        myScrollUp:function(options){
            var defaults={
                    scrollName:"scrollUp",
                    topDistance:"300",
                    topSpeed:300,
                    animation:"slide",
                    animationInSpeed:200,
                    animationOutSpeed:200,
                    scrollText:"回到顶部",
                    activeOverlay:false
                }
            var defaults=$.extend(defaults,options);
            var sn="#"+defaults.scrollName,
                td=defaults.topDistance,
                ts=defaults.topSpeed,
                an=defaults.animation,
                is=defaults.animationInSpeed,
                os=defaults.animationOutSpeed,
                st=defaults.scrollText,
                ao=defaults.activeOverlay;
            $("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body");
            $(sn).css({"position":"fixed","display":"none","z-index":"123456789"});
            if(ao)
            {
                $("body").append("<div id=‘"+defaults.scrollName+"-active‘></div>");
                $(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"})
            }
            $(window).scroll(function(){
                if(an==="fade")
                    $($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os));
                else if(an==="slide")
                    $($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os));
                else
                    $($(window).scrollTop()>td?$(sn).show():$(sn).hide());
            });
            $(sn).click(function(event){
                $("html, body").animate({scrollTop:0},ts);
                return false
            })
        }
    })
})(jQuery);

插件的理解$.extend()与$.fn.extend()

标签：

原文地址：http://www.cnblogs.com/ricesm/p/5046142.html