Nu we de basisprincipes van de ontwikkeling van plug-ins begrijpen, kunnen we wat dieper graven. Omdat een plug-in uiteindelijk een functie is, biedt het ons de ruimte die we nodig hebben om te organiseren. Weet je nog dat we ons huis op orde hadden toen we leerden over sjablonen? We kunnen enkele van diezelfde concepten gebruiken in een plug-in.
Maar eerst denk ik dat de architectuur van de jQuery-plug-in kan profiteren van wat standaardcode. Misschien ben je bekend met de HTML5 Boilerplate die een aantal slimme standaardinstellingen biedt. Een boilerplate van jQuery Plugin is hetzelfde. Bespaart wat typen en zorgt ervoor dat u een pad van slimme ontwikkeling ingaat.
Ik kwam een project tegen dat letterlijk jQuery Boilerplate heet en waarvan ik vermoed dat het goed is. Maar ik heb er niet veel in verdiept. In plaats daarvan vind ik Starter van Doug Neiner heel leuk. U geeft een naam, enkele standaardinstellingen en enkele keuzes op en het zal die standaardstructuur voor u genereren.
We besluiten om een slider genaamd lodgeSlider te maken met een simpele snelheidsparameter en eindigen met deze code:
(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);Veel daarvan zou bekend moeten voorkomen. Er is een IIFE die de plug-in omhult voor de veiligheid. Er is een functie gemaakt op basis van het jQuery-object. Er is meteen een init-functie aangeroepen. Er is een methode gemaakt op basis van het jQuery-object die een jQuery-object retourneert. Er zijn variabelen gemaakt met cacheverwijzingen die we waarschijnlijk opnieuw zullen gebruiken. Meestal dingen die we eerder hebben gezien.
Misschien twee nieuwe dingen. Een daarvan is het optieobject daarin. U kunt de hardgecodeerde 300-waarde zien. Maar zie ook de lijn met $.extend(). Dat is een jQuery-functie om twee objecten tot één te combineren, waarbij de ene voorrang heeft op de andere. Als we de plug-in aanroepen, misschien zo:
$("#slider-1").lodgeslider();We geven geen opties door, en dat lege object wordt gecombineerd met ons hardgecodeerde object en de standaardwaarden zijn beschikbaar in de plug-in. Maar we zouden het ook zo kunnen noemen:
$("#slider-1").lodgeslider(( speed: 500 ));We geven daar een object als parameter door. Dat object wordt gecombineerd met ons hardgecodeerde object, krijgt voorrang en de waarde die we hebben doorgegeven, wordt de waarde die beschikbaar is in de plug-in. Best wel gaaf.
Het andere nieuwe is dat rare stukje met .data(). We hebben de basisvariabele gemaakt om naar de functie zelf te verwijzen, die opnieuw wordt gemaakt voor elk element dat de plug-in wordt aangeroepen. Stel dat we de plug-in hebben aangeroepen $(".slider")- er kunnen twee elementen op de pagina staan met de klassenaam slider. Elke lus wordt uitgevoerd en er worden twee instanties van de lodgeSlider-functie gemaakt. In elk daarvan voegen we een verwijzing eraan toe naar het element zelf. Op die manier kunnen we interne plug-in-methoden aanroepen vanuit elke referentie die we van dat element hebben.
Zoals misschien:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Geeft ons gewoon een leuke manier om plug-in-methoden te gebruiken als dat nodig is.
We zijn niet enorm ver gekomen in dit avontuur om plug-ins te bouwen:
Zie de Pen Building a Slider from Scratch door Chris Coyier (@chriscoyier) op CodePen
Eerlijk gezegd heeft de wereld waarschijnlijk geen andere slider-plug-in nodig. Maar u kunt zien hoe complex ze kunnen worden. Hier zijn slechts een paar ideeën:
- Er kunnen callback-functies (of aangepaste gebeurtenissen) zijn voor en nadat de dia is gewijzigd, nadat de schuifregelaar is ingesteld, nadat deze is afgebroken, enz.
- De breedtes kunnen op percentages zijn gebaseerd en worden opnieuw berekend wanneer het browservenster verandert.
- De navigatie kan dynamisch worden opgebouwd in plaats van vereist te zijn in de opmaak.
- De ID's en #hash hrefs kunnen ook dynamisch worden aangemaakt.
- Aanraakgebeurtenissen zoals veegbewegingen kunnen worden toegevoegd om de schuifregelaar aanraakvriendelijker te maken (kleine puntjes zijn niet aanraakvriendelijk).
Hoe meer van die dingen u doet, hoe groter de omvang van de plug-in. Dat is waarom het vinden van die balans tussen functies, bruikbaarheid, prestaties en grootte zo lastig is en waar er zoveel verschillende plug-ins zijn die uiteindelijk hetzelfde doen.