Ora che abbiamo compreso le basi dello sviluppo di plugin, possiamo scavare un po 'più a fondo. Poiché alla fine un plugin è una funzione, ci fornisce l'ambito che dobbiamo organizzare. Ricordi quando abbiamo messo in ordine la nostra casa quando stavamo imparando a creare modelli? Possiamo usare alcuni di questi stessi concetti in un plugin.
Ma prima, penso che l'architettura del plugin jQuery possa trarre vantaggio da un codice boilerplate. Forse hai familiarità con HTML5 Boilerplate che fornisce una serie di impostazioni predefinite intelligenti. Un boilerplate di jQuery Plugin è lo stesso tipo di cose. Salva un po 'di digitazione e ti fa seguire un percorso di sviluppo intelligente.
Mi sono imbattuto in un progetto letteralmente chiamato jQuery Boilerplate che immagino sia buono. Ma non ci ho approfondito molto. Invece, mi piace abbastanza Starter di Doug Neiner. Fornisci un nome, alcune impostazioni predefinite e alcune scelte e genererà quella struttura boilerplate per te.
Decidiamo di creare uno slider chiamato lodgeSlider con un semplice parametro di velocità e finiamo con questo codice:
(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);Molto dovrebbe sembrare familiare. C'è un IIFE che avvolge il plugin per sicurezza. C'è una funzione creata dall'oggetto jQuery. C'è una funzione init chiamata subito. Esiste un metodo creato dall'oggetto jQuery che restituisce un oggetto jQuery. Ci sono variabili create nei riferimenti di memorizzazione nella cache che probabilmente utilizzeremo di nuovo. Per lo più cose che abbiamo visto prima.
Forse due cose nuove. Uno è l'oggetto delle opzioni lì dentro. Puoi vedere il valore 300 hardcoded. Ma vedi anche la linea con $.extend(). Questa è una funzione jQuery per combinare due oggetti in uno con uno che ha la precedenza sull'altro. Quando chiamiamo il plugin, forse in questo modo:
$("#slider-1").lodgeslider();Non stiamo passando opzioni e quell'oggetto vuoto viene combinato con il nostro oggetto hardcoded ei valori predefiniti sono disponibili all'interno del plug-in. Ma potremmo chiamarlo anche così:
$("#slider-1").lodgeslider(( speed: 500 ));Stiamo passando un oggetto come parametro lì. Quell'oggetto viene combinato con il nostro oggetto hardcoded, ha la precedenza e il valore passato diventa il valore disponibile nel plug-in. Abbastanza bello.
L'altra cosa nuova è quella cosa strana con .data(). Abbiamo creato la variabile di base per fare riferimento alla funzione stessa, che viene creata di nuovo per ogni elemento su cui viene chiamato il plugin. Ad esempio, supponiamo di aver chiamato il plugin su $(".slider"): potrebbero esserci due elementi sulla pagina con un nome di classe di slider. Ogni ciclo viene eseguito e vengono create due istanze della funzione lodgeSlider. In ognuna, alleghiamo un riferimento all'elemento stesso. In questo modo possiamo chiamare metodi di plugin interni da qualsiasi riferimento che abbiamo di quell'elemento.
Come forse:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Solo un pò ci dà un bel modo di usare i metodi dei plugin, se necessario.
Non siamo andati molto lontano in questa avventura di creazione di plugin:
Guarda la penna che costruisce un cursore da zero di Chris Coyier (@chriscoyier) su CodePen
Onestamente il mondo probabilmente non ha bisogno di un altro plug-in di scorrimento. Ma puoi vedere quanto potrebbero diventare complessi. Ecco solo alcune idee:
- Potrebbero esserci funzioni di callback (o eventi personalizzati) prima e dopo la modifica della diapositiva, dopo l'impostazione del dispositivo di scorrimento, dopo che è stato rimosso, ecc.
- Le larghezze potrebbero essere basate sulla percentuale e ricalcolate quando la finestra del browser cambia.
- La navigazione potrebbe essere costruita dinamicamente invece di essere richiesta nel markup.
- Anche gli ID e gli #hash hrefs possono essere creati dinamicamente.
- È possibile aggiungere eventi di tocco come sfioramenti per rendere il cursore più adatto al tocco (i puntini non sono compatibili con il tocco).
Più cose fai, maggiori saranno le dimensioni del plugin. Ecco perché trovare quell'equilibrio tra funzionalità, praticità, prestazioni e dimensioni è così complicato e ci sono così tanti plugin diversi che alla fine fanno la stessa cosa.