Sad kad razumijemo osnove razvoja dodataka, možemo malo dublje kopati. Budući da je u konačnici dodatak funkcija, on nam pruža opseg koji trebamo organizirati. Sjećate se kada smo uredili kuću kad smo učili o predlošcima? Neke od tih istih koncepata možemo koristiti u dodatku.
Ali prvo, mislim da arhitektura dodatka jQuery može imati koristi od nekog uzorka koda. Možda vam je poznat HTML5 Boilerplate koji nudi hrpu pametnih zadanih postavki. Uzorak jQuery dodatka ista je stvar. Sprema malo tipkanja i usmjerava vas na put pametnog razvoja.
Naišao sam na projekt doslovno nazvan jQuery Boilerplate za koji bih pretpostavio da je dobar. Ali u to nisam puno kopao. Umjesto toga, sviđa mi se Starter Douga Neinera. Navedite ime, neke zadane postavke i neke izbore i to će generirati tu strukturu uzorka za vas.
Odlučili smo napraviti klizač pod nazivom lodgeSlider s jednostavnim parametrom brzine i završiti s ovim kodom:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Mnogo toga bi trebalo izgledati poznato. Postoji IIFE koji omota dodatak radi sigurnosti. Postoji funkcija kreirana iz objekta jQuery. Odmah se poziva funkcija init. Postoji metoda kreirana iz objekta jQuery koja vraća jQuery objekt. Postoje varijable stvorene reference predmemoriranja koje ćemo vjerojatno ponovno koristiti. Uglavnom stvari koje smo već vidjeli.
Možda dvije nove stvari. Jedan je objekt mogućnosti tamo. Možete vidjeti tvrdo kodiranu vrijednost 300. Ali pogledajte i crtu s $.extend(). To je jQuery funkcija za kombiniranje dvaju objekata u jedan s jednim koji ima prednost nad drugim. Kad nazovemo dodatak, možda ovako:
$("#slider-1").lodgeslider();Ne prosljeđujemo opcije, a taj se prazni objekt kombinira s našim teško kodiranim objektom, a zadane vrijednosti dostupne su unutar dodatka. Ali mogli bismo to nazvati i ovako:
$("#slider-1").lodgeslider(( speed: 500 ));Tamo prenosimo objekt kao parametar. Taj se objekt kombinira s našim teško kodiranim objektom, ima prednost i vrijednost koju smo proslijedili postaje vrijednost dostupna u dodatku. Baš super.
Druga je nova stvar ona čudna .data(). Stvorili smo osnovnu varijablu koja upućuje na samu funkciju koja se iznova stvara za svaki element na koji se dodatak poziva. Na primjer, recimo da smo dodatak uključili $(".slider")- na stranici mogu biti dva elementa s imenom klase slider. Svaka petlja se izvodi i izrađuju se dva primjerka funkcije lodgeSlider. U svakom dodamo referencu na njega samom elementu. Na taj način možemo pozvati interne metode dodataka iz bilo koje reference tog elementa.
Kao možda:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Baš nam daje lijep način da koristimo metode dodataka ako je potrebno.
Nismo strahovito daleko stigli u ovoj avanturi izrade dodataka:
Pogledajte olovku kako gradi klizač od ogrebotina Chrisa Coyiera (@chriscoyier) na CodePenu
Iskreno, svijetu vjerojatno nije potreban još jedan dodatak za klizač. Ali, vidite koliko su složeni mogli postati. Evo samo nekoliko ideja:
- Mogu postojati funkcije povratnog poziva (ili prilagođeni događaji) prije i nakon promjene slajda, nakon postavljanja klizača, nakon što se sruši itd.
- Širine se mogu zasnivati na postocima i preračunavati kada se promijeni prozor preglednika.
- Navigacija se može dinamički graditi, umjesto da bude potrebna u označavanju.
- ID-ovi i #hash hrefs također se mogu dinamički kreirati.
- Dodirni događaji poput prevlačenja mogu se dodati kako bi klizač postao dodirniji (male točkice nisu dodirne).
Što više tih stvari radite, veća je veličina dodatka. Zbog toga je uspostavljanje ravnoteže između značajki, praktičnosti, izvedbe i veličine toliko nezgodno i gdje postoji toliko različitih dodataka koji u konačnici čine isto.