Tagad, kad mēs saprotam spraudņu izstrādes pamatus, mēs varam nedaudz iedziļināties. Tā kā spraudnis galu galā ir funkcija, tas mums nodrošina darbības jomu, kas mums jāorganizē. Atcerieties, kad mēs savācām māju kārtībā, kad mācījāmies par veidnēm? Dažus no šiem pašiem jēdzieniem mēs varam izmantot spraudnī.
Bet, pirmkārt, es domāju, ka jQuery spraudņa arhitektūra var gūt labumu no kāda katla koda. Varbūt jūs esat iepazinies ar HTML5 katlu, kas nodrošina virkni viedo noklusējumu. JQuery Plugin katlu plāksne ir tāda pati lieta. Ietaupa nedaudz rakstīšanas un ļauj iet pa gudras attīstības ceļu.
Man nāca pāri projektam, ko burtiski sauca jQuery Boilerplate, un es domāju, ka tas ir labs. Bet es tajā daudz neesmu iedziļinājies. Tā vietā man ļoti patīk Doug Neiner iesācējs. Jūs norādāt vārdu, dažus noklusējumus un dažas izvēles iespējas, un tas jums ģenerēs šo katla struktūru.
Mēs nolemjam izveidot slīdni ar nosaukumu lodgeSlider ar vienkāršu ātruma parametru un galu galā ar šo kodu:
(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);Daudziem no tiem vajadzētu izskatīties pazīstami. Drošības labad ir IIFE, kas iesaiņo spraudni. Pie jQuery objekta ir izveidota funkcija. Ir tūlīt izsaukta init funkcija. Pie jQuery objekta ir izveidota metode, kas atgriež jQuery objektu. Ir mainīgie, kas izveidoti kešatmiņas atsauces, kuras, visticamāk, izmantosim vēlreiz. Pārsvarā tādas lietas, kādas esam redzējuši iepriekš.
Varbūt divas jaunas lietas. Viens ir opciju objekts tur. Jūs varat redzēt grūti kodēto 300 vērtību. Bet arī redzēt līniju ar $.extend(). Tā ir funkcija jQuery, lai apvienotu divus objektus vienā un vienam būtu prioritāte pār citiem. Kad mēs izsaucam spraudni, iespējams, šādi:
$("#slider-1").lodgeslider();Mēs neizlaižam nevienu opciju, un šis tukšais objekts tiek apvienots ar mūsu kodēto objektu, un spraudņa iekšpusē ir pieejamas noklusējuma vērtības. Bet mēs to varētu saukt arī šādi:
$("#slider-1").lodgeslider(( speed: 500 ));Mēs tur nododam objektu kā parametru. Šis objekts tiek apvienots ar mūsu grūti kodēto objektu, tam ir prioritāte, un mūsu nodotā vērtība kļūst par spraudnī pieejamo vērtību. Diezgan vēss.
Otra jauna lieta ir tā dīvainā mazliet .data(). Mēs izveidojām bāzes mainīgo, lai atsauktos uz pašu funkciju, kas tiek izveidota no jauna katram spraudņa izsauktajam elementam. Piemēram, pieņemsim, ka mēs iesaucām spraudni $(".slider")- lapā varētu būt divi elementi ar klases nosaukumu slider. Katra cilpa iet, un tiek veikti divi lodgeSlider funkcijas gadījumi. Katrā no tām mēs pievienojam atsauci uz pašu elementu. Tādā veidā mēs varam izsaukt iekšējās spraudņu metodes no jebkuras atsauces, kāda mums ir uz šo elementu.
Piemēram, varbūt:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Vienkārši dod mums jauku veidu, kā izmantot spraudņu metodes, ja mums tas ir nepieciešams.
Šajā spraudņu veidošanas piedzīvojumā mēs neticām ārkārtīgi tālu:
Skatiet Krāsu Koijera (@chriscoyier) pildspalvu, kas izveido slīdni no Scratch vietnē CodePen
Godīgi sakot, pasaulei, iespējams, nav vajadzīgs cits slīdņa spraudnis. Bet jūs varat redzēt, cik sarežģīti viņi varētu kļūt. Šeit ir tikai dažas idejas:
- Varētu būt atzvanīšanas funkcijas (vai pielāgoti notikumi) pirms un pēc slaida maiņas, pēc slīdņa iestatīšanas, pēc tā nojaukšanas utt.
- Platumi varētu būt balstīti uz procentiem un pārrēķināties, mainoties pārlūkprogrammas logam.
- Navigāciju varētu veidot dinamiski, nevis prasīt marķējumā.
- Varētu arī dinamiski izveidot ID un #hash hrefs.
- Varētu pievienot pieskārienu notikumus, piemēram, vilkšanu, lai slīdnis būtu draudzīgāks skārienam (mazi punkti nav pieskārienam draudzīgi).
Jo vairāk no šīm lietām jūs darāt, jo lielāks ir spraudņa lielums. Tāpēc panākt līdzsvaru starp funkcijām, praktiskumu, veiktspēju un izmēru ir tik sarežģīti un kur ir tik daudz dažādu spraudņu, kas galu galā dara to pašu.