Zdaj, ko razumemo osnove razvoja vtičnikov, se lahko malo poglobimo. Ker je na koncu vtičnik funkcija, nam zagotavlja obseg, ki ga moramo organizirati. Se spomnite, kdaj smo uredili hišo, ko smo se učili o predlogih? Nekatere iste koncepte lahko uporabimo v vtičniku.
Najprej pa mislim, da ima arhitektura vtičnikov jQuery koristi od neke vzorčne kode. Morda poznate HTML5 Boilerplate, ki ponuja kup pametnih privzetih nastavitev. Izobraževalna plošča jQuery Plugin je ista stvar. Prihrani nekaj tipkanja in vas spusti po poti pametnega razvoja.
Naletel sem na projekt, dobesedno imenovan jQuery Boilerplate, za katerega bi se mi zdelo dobro. A v to nisem še veliko poglabljal. Namesto tega mi je zelo všeč Starter Douga Neinerja. Navedite ime, nekaj privzetih vrednosti in nekatere možnosti, ki bodo ustvarile to strukturo vzorca za vas.
Odločimo se, da izdelamo drsnik z imenom lodgeSlider s preprostim parametrom hitrosti in na koncu dobimo to kodo:
(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);Veliko tega bi moralo biti videti znano. Obstaja IIFE, ki zaviti vtičnik zaradi varnosti. Iz objekta jQuery je ustvarjena funkcija. Takoj se pokliče funkcija init. Obstaja metoda, ustvarjena iz objekta jQuery, ki vrne objekt jQuery. Obstajajo spremenljivke, ustvarjene sklice v predpomnilniku, ki jih bomo verjetno ponovno uporabili. Večinoma stvari, ki smo jih že videli.
Morda dve novi stvari. Eden je predmet možnosti tam. Ogledate si lahko trdno kodirano vrednost 300. Toda glej tudi črto z $.extend(). To je funkcija jQuery za kombiniranje dveh predmetov v enega, pri čemer ima eden prednost pred drugim. Ko pokličemo vtičnik, morda tako:
$("#slider-1").lodgeslider();Ne podajamo nobene možnosti in ta prazen predmet se kombinira z našim trdo kodiranim predmetom, privzete vrednosti pa so na voljo v vtičniku. Lahko pa bi mu rekli tudi takole:
$("#slider-1").lodgeslider(( speed: 500 ));Tam posredujemo objekt kot parameter. Ta predmet se kombinira z našim trdo kodiranim predmetom, ima prednost in vrednost, ki smo jo predali, postane vrednost, ki je na voljo v vtičniku. Precej kul.
Druga nova stvar je tisto čudno .data(). Ustvarili smo osnovno spremenljivko, ki se sklicuje na samo funkcijo, ki se ustvari na novo za vsak element vtičnika. Recimo, da smo vtičnik vklopili $(".slider")- na strani sta lahko dva elementa z imenom razreda slider. Vsaka zanka se zažene in izdelana sta dva primerka funkcije lodgeSlider. V vsakem prilagamo sklic nanj na sam element. Tako lahko pokličemo interne metode vtičnikov iz katerega koli sklica tega elementa.
Kot morda:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Samo nekako nam daje lep način za uporabo vtičniških metod, če je to potrebno.
V tej pustolovski pustolovski pustolovščini nismo prišli izjemno daleč:
Oglejte si Pen Building a Slider from Scratch avtorja Chris Coyier (@chriscoyier) na CodePen
Iskreno, svet verjetno ne potrebuje drugega vtičnika za drsnike. Toda vidite, kako zapleteni bi lahko bili. Tu je le nekaj idej:
- Lahko obstajajo funkcije povratnega klica (ali dogodki po meri) za pred in po spremembi diapozitiva, potem ko je drsnik nastavljen, potem ko je porušen itd.
- Širine lahko temeljijo na odstotkih in se preračunajo, ko se spremeni okno brskalnika.
- Navigacijo je mogoče graditi dinamično, namesto da bi bila potrebna pri označevanju.
- ID-je in #hash hrefs je mogoče ustvariti tudi dinamično.
- Dotaknite se lahko dogodkov na dotik, kot so poteze, da drsnik postane bolj dotik (majhne pike niso dotik).
Več kot počnete teh stvari, večja je velikost vtičnika. Zato je doseči ravnovesje med funkcijami, praktičnostjo, zmogljivostjo in velikostjo tako zapleteno in kjer obstaja toliko različnih vtičnikov, ki na koncu naredijo isto.