Nå som vi forstår det grunnleggende om plugin-utvikling, kan vi grave litt dypere. Fordi et plugin til slutt er en funksjon, gir det oss omfanget vi trenger å organisere. Husker du da vi fikk orden på huset vårt da vi lærte om mal? Vi kan bruke noen av de samme konseptene i et plugin.
Men først tror jeg jQuery-plugin-arkitekturen kan ha nytte av noe kjelekode. Kanskje du er kjent med HTML5 Boilerplate som gir en rekke smarte standarder. En jQuery Plugin-kjele er den samme typen ting. Sparer litt skriving og får deg til å gå nedover en vei for smart utvikling.
Jeg kom over et prosjekt som bokstavelig talt heter jQuery Boilerplate, som jeg ganske antar er bra. Men jeg har ikke gravd mye i den. I stedet liker jeg ganske godt Starter av Doug Neiner. Du oppgir et navn, noen standardinnstillinger og noen valg, og det vil generere den kjeleplattestrukturen for deg.
Vi bestemmer oss for å lage en glidebryter som heter lodgeSlider med en enkel hastighetsparameter og ender opp med denne 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);Mye av det skal se kjent ut. Det er en IIFE som pakker plugin for sikkerhet. Det er en funksjon opprettet av jQuery-objektet. Det er en init-funksjon som kalles med en gang. Det er en metode opprettet av jQuery-objektet som returnerer et jQuery-objekt. Det er variabler som er opprettet hurtigbufreferanser vi sannsynligvis vil bruke igjen. For det meste ting vi har sett før.
Kanskje to nye ting. Den ene er alternativobjektet der inne. Du kan se den hardkodede 300-verdien. Men se også linjen med $.extend(). Det er en jQuery-funksjon for å kombinere to objekter til ett med det ene som går foran det andre. Når vi kaller pluginet, kanskje slik:
$("#slider-1").lodgeslider();Vi gir ingen valg, og det tomme objektet blir kombinert med vårt hardkodede objekt, og standardverdiene er tilgjengelige inne i pluginet. Men vi kan kalle det slik også:
$("#slider-1").lodgeslider(( speed: 500 ));Vi sender et objekt som en parameter der. Det objektet blir kombinert med vårt hardkodede objekt, har forrang, og verdien vi passerte blir verdien tilgjengelig i plugin. Ganske kult.
Den andre nye tingen er den rare biten med .data(). Vi opprettet basisvariabelen for å referere til selve funksjonen, som opprettes på nytt for hvert element pluginet blir kalt. Si for eksempel at vi kalte pluginet på $(".slider")- det kan være to elementer på siden med klassenavnet slider. Hver sløyfe kjører, og to forekomster av lodgeSlider-funksjonen blir laget. I hver enkelt fester vi en referanse til den på selve elementet. På den måten kan vi kalle interne pluginmetoder fra hvilken som helst referanse vi har til det elementet.
Som kanskje:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Bare gir oss ganske fin en måte å bruke plugin-metoder på hvis vi trenger det.
Vi kom ikke enormt langt i dette plugin-byggeventyret:
Se pennen som bygger en glidebryter fra grunnen av Chris Coyier (@chriscoyier) på CodePen
Ærlig talt trenger verden sannsynligvis ikke nok et skyveprogram. Men du kan se hvor kompliserte de kan bli. Her er bare noen få ideer:
- Det kan være tilbakekallingsfunksjoner (eller egendefinerte hendelser) for før og etter at lysbildet endres, etter at glidebryteren er satt opp, etter at den er revet ned osv.
- Bredden kan være prosentvis basert og beregne på nytt når nettleservinduet endres.
- Navigasjonen kan bygges dynamisk i stedet for å kreves i markeringen.
- IDene og #hash hrefs kan også opprettes dynamisk.
- Berøringshendelser som sveip kan legges til for å gjøre glidebryteren mer berøringsvennlig (små prikker er ikke berøringsvennlige).
Jo flere av disse tingene du gjør, jo større blir plugin. Derfor er det så vanskelig å finne den balansen mellom funksjoner, praktisk, ytelse og størrelse, og hvor det er så mange forskjellige plugins som til slutt gjør det samme.