Nu när vi har tittat på att använda jQuery-plugins är det absolut värt att förstå hur man bygger dem också. Vi har redan kort berört det faktum att du kan utöka det ursprungliga jQuery-objektet om du vill. Precis som:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Men det är inte särskilt användbart i sig. För att skapa en ny metod för jQuery som du kan anropa en uppsättning element måste du göra så här:
$.fn.myMethod = function() ( // I'm a new method ));Detta är exakt samma sak som att använda .prototype på jQuery, och för nyfikna kan du läsa mer om det här. Att göra det på det sättet betyder att vi kan använda den nya metoden på en uppsättning element. Tycka om:
$("li").myMethod();Du kan göra vad du vill förutom den metoden, men för att vara en bra jQuery plugin-byggnadsmedborgare bör du returnera samma uppsättning element tillbaka från plugin.
$.fn.myMethod = function() ( // Do some stuff return this; ));På så sätt fungerar det med kedjning. Om du inte gör det och någon försökte något som:
$ (“Li”). MyMethod (). Visa ();
Det skulle misslyckas, eftersom .show()det i princip inte skulle krävas något. Ofta är jQuery-plugins utformade för att slinga över varje element så att du har direkt tillgång till varje enskilt element i uppsättningen för att göra som du behöver.
En annan bra medborgare att göra är att sätta in ett plugin i ett omedelbart anropat funktionsuttryck och skicka in jQuery som en parameter till det. På så sätt kan du använda $ inuti din plugin-kod säkrare. Det beror på att i vissa situationer är $ stenografi för jQuery inte tillgänglig (t.ex. har en användare använt jQuery i "kompatibilitetsläge").
Med båda de två sista sakerna på plats blir en plugin-struktur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)I screencast slutade vi med att bygga ett enkelt plugin för att lägga till en pil i slutet av något element.
Se pennan rwasH av Chris Coyier (@chriscoyier) på CodePen
Naturligtvis kan det bli mer komplext eftersom din ambition att göra mer går upp.