Plug-in understanding $.extend () and $.fn.extend ()

plug-in understanding. $.extend () and $.fn.extend ()
Plug-in development includes two kinds: 1. The class-level plug-in development, i.e. $.extend () extends the jquery object itself; 2. The object-level plug-in development, or $.fn.extend () extends the jquery element set to provide new methods.
1. Class-level plug-in development
1. (function ($) {
$.extend ({
Hello:function () {alert ("Hello World");},
World:function () {Alert (Hello World);}
})
}) (JQuery)
Call: $.hello (), $.world ()
2. Using namespaces
(function ($) {
$.myextend ({
Hello:function () {alert ("Hello World");},
World:function () {Alert (Hello World);}
})
}) (JQuery)
Call: $.myextend.hello (), $.myextend.world ()
2. Object-level plug-in development
1. (function ($) {
$.fn.extend ({
Myanimate:function () {}
})
}) (JQuery)
Called: $ ("#myAnimate"). Myanimate ()
2. (function ($) {
$.fn.myanimate=function () {}
}) (JQuery)
Called: $ ("#myAnimate"). Myanimate ()
There are two uses of 3.$.extend ()
One is the extension method, as shown above.
The other is to merge objects to get a new object, $ ([deep],target,options,defaluts,...),
For example:
var settings={validate:false,limit:5,name: "SM"};
var defaults={validate:true,limit:2}
var settings=$.extend (settings,defaults);
Result: 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);
Results: settings={validate:true,limit:2,name: "SM"};
Deep can be ture or false
var result={true,{},name: "A", Num:3,location:{city: "H", County: "A"},location:{state: "D", County: "CH"}}
Result: 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: Result={name: "A", Num:3,location:{state: "D", County: "CH"}}
4. Anonymous function (the biggest use is to create closures)
For example: (function ($) {}) (jquery) is equivalent to!function () {} (jquery) < This is used in the BOOTSTRP framework >

5. Back to the top example

(function ($) {
$.extend ({
Myscrollup:function (options) {
var defaults={
Scrollname: "Scrollup",
Topdistance: "300",
TOPSPEED:300,
Animation: "Slide",
ANIMATIONINSPEED:200,
ANIMATIONOUTSPEED:200,
Scrolltext: "Back to the top",
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);

Plug-in understanding $.extend () and $.fn.extend ()