Teraz, keď rozumieme základom vývoja doplnkov, môžeme siahnuť trochu hlbšie. Pretože nakoniec je doplnok funkciou, poskytuje nám rozsah, ktorý potrebujeme na usporiadanie. Pamätáte si, keď sme si dali do poriadku dom, keď sme sa učili o šablónach? Niektoré z tých istých konceptov môžeme použiť aj v doplnku.
Ale najskôr si myslím, že architektúra pluginu jQuery môže ťažiť z nejakého štandardného kódu. Možno vám je známe HTML5 Boilerplate, ktorý poskytuje veľa inteligentných predvolených nastavení. Základný program jQuery Plugin je rovnaká vec. Ušetrí nejaké písanie a umožní vám ísť cestou inteligentného vývoja.
Narazil som na projekt doslova zvaný jQuery Boilerplate, o ktorom by som si myslel, že je dobrý. Ale do toho som sa príliš nehrabal. Namiesto toho sa mi celkom páči Starter od Douga Neinera. Poskytnete názov, niektoré predvolené hodnoty a niektoré možnosti a vygeneruje sa pre vás štruktúra tohto štítku.
Rozhodli sme sa urobiť posúvač s názvom lodgeSlider s jednoduchým parametrom rýchlosti a skončiť s týmto kódom:
(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);Veľa z toho by malo vyzerať povedome. Z bezpečnostných dôvodov je doplnok zabalený do protokolu IIFE. Z objektu jQuery je vytvorená funkcia. Hneď sa volá funkcia init. Z objektu jQuery je vytvorená metóda, ktorá vracia objekt jQuery. Existujú premenné vytvorené odkazy do pamäte cache, ktoré pravdepodobne znova použijeme. Väčšinou veci, ktoré sme už videli.
Možno dve nové veci. Jednou z nich je objekt možností. Môžete vidieť pevne nastavenú hodnotu 300. Ale tiež vidieť hranicu s $.extend(). To je funkcia jQuery na kombináciu dvoch objektov do jedného s tým, že jeden má prednosť pred druhým. Keď zavoláme doplnok, asi takto:
$("#slider-1").lodgeslider();Neposkytujeme žiadne možnosti, tento prázdny objekt sa skombinuje s naším pevne zakódovaným objektom a predvolené hodnoty sú k dispozícii vo vnútri doplnku. Ale mohli by sme to nazvať aj takto:
$("#slider-1").lodgeslider(( speed: 500 ));Predávame tam objekt ako parameter. Tento objekt sa skombinuje s našim pevne zakódovaným objektom, má prednosť a hodnota, ktorú sme odovzdali, sa stane hodnotou dostupnou v pluginu. Celkom v pohode.
Ďalšia nová vec je tá čudná .data(). Vytvorili sme základnú premennú, aby sme odkazovali na samotnú funkciu, ktorá sa vytvorí nanovo pre každý prvok, na ktorý sa plugin volá. Povedzme napríklad, že sme doplnok zavolali $(".slider")- na stránke môžu byť dva prvky s názvom triedy slider. Spustí sa každá slučka a vytvoria sa dve inštancie funkcie lodgeSlider. V každej z nich pripájame odkaz na samotný prvok. Takto môžeme volať interné metódy pluginov z akejkoľvek referencie tohto prvku.
Ako možno:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Jednoducho nám dáva pekný spôsob, ako používať metódy doplnkov, ak to potrebujeme.
V tomto dobrodružstve pri vytváraní doplnkov sme sa nedostali ohromne ďaleko:
Prezrite si pero Vytváranie posúvača od nuly od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Úprimne, svet pravdepodobne nepotrebuje ďalší zásuvný modul. Vidíte však, aké zložité môžu byť. Tu je len niekoľko nápadov:
- Mohli by existovať funkcie spätného volania (alebo vlastné udalosti) pred a po zmene snímky, po nastavení jazdca, po jeho strhnutí atď.
- Šírky môžu byť založené na percentách a prepočítať, keď sa zmení okno prehliadača.
- Navigácia sa dala vytvoriť dynamicky, namiesto toho, aby bola vyžadovaná v značení.
- ID a #hash hrefs je možné vytvárať aj dynamicky.
- Dali by sa pridať dotykové udalosti, ako napríklad prejdenie prstom, aby bol posúvač viac dotykový (malé bodky nie sú dotykové).
Čím viac týchto vecí urobíte, tým väčšia je veľkosť doplnku. Preto je dosiahnutie rovnováhy medzi funkciami, praktickosťou, výkonom a veľkosťou také zložité a že existuje toľko rôznych doplnkov, ktoré nakoniec robia to isté.