Nyt kun ymmärrämme laajennuskehityksen perusteet, voimme kaivaa hieman syvemmälle. Koska laajennus on viime kädessä toiminto, se tarjoaa meille mahdollisuuden järjestää. Muistatko, kun saimme talomme järjestykseen, kun opimme mallintamisesta? Voimme käyttää joitain samoista käsitteistä laajennuksessa.
Mutta ensin luulen, että jQuery-laajennusarkkitehtuuri voi hyötyä kattilakoodista. Ehkä tunnet HTML5-kattilalevyn, joka tarjoaa joukon älykkäitä oletuksia. JQuery Plugin-kattilalevy on samanlainen asia. Säästää kirjoittamista ja vie sinut älykkään kehityksen polulle.
Törmäsin kirjaimellisesti nimeltään jQuery Boilerplate -projektiin, jonka arvaan tietysti olevan hyvä. Mutta en ole kaivanut siihen paljon. Sen sijaan pidän aivan Doug Neinerin Starterista. Annat nimen, joitain oletuksia ja joitain valintoja, ja se luo kyseisen kattilarakenteen sinulle.
Päätämme tehdä liukusäätimen nimeltä lodgeSlider yksinkertaisella nopeusparametrilla ja päädymme tähän koodiin:
(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);Paljon sen pitäisi näyttää tutulta. IIFE on käärimässä laajennuksen turvallisuuden vuoksi. JQuery-objektista on luotu toiminto. On init-toiminto, jota kutsutaan heti. JQuery-objektista on luotu menetelmä, joka palauttaa jQuery-objektin. On muuttujia, jotka ovat luoneet välimuistiviitteet, joita todennäköisesti käytämme uudelleen. Enimmäkseen tavaraa, jota olemme nähneet aiemmin.
Ehkä kaksi uutta asiaa. Yksi on siellä oleva vaihtoehtoobjekti. Näet kovakoodatun 300-arvon. Mutta myös nähdä linja $.extend(). Se on jQuery-toiminto, joka yhdistää kaksi kohdetta yhdeksi, jolloin toinen on etusijalla toiseen nähden. Kun kutsumme laajennusta, ehkä näin:
$("#slider-1").lodgeslider();Ohitamme mitään vaihtoehtoja, ja tyhjä objekti yhdistetään kovakoodattuun objektiimme, ja oletusarvot ovat käytettävissä laajennuksen sisällä. Mutta voimme kutsua sitä myös näin:
$("#slider-1").lodgeslider(( speed: 500 ));Ohitamme objektin parametrina siellä. Tuo objekti yhdistetään kovakoodattuun objektiimme, on etusijalla, ja välittämästämme arvosta tulee lisäosan käytettävissä oleva arvo. Aika siistiä.
Toinen uusi asia on se outo bitti .data(). Olemme luoneet perusmuuttujan viittaamaan itse toimintoon, joka luodaan uudestaan jokaiselle elementille, jota laajennus kutsutaan. Oletetaan esimerkiksi, että soitimme laajennuksen päälle $(".slider")- sivulla voi olla kaksi elementtiä, joiden luokan nimi on slider. Kukin silmukka kulkee ja tehdään kaksi lodgeSlider-toiminnon esiintymää. Kummassakin liitämme siihen viittauksen itse elementtiin. Tällä tavalla voimme kutsua sisäisiä laajennusmenetelmiä mistä tahansa viitteestä, joka meillä on kyseisestä elementistä.
Kuten ehkä:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Vain tavallaan antaa meille mukavan tavan käyttää laajennustapoja tarvittaessa.
Emme päässeet valtavan pitkälle tässä laajennuksen rakentamisen seikkailussa:
Katso Chris Coyierin (@chriscoyier) kynä, joka rakentaa liukusäädintä Scratchista CodePenissä
Rehellisesti sanottuna maailma ei todennäköisesti tarvitse toista liukusäädintä. Mutta voit nähdä, kuinka monimutkainen he voisivat saada. Tässä vain muutama idea:
- Voi olla takaisinkutsufunktioita (tai mukautettuja tapahtumia) ennen dian vaihtamista ja sen jälkeen, sen jälkeen kun liukusäädin on asetettu, sen jälkeen, kun se on repeytynyt jne.
- Leveydet voivat olla prosenttipohjaisia ja laskea uudelleen, kun selainikkuna muuttuu.
- Navigointi voidaan rakentaa dynaamisesti sen sijaan, että sitä vaaditaan merkinnässä.
- Tunnukset ja #hash-hrefit voidaan luoda myös dynaamisesti.
- Kosketustapahtumia, kuten pyyhkäisyjä, voidaan lisätä, jotta liukusäädin olisi kosketusystävällisempi (pienet pisteet eivät ole kosketusystävällisiä).
Mitä enemmän teet, sitä suurempi on laajennuksen koko. Siksi tasapainon löytäminen ominaisuuksien, käytännöllisyyden, suorituskyvyn ja koon välillä on niin hankalaa ja missä on niin paljon erilaisia laajennuksia, jotka lopulta tekevät saman.