Nu när vi förstår grunderna för plugin-utveckling kan vi gräva lite djupare. Eftersom ett plugin i slutändan är en funktion ger det oss det utrymme vi behöver organisera. Kommer du ihåg när vi ordnade vårt hus när vi lärde oss om mallar? Vi kan använda några av samma begrepp i ett plugin.
Men först tror jag att jQuery-plugin-arkitekturen kan dra nytta av någon pannkodskod. Du kanske känner till HTML5 Boilerplate som ger en massa smarta standardinställningar. En jQuery Plugin panna är samma typ av sak. Sparar lite skrivning och får dig att gå en väg för smart utveckling.
Jag stötte på ett projekt som bokstavligen heter jQuery Boilerplate vilket jag antar är bra. Men jag har inte grävt i den där mycket. Istället gillar jag ganska Starter av Doug Neiner. Du anger ett namn, vissa standardinställningar och vissa val och det kommer att skapa den pannplattans struktur för dig.
Vi bestämmer oss för att skapa ett skjutreglage med namnet lodgeSlider med en enkel hastighetsparameter och sluta med den här koden:
(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);Mycket av det borde se bekant ut. Det finns en IIFE som omsluter plugin för säkerhet. Det finns en funktion skapad av jQuery-objektet. Det finns en init-funktion som kallas direkt. Det finns en metod skapad av jQuery-objektet som returnerar ett jQuery-objekt. Det finns variabler som skapats cachingreferenser som vi troligen kommer att använda igen. Mestadels saker vi har sett tidigare.
Kanske två nya saker. En är alternativobjektet där inne. Du kan se det hårdkodade 300-värdet. Men se också linjen med $.extend(). Det är en jQuery-funktion för att kombinera två objekt till ett med ett som har företräde framför det andra. När vi ringer till pluginet, kanske så här:
$("#slider-1").lodgeslider();Vi passerar inga alternativ, och det tomma objektet kombineras med vårt hårdkodade objekt, och standardvärdena finns i plugin-programmet. Men vi kan också kalla det så här:
$("#slider-1").lodgeslider(( speed: 500 ));Vi skickar ett objekt som en parameter där. Det objektet kombineras med vårt hårdkodade objekt, har företräde, och värdet vi skickade blir det tillgängliga värdet i plugin. Ganska cool.
Den andra nya saken är så konstig lite med .data(). Vi skapade basvariabeln för att referera till själva funktionen, som skapas på nytt för varje element som plugin kallas på. Säg till exempel att vi ringde till pluginet $(".slider")- det kan finnas två element på sidan med klassnamnet slider. Varje slinga körs och två instanser av lodgeSlider-funktionen görs. I var och en fäster vi en hänvisning till den till själva elementet. På så sätt kan vi kalla interna pluginmetoder från vilken referens som helst av det elementet.
Gilla kanske:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Bara ger oss ett bra sätt att använda pluginmetoder om vi behöver det.
Vi kom inte oerhört långt i detta plugin-byggnadsäventyr:
Se Pen Building a Slider from Scratch av Chris Coyier (@chriscoyier) på CodePen
Ärligt talat behöver världen förmodligen inte ytterligare ett skjutreglage-plugin. Men du kan se hur komplex de kan bli. Här är några idéer:
- Det kan finnas återuppringningsfunktioner (eller anpassade händelser) före och efter att bilden ändrats, efter att skjutreglaget har ställts in, efter att det har rivits ned etc.
- Bredderna kan vara procentbaserade och beräkna om när webbläsarfönstret ändras.
- Navigationen kan byggas dynamiskt istället för att krävas i markeringen.
- ID: n och #hash hrefs kan också skapas dynamiskt.
- Touchhändelser som swipes kan läggas till för att göra reglaget mer beröringsvänligt (små prickar är inte touchvänliga).
Ju fler av dessa saker du gör, desto större blir plugin-formatet. Det är därför det är så knepigt att hitta den balansen mellan funktioner, funktionalitet, prestanda och storlek och där det finns så många olika plugins som i slutändan gör samma sak.