Share
In questo articolo creeremo da zero il nostro plugin jQuery passo dopo passo; jQuery rende questo compito eccezionalmente facile per noi, fornendoci un metodo semplice per impacchettare i nostri script ed esporre le loro funzionalità e incoraggiare l'uso di tecniche orientate agli oggetti scalabili e riutilizzabili.
Il codice di svolta che ci troviamo di volta in volta in un plug-in jQuery ha senso; significa che possiamo rilasciare script in siti e farli lavorare subito con poca o nessuna personalizzazione, e significa che possiamo condividere il nostro codice con altri sviluppatori. A causa della sintassi comune quando si usano i plugin jQuery la maggior parte degli sviluppatori dovrebbe essere in grado di prenderli e usarli intuitivamente, data una semplice documentazione che elenca le proprietà configurabili.
Il nostro plugin sarà un semplice caricatore di immagini; una volta caricata una pagina, che potrebbe essere la pagina iniziale o un'altra pagina di destinazione comune nel nostro sito, viene caricata una serie di immagini. Queste immagini vengono salvate nella cache del browser del visitatore e sono quindi utilizzabili nel resto del sito. Caricheranno molto più velocemente del normale, quindi questo è un buon modo per precaricare le immagini grandi in modo che il visitatore non debba attendere che eseguano il rendering all'apertura della pagina che li contiene.
Creeremo una nuova directory per conservare tutti i file necessari.
Ora che abbiamo tutto a posto possiamo iniziare lo scripting; in un nuovo file nel tuo editor di testo inizia con il seguente codice:
(function ($) // codice del plugin andrà qui ...) (jQuery);
Salva il nuovo file nella cartella scripts come jquery.jloader.js. Iniziamo creando una funzione di wrapper anonimo che è auto-eseguibile. La funzione accetta un singolo argomento che è il simbolo del dollaro. La funzione è seguita da una seconda serie di parentesi; li usiamo per passare la libreria jQuery nel nostro plugin. Ciò significa che possiamo usare qualsiasi funzionalità standard di jQuery usando il segno $ come alias. Questa seconda serie di parentesi è anche ciò che rende la nostra funzione autoeseguibile.
All'interno della nostra funzione anonima aggiungere il seguente codice:
$ .jLoader = defaults: imgDir: "loaderImages /", imgContainer: "", imgTotale: 9, imgFormat: ".jpg", simpleFileNames: true;
Con questo codice creiamo un nuovo oggetto che viene aggiunto come proprietà all'oggetto jQuery. Nidificato in questo oggetto è un secondo oggetto chiamato default; questo secondo oggetto viene utilizzato per memorizzare le diverse impostazioni di configurazione per il nostro plugin. Queste impostazioni sono proprietà del nostro plug-in e costituiscono l'API principale con cui può essere utilizzato a livello di programmazione. Una volta che il plugin è stato codificato, apparirà nella scheda DOM di Firebug come una proprietà degli oggetti $ o jQuery:
Successivamente, dobbiamo aggiungere il nostro metodo di costruzione a jQuery in modo che possiamo scegliere elementi o gruppi di elementi specifici e applicare il nostro plug-in a questi. Subito dopo le proprietà configurabili aggiungere il seguente codice:
Accentsconagua
$ .fn.extend (jLoader: function (config, fileNames) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); (config. .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); restituisci questo;); Il metodo di estensione di jQuery accetta un oggetto e applica le sue proprietà a un altro oggetto. Quando creiamo plugin applichiamo l'oggetto che rappresenta il nostro plugin all'oggetto fn, che è uno speciale costrutto jQuery creato per i plugin di authoring.
La proprietà jLoader nell'oggetto che applichiamo a fn ha come funzione una funzione anonima; all'interno di questa funzione aggiungiamo prima le nostre proprietà configurabili. Lo facciamo usando ancora una volta il metodo di estensione di jQuery. La nostra funzione di costruzione accetta due argomenti opzionali, un oggetto di configurazione creato dallo sviluppatore e una matrice di nomi di file.
Questo ci permette di usare le proprietà di default, ma anche di accettare un oggetto di configurazione quando chiamiamo il metodo del costruttore da un codice esterno. Qualsiasi proprietà fornita nell'oggetto di configurazione del costruttore sovrascriverà i valori di qualsiasi proprietà corrispondente nell'oggetto di configurazione dei valori predefiniti.
È utile agli altri sviluppatori fornire il maggior numero possibile di proprietà configurabili per rendere i nostri plugin più robusti e personalizzabili. L'insieme risultante di proprietà è memorizzato nella variabile config in modo che possiamo facilmente passarlo ad altre funzioni.
Otteniamo l'id dell'elemento selezionato, che possiamo ottenere interrogando l'attributo id dell'attuale oggetto jQuery, che punterà agli elementi che la nostra funzione di costruzione è associata a.
Determiniamo quindi se stiamo usando nomi di file semplici (numerici) o complessi (alfanumerici); possiamo scoprire dalla proprietà simpleFileNames del nostro oggetto config. Di default questo è impostato su true, quindi controlliamo se il suo valore è ancora true e chiama la funzione appropriata usando l'istruzione condizionale ternaria di JavaScript standard. Ogni funzione è passata all'oggetto config in modo che possiamo usare le sue proprietà all'interno della funzione, se non lo facessimo, non saremmo in grado di accedere a nessuna delle proprietà di configurazione dai nostri metodi.
Infine, usiamo l'istruzione return per restituire il nostro oggetto plugin; questo è un fattore importante nel codice del plugin e significa che possiamo concatenare ulteriori metodi jQuery alla fine della chiamata al nostro metodo di costruzione, facendolo comportarsi esattamente come altri metodi interni a jQuery stesso.
Il nostro plugin presenta due metodi aggiuntivi che seguono il metodo del costruttore; questi due metodi sono usati internamente dal plugin e non hanno bisogno di essere richiamati da un codice esterno, pensandoli come metodi protetti. Il primo di questi è il metodo simpleLoad e consiste nel seguente codice:
function simpleLoad (config) for (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" immagine "+ x, src: config.imgDir + x + config.imgFormat, titolo:" Immagine "+ x). appendTo (" # "+ config.imgContainer) .css ( display: "none");; Usando un JavaScript standard per loop possiamo creare il numero richiesto di elementi img in base alla proprietà imgTotal, che abbiamo impostato su 9 nel nostro oggetto default. Può sembrare complicato dover dire al plugin quante immagini vogliamo caricare, ma sfortunatamente non c'è modo di interrogare la cartella per i suoi contenuti usando JavaScript. Questa proprietà consente di impedire al plug-in di richiedere il supporto lato server.
Creiamo ogni immagine utilizzando l'eccellente struttura di creazione del nodo DOM di jQuery e impostiamo gli attributi di base di cui ogni immagine ha bisogno; un id, src e un titolo. Per rendere unico l'ID di ogni elemento, possiamo usare la variabile count del nostro ciclo for. La src di ogni nuovo elemento img è la più complessa; per questo attributo aggiungiamo il percorso all'immagine usando la proprietà imgDir. Con semplici nomi di file possiamo anche usare la variabile count per aggiungere ogni immagine specificata. Infine, aggiungiamo l'estensione del file usando la proprietà imgFormat. L'attributo title corrisponde semplicemente all'id.
Una volta creata ogni immagine e dati gli attributi appropriati, la aggiungiamo all'elemento contenitore specificato nella proprietà imgContainer. Le immagini pre-caricate non sono pensate per essere viste in questa fase, quindi possiamo usare il metodo css di jQuery per impostare la proprietà display su none. La funzione finale, complexLoad, utilizza sia l'oggetto di configurazione opzionale che l'array fileNames; il codice dovrebbe apparire come segue:
function complexLoad (config, fileNames) per (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: fileNames [x], src: config.imgDir + fileNames [x] + config.imgFormat, titolo:" The "+ fileNames [x] +" nebulosa "). appendTo (" # " + config.imgContainer) .css (display: "none");; In questo metodo utilizziamo ancora un ciclo for, sebbene il numero di volte che verrà eseguito si basa sul numero di elementi nell'array fileNames anziché sulla proprietà imgTotal. Creiamo ancora una serie di elementi img e impostiamo gli stessi attributi su questi elementi che abbiamo fatto prima, sebbene stavolta usiamo valori diversi per gli attributi.
L'ID di ogni nuova immagine è semplicemente impostato sul contenuto della voce dell'array corrente. L'immagine viene caricata concatenando di nuovo il percorso, il nome del file e l'estensione del file, sebbene questa volta si utilizzi il contenuto dell'elemento della matrice corrente come nome del file invece di un numero intero. L'attributo title ha un valore leggermente più dettagliato rispetto a prima e utilizza nuovamente l'elemento dell'array anziché una proprietà di configurazione.
Ora abbiamo aggiunto tutto il codice che costituisce il nostro plug-in. È tempo di metterlo alla prova. Creare un file HTML vuoto come il seguente:
jLoader Demo Page
Salva questa pagina nella cartella principale del progetto (jLoader) come qualcosa come jLoader.demo.html. Nel corpo della pagina abbiamo i nostri due elementi contenitore che verranno popolati con le immagini precaricate. Ci colleghiamo a jQuery e al file sorgente per il nostro widget e quindi seguendo questo abbiamo due metodi di costruzione per il nostro plugin.
Il primo get è il simpleImageContainer che utilizza il metodo di recupero DOM jQuery standard e chiama il nostro plugin senza alcuna configurazione aggiuntiva. Questo richiama l'implementazione predefinita e dovrebbe riempire il contenitore con le immagini con il nome numerico. Non vedrai questo nella pagina perché li impostiamo tutti per la visualizzazione: nessuno, ma dovresti essere in grado di vederli in Firebug:
Il secondo metodo di costruzione utilizza sia un oggetto di configurazione sia l'array fileNames. Qui impostiamo due proprietà; per prima cosa impostiamo la proprietà simpleFileNames su false in modo che venga utilizzato il nostro secondo metodo protetto nel nostro plugin, in secondo luogo impostiamo la proprietà imgContainer sull'id dell'elemento a cui aggiungeremo le immagini. Quindi forniamo un array di tutti i nomi dei file immagine che vogliamo precaricare in formato stringa. Di nuovo, non vedrai le immagini; questo è il punto, ma Firebug dimostrerà la loro esistenza:
In questo tutorial abbiamo esaminato i singoli passaggi necessari per creare un semplice plug-in jQuery; abbiamo esaminato come aggiungere proprietà all'API del nostro plug-in e come aggiungere metodi che eseguono comportamenti diversi. Abbiamo anche visto i metodi che jQuery ci offre per semplificare i plugin di authoring e le tecniche che possiamo utilizzare per rendere le nostre creazioni più solide.
Assicurati di visitare il sito jQuery per esaminare i plugin disponibili. È inutile reinventare la ruota a meno che tu non stia imparando!
Visita l'articolo
"A volte ci viene in mente che un compito è troppo complesso e che ignoriamo semplicemente di farlo: questa è stata la mia mentalità quando ho pensato allo sviluppo di un plugin per jQuery. Ho sempre pensato che parte del codice che ho sviluppato avrebbe più senso come plugin ma non ho avuto il tempo di capirlo. "
Visita l'articolo
"Quindi eri fuori per la tua ricerca di trovare la risposta alla vita, all'universo, e tutto, quando la colpa, hai trovato jQuery. Sì, lo so, ti aspettavi 42, ma anche tutta la nostra sorpresa, era jQuery. Cosa c'è dopo? Costruisci il tuo plugin! "
Visita l'articolo
