Zdaj, ko smo si ogledali uporabo vtičnikov jQuery, je popolnoma vredno razumeti, kako jih tudi zgraditi. Na kratko smo se že dotaknili dejstva, da lahko izvorni objekt jQuery razširite, če želite. Tako kot:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();A to samo po sebi ni posebej koristno. Če želite ustvariti novo metodo za jQuery, ki jo lahko pokličete na naboru elementov, morate to storiti tako:
$.fn.myMethod = function() ( // I'm a new method ));To je popolnoma enako kot uporaba .prototype v jQueryju, za radovedneže pa si lahko več o tem preberete tukaj. Če to storite tako, pomeni, da bomo to novo metodo lahko uporabili za nabor elementov. Všeč mi je:
$("li").myMethod();V tej metodi lahko počnete karkoli želite, toda če želite biti dober državljan zgradbe vtičnikov jQuery, morate vrniti enak nabor elementov nazaj iz vtičnika.
$.fn.myMethod = function() ( // Do some stuff return this; ));Tako bo delovalo z veriženjem. Če tega ne storite in je nekdo poskusil nekaj takega:
$ (“Li”). MyMethod (). Show ();
To ne bi uspelo, ker .show()bi bili v bistvu nič pozvani. Pogosto so vtičniki jQuery zasnovani tako, da se zankajo nad vsakim elementom, tako da imate neposreden dostop do vsakega posameznega elementa v naboru, da lahko naredi, kot je treba.
Še ena dobra stvar, ki jo morate storiti, je, da vtičnik zavijete v izraz takoj priklicane funkcije in mu v parameter prenesete jQuery. Tako lahko varneje uporabljate $ znotraj kode vtičnika. To je zato, ker v nekaterih primerih okrajšava $ za jQuery ni na voljo (npr. Uporabnik je jQuery uporabil v "načinu združljivosti").
Z obema zadnjima dvema stvaroma na mestu postane struktura vtičnika:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)V predvajanju zaslona smo na koncu zgradili preprost vtičnik, s katerim na koncu katerega koli elementa dodamo puščico.
Oglejte si Pen rwasH Chrisa Coyierja (@chriscoyier) na CodePen
Seveda lahko postane bolj zapleteno, ko se vaša ambicija, da naredite več, poveča.