Sad kad smo pogledali korištenje dodataka jQuery, apsolutno vrijedi razumjeti kako ih i graditi. Već smo se kratko dotaknuli činjenice da možete proširiti izvorni objekt jQuery ako želite. Baš kao:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();Ali to samo po sebi nije posebno korisno. Da biste stvorili novu metodu za jQuery koju možete pozivati na skupu elemenata, morat ćete to učiniti ovako:
$.fn.myMethod = function() ( // I'm a new method ));To je potpuno ista stvar kao i korištenje .prototype na jQueryju, a za znatiželjnike, više o tome možete pročitati ovdje. Čineći to na taj način znači da ćemo tu novu metodu moći koristiti na nizu elemenata. Kao:
$("li").myMethod();U toj metodi možete raditi što god želite, ali da biste bili dobar građanin gradnje dodatka za jQuery, trebali biste vratiti isti skup elemenata iz dodatka.
$.fn.myMethod = function() ( // Do some stuff return this; ));Na taj način to će funkcionirati s ulančavanjem. Ako to ne učinite, a netko je probao nešto poput:
$ ("Li"). MyMethod (). Show ();
To bi propalo, jer .show()se u osnovi ne bi ni na što pozivalo. Često su dodaci jQuery oblikovani da vrte petlju preko svakog elementa tako da imate izravan pristup svakom pojedinom elementu u skupu da biste učinili kako trebate.
Još jedna dobra stvar koju treba učiniti jest zamotati dodatak u izraz s neposrednim pozivom i predati jQuery kao parametar. Na taj način možete sigurnije koristiti $ unutar vašeg koda dodatka. To je zato što u nekim situacijama $ kratica za jQuery nije dostupna (npr. Korisnik je koristio jQuery u "načinu kompatibilnosti").
S obje posljednje dvije stvari na mjestu, struktura dodatka postaje:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)U screencast-u smo na kraju izgradili jednostavan dodatak za dodavanje strelice na kraj bilo kojeg elementa.
Pogledajte Pen rwasH Chrisa Coyiera (@chriscoyier) na CodePenu
Naravno, može postati složenije kako vaša ambicija učiniti više raste.