Nu hvor vi forstår det grundlæggende i plugin-udvikling, kan vi grave lidt dybere. Fordi et plugin i sidste ende er en funktion, giver det os det omfang, vi har brug for at organisere. Husker du, da vi fik vores hus i orden, da vi lærte om skabeloner? Vi kan bruge nogle af de samme begreber i et plugin.
Men først tror jeg, jQuery-pluginarkitektur kan drage fordel af nogle kedelpladekoder. Måske er du fortrolig med HTML5 Boilerplate, der giver en masse smarte standardindstillinger. En jQuery Plugin-kedelplade er den samme slags ting. Sparer noget at skrive og får dig til at gå ned ad en vej til smart udvikling.
Jeg stødte på et projekt, der bogstaveligt talt hedder jQuery Boilerplate, som jeg nok vil gætte er godt. Men jeg har ikke gravet meget ind i den ene. I stedet kan jeg godt lide Starter af Doug Neiner. Du giver et navn, nogle standardindstillinger og nogle valg, og det vil generere den kedelpladestruktur for dig.
Vi beslutter at lave en skyder ved navn lodgeSlider med en simpel hastighedsparameter og ender med denne kode:
(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);Meget af det skal se bekendt ud. Der er en IIFE, der omslutter pluginet for sikkerheds skyld. Der er en funktion oprettet ud fra jQuery-objektet. Der er en init-funktion kaldet med det samme. Der er en metode oprettet ud fra jQuery-objektet, som returnerer et jQuery-objekt. Der er variabler oprettet cache-referencer, som vi sandsynligvis vil bruge igen. For det meste ting, vi har set før.
Måske to nye ting. Den ene er indstillingsobjektet derinde. Du kan se den hårdkodede 300-værdi. Men se også linjen med $.extend(). Det er en jQuery-funktion til at kombinere to objekter i det ene med det ene forrang over det andet. Når vi kalder pluginet, måske sådan:
$("#slider-1").lodgeslider();Vi giver ingen muligheder, og det tomme objekt kombineres med vores hårdkodede objekt, og standardværdierne er tilgængelige inde i pluginet. Men vi kunne også kalde det sådan:
$("#slider-1").lodgeslider(( speed: 500 ));Vi sender et objekt som en parameter der. Objektet kombineres med vores hårdkodede objekt, har forrang, og den værdi, vi har videregivet, bliver den tilgængelige værdi i pluginet. Temmelig sejt.
Den anden nye ting er den underlige bit med .data(). Vi oprettede basisvariablen for at henvise til selve funktionen, som oprettes på ny for hvert element, pluginet kaldes på. Lad os f.eks. Sige, at vi kaldte pluginet til $(".slider")- der kunne være to elementer på siden med klassens navn på slider. Hver loop løber, og der oprettes to forekomster af lodgeSlider-funktionen. I hver enkelt vedhæfter vi en henvisning til selve elementet. På den måde kan vi kalde interne plugin-metoder fra enhver reference, vi har af dette element.
Ligesom måske:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Bare lidt giver os en god måde at bruge plugin-metoder på, hvis vi har brug for det.
Vi kom ikke enormt langt i dette plugin-bygningseventyr:
Se pennen, der bygger en skyder fra Scratch af Chris Coyier (@chriscoyier) på CodePen
Ærligt talt har verden sandsynligvis ikke brug for endnu et skyder-plugin. Men du kan se, hvor komplekse de kunne blive. Her er blot nogle få ideer:
- Der kan være tilbagekaldsfunktioner (eller brugerdefinerede begivenheder) til før og efter skift af lysbillede, efter at skyderen er opsat, efter at den er revet ned osv.
- Bredderne kan være procentbaseret og genberegne, når browservinduet ændres.
- Navigationen kunne bygges dynamisk i stedet for at være påkrævet i markeringen.
- ID'erne og #hash hrefs kunne også oprettes dynamisk.
- Berøringshændelser som swipes kunne tilføjes for at gøre skyderen mere berøringsvenlig (små prikker er ikke berøringsvenlige).
Jo flere af disse ting du laver, jo større er plugin-størrelsen. Derfor er det så vanskeligt at finde den balance mellem funktioner, funktionalitet, ydeevne og størrelse, og hvor der er så mange forskellige plugins, der i sidste ende gør det samme.