Nå som vi har sett på å bruke jQuery-plugins, er det absolutt verdt å forstå hvordan man også bygger dem. Vi har allerede kort berørt det faktum at du kan utvide det opprinnelige jQuery-objektet hvis du vil. Akkurat som:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Men det er ikke spesielt nyttig i seg selv. For å lage en ny metode for jQuery som du kan ringe på et sett med elementer, må du gjøre det slik:
$.fn.myMethod = function() ( // I'm a new method ));Dette er nøyaktig det samme som å bruke .prototype på jQuery, og for nysgjerrige kan du lese mer om det her. Å gjøre det på den måten betyr at vi kan bruke den nye metoden på et sett med elementer. Som:
$("li").myMethod();Du kan gjøre hva du vil ved siden av denne metoden, men for å være en god jQuery plugin-bygningsborger, bør du returnere det samme settet med elementer tilbake fra pluginet.
$.fn.myMethod = function() ( // Do some stuff return this; ));På den måten vil det fungere med kjetting. Hvis du ikke gjør det, og noen prøvde noe sånt som:
$ (“Li”). MyMethod (). Show ();
Det ville mislykkes, fordi .show()det egentlig ikke ble kalt noe. Ofte er jQuery-plugins utformet for å løkke over hvert element slik at du har direkte tilgang til hvert enkelt element i settet for å gjøre som du trenger.
En annen god statsborger ting å gjøre er å pakke inn et plugin i et umiddelbart påkalt funksjonsuttrykk og sende inn jQuery som en parameter til det. På den måten kan du bruke $ inne i plugin-koden din tryggere. Det er fordi i noen situasjoner er $ shorthand for jQuery utilgjengelig (f.eks. Har en bruker brukt jQuery i "kompatibilitetsmodus").
Med begge de to siste tingene på plass blir en plugin-struktur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)I screencast endte vi opp med å bygge et enkelt plugin for å legge til en pil på slutten av ethvert element.
Se Pen rwasH av Chris Coyier (@chriscoyier) på CodePen
Selvfølgelig kan det bli mer komplekst ettersom ambisjonen din om å gjøre mer øker.