Nu hvor vi har set på at bruge jQuery-plugins, er det absolut værd at forstå, hvordan man også bygger dem. Vi har allerede kort berørt det faktum, at du kan udvide det oprindelige jQuery-objekt, hvis du vil. Ligesom:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Men det er ikke særlig nyttigt i sig selv. For at oprette en ny metode til jQuery, som du kan kalde på et sæt elementer, skal du gøre det sådan:
$.fn.myMethod = function() ( // I'm a new method ));Dette er nøjagtigt den samme som at bruge .prototype på jQuery, og for nysgerrige kan du læse mere om det her. At gøre det på den måde betyder, at vi er i stand til at bruge den nye metode på et sæt elementer. Synes godt om:
$("li").myMethod();Du kan gøre hvad du vil ved siden af denne metode, men for at være en god jQuery-plugin-opbygningsborger skal du returnere det samme sæt elementer tilbage ud af pluginet.
$.fn.myMethod = function() ( // Do some stuff return this; ));På den måde fungerer det med kæde. Hvis du ikke gør det, og nogen prøvede noget som:
$ (“Li”). MyMethod (). Show ();
Det ville mislykkes, fordi .show()der i det væsentlige ikke blev kaldt på noget. Ofte er jQuery-plugins formet til at løkke over hvert element, så du har direkte adgang til hvert enkelt element i sættet for at gøre, som du har brug for.
En anden god borger ting at gøre er at pakke et plugin ind i en øjeblikkelig påkaldt funktionsudtryk og videregive jQuery som en parameter til det. På den måde kan du bruge $ inde i din plugin-kode mere sikkert. Det skyldes, at $ stenografi for jQuery i nogle situationer ikke er tilgængelig (f.eks. Har en bruger brugt jQuery i "kompatibilitetstilstand").
Med begge de sidste to ting på plads bliver en pluginstruktur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)I screencast sluttede vi med at opbygge et simpelt plugin for at tilføje en pil i slutningen af ethvert element.
Se Pen rwasH af Chris Coyier (@chriscoyier) på CodePen
Selvfølgelig kan det blive mere komplekst, da din ambition om at gøre mere stiger.