jQuery插件的理解 $.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);