Nüüd, kui mõistame pistikprogrammide väljatöötamise põhitõdesid, saame veidi süveneda. Kuna pistikprogramm on lõppkokkuvõttes funktsioon, annab see meile korraldamiseks vajaliku ulatuse. Kas mäletate, millal saime oma maja korda, kui õppisime mallide loomist? Mõned neist samadest mõistetest saame kasutada pistikprogrammis.
Esiteks arvan ma, et jQuery pistikprogrammi arhitektuur võib mingist katlakoodi koodist kasu saada. Võib-olla olete tuttav HTML5 katlakiviga, mis pakub hulgaliselt nutikaid vaikeväärtusi. JQuery Plugini katlaplaat on sama tüüpi asi. Säästab natuke kirjutamist ja viib teid nutika arengu teele.
Sattusin projektile, sõna otseses mõttes nimega jQuery Boilerplate, mis oleks vist hea. Aga ma pole sellesse eriti süvenenud. Selle asemel meeldib mulle Doug Neineri Starter. Annate nime, mõned vaikimisi ja mõned valikud ning see loob teie jaoks selle katla struktuuri.
Otsustame teha liuguri nimega lodgeSlider lihtsa kiiruseparameetriga ja jõuame lõpuks selle koodini:
(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);Paljud peaksid tunduma tuttavad. Turvalisuse huvides on pistikprogrammi pakkiv IIFE. JQuery objekti juures on loodud funktsioon. Seal on kohe kutsutud init-funktsioon. JQuery objekti juurest on loodud meetod, mis tagastab jQuery objekti. Vahemälu viited on loodud muutujate poolt, mida tõenäoliselt uuesti kasutame. Enamasti asjad, mida oleme varem näinud.
Ehk kaks uut asja. Üks on seal olev valikuvõimaluste objekt. Näete kõvakodeeritud 300 väärtust. Aga vaata ka joont $.extend(). See on funktsioon jQuery, mis ühendab kaks objekti üheks, kusjuures üks on teise ees. Kui helistame pistikprogrammile, võib-olla nii:
$("#slider-1").lodgeslider();Me ei anna ühtegi valikut ja see tühi objekt ühendatakse meie kõvakodeeritud objektiga ning vaikeväärtused on saadaval pistikprogrammi sees. Kuid me võiksime seda nimetada ka nii:
$("#slider-1").lodgeslider(( speed: 500 ));Me edastame seal parameetrina objekti. See objekt ühendatakse meie kõvakodeeritud objektiga, on ülimuslik ja meie edastatud väärtus muutub pluginas saadaolevaks väärtuseks. Päris lahe.
Teine uus asi on see imelik natuke .data(). Lõime muutuja, et viidata funktsioonile endale, mis luuakse uuesti iga elemendi jaoks, millele pluginat kutsutakse. Oletame näiteks, et kutsusime pistikprogrammi sisse $(".slider")- lehel võib olla kaks elementi, mille klassi nimi on slider. Iga silmus jookseb ja tehakse kaks funktsiooni lodgeSlider eksemplari. Igas neist kinnitame viite elemendile endale. Nii võime nimetada sisemisi pistikprogrammi meetodeid igast selle elemendi viitest.
Nagu võib-olla:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Lihtsalt kinda annab meile kena võimaluse pluginameetodeid kasutada, kui vaja.
Selles pistikprogrammi loomise seikluses ei jõudnud me tohutult kaugele:
Vaadake Chris Coyieri (@chriscoyier) CodePenil kirjutatud pliiatsi, mis ehitab liugurit Scratchist
Ausalt öeldes ei vaja maailm ilmselt veel üht liugurpluginat. Kuid näete, kui keerukaks nad võiksid minna. Siin on vaid mõned ideed:
- Enne ja pärast slaidi vahetamist, pärast liuguri seadistamist, pärast selle lahti rebimist vms võivad olla tagasihelistamisfunktsioonid (või kohandatud sündmused).
- Laiused võivad olla protsendipõhised ja arvutada brauseriakna muutumisel uuesti.
- Navigeerimist saab ehitada dünaamiliselt, selle asemel et seda märgistuses nõuda.
- ID-sid ja #hash href-e võiks luua ka dünaamiliselt.
- Liuguri puutetundlikumaks muutmiseks võiks lisada puudutussündmusi, nagu pühkimised (väikesed punktid pole puutetundlikud).
Mida rohkem neid asju teete, seda suurem on pistikprogrammi suurus. Seetõttu on funktsioonide, praktilisuse, jõudluse ja suuruse tasakaalu leidmine nii keeruline ja kus on nii palju erinevaid pistikprogramme, mis teevad lõpuks sama asja.