Share
Quando si scrive un plug-in jQuery, è necessario implementare la stessa routine di prevenzione dei conflitti utilizzata con il normale, vecchio codice jQuery. Con questo in mente, tutti i plugin dovrebbero essere contenuti all'interno di un ambito privato in cui il $ l'alias può essere utilizzato senza paura di conflitti o risultati sorprendenti.
La struttura di codifica sotto dovrebbe essere familiare come è usata in quasi ogni esempio di codice in questa sessione.
I nuovi plugin sono collegati al jQuery.fn oggetto, poiché si tratta di una scorciatoia o di un alias per jQuery.prototype. Nel nostro esempio di codice qui sotto, stiamo aggiungendo il plugin count al jQuery.fn oggetto. In questo modo, stiamo creando il nostro metodo jQuery personalizzato che può essere utilizzato su un insieme di elementi DOM avvolti.
Fondamentalmente, un plugin allegato a jQuery.fn ci consente di creare i nostri metodi personalizzati simili a quelli trovati nell'API. Questo perché quando colleghiamo la nostra funzione plugin a jQuery.fn, la nostra funzione è inclusa nella catena del prototipo-$ .fn.count = function () -per oggetti jQuery creati usando la funzione jQuery. Se ti viene in mente, ricorda che l'aggiunta di una funzione a jQuery.fn significa che la parola chiave Questo all'interno della funzione plugin farà riferimento all'oggetto jQuery stesso.
Gli appunti: Aggiungendo un plugin al jQuery.fn oggetto, stiamo essenzialmente dicendo che il nostro plugin vorrebbe usare la funzione jQuery per selezionare un contesto (elementi DOM). Se il tuo plugin non richiede un contesto specifico (in altre parole un insieme di elementi DOM) in cui deve funzionare, potresti non aver bisogno di collegare questo plugin al $ .fn. Potrebbe essere più sensato aggiungerlo come funzione di utilità nello spazio dei nomi jQuery.
Accentsconagua
Questo È un riferimento all'oggetto jQuery correnteQuando si collega un plugin al jQuery.fn oggetto, la parola chiave Questo usato all'interno della funzione plugin allegata farà riferimento all'oggetto jQuery corrente.
È fondamentale che tu grok esattamente ciò che la parola chiave Questo si riferisce alla funzione plugin.
Questo Parola chiaveutilizzando ogni(), possiamo creare un'iterazione implicita per il nostro plugin. Ciò significa che se il set di wrapper contiene più di un elemento, il nostro metodo di plugin verrà applicato a ogni elemento nel set di wrapper.
Per fare ciò, usiamo l'utility jQuery ogni() funzione, che è un iteratore generico per entrambi gli oggetti e gli array, semplificando sostanzialmente il looping. Nell'esempio di codice seguente, usiamo la funzione per scorrere l'oggetto jQuery stesso. All'interno della funzione che viene passata a ogni(), la parola chiave Questo farà riferimento agli elementi nel set di wrapper jQuery.
Usando il ogni() la funzione è fondamentale se si desidera che un plug-in impieghi l'iterazione implicita.
In genere, la maggior parte dei plugin restituisce l'oggetto jQuery stesso in modo che il plug-in non interrompa la catena. In altre parole, se un plugin non ha specificamente bisogno di restituire un valore, dovrebbe continuare la catena in modo che i metodi aggiuntivi possano essere applicati al set di wrapper. Nel codice qui sotto, stiamo restituendo l'oggetto jQuery con il restituiscilo; dichiarazione in modo che il concatenamento non sia rotto. Notare che mi sto concatenando al genitore() e aggiungere() metodi dopo chiamo il contare() collegare.
Gli appunti: È possibile rendere il plugin un metodo distruttivo semplicemente non restituendo l'oggetto jQuery.
I plugin in genere contengono opzioni predefinite che fungeranno da configurazione predefinita di base per la logica dei plugin. Queste opzioni vengono utilizzate quando viene richiamato il plug-in. Nel codice qui sotto sto creando un defaultOptions oggetto contenente una singola proprietà (startCount) e valore (0). Questo oggetto è memorizzato sulla funzione di conteggio $ .fn.count.defaultOptions. Lo facciamo in modo che le opzioni siano configurabili dall'esterno del plug-in.
In genere, le opzioni di plug-in predefinite possono essere sovrascritte con opzioni personalizzate. Nel codice qui sotto, passo a customOptions oggetto come parametro per la funzione plugin. Questo oggetto è combinato con il defaultOptions oggetto per creare un singolo opzioni oggetto. Usiamo il metodo di utilità jQuery estendere() combinare più oggetti in un singolo oggetto. Il estendere() Il metodo fornisce l'utilità perfetta per sovrascrivere un oggetto con nuove proprietà. Con questo codice, il plug-in può ora essere personalizzato quando viene richiamato. Nell'esempio, passiamo il contare plug-in un numero personalizzato (500) da utilizzare come punto di partenza per il conteggio. Questa opzione personalizzata sostituisce l'opzione predefinita (0).
Poiché le opzioni predefinite sono accessibili dall'esterno di un plug-in, è possibile ripristinare le opzioni predefinite prima di richiamare il plug-in. Questo può essere utile quando si desidera definire le proprie opzioni senza alterare il codice del plugin stesso. Così facendo puoi semplificare le invocazioni dei plug-in perché puoi, in un certo senso, impostare globalmente il plug-in a tuo piacimento senza dover forgiare il codice originale del plugin stesso.
A seconda della natura del plugin, può essere fondamentale che un plugin venga chiamato sia normalmente (tramite elementi DOM ed eventi) sia a livello di programmazione. Si consideri un plug-in di dialogo. Ci saranno volte in cui la modale / finestra di dialogo si aprirà in base agli eventi dell'utente. Altre volte, è necessario aprire una finestra di dialogo in base agli eventi ambientali o di sistema. In queste situazioni, puoi comunque invocare il tuo plug-in senza elementi nel DOM creando un elemento al volo per richiamare il plug-in. Nel codice qui sotto, invoco il dialogo() plugin sul caricamento della pagina creando prima un elemento per invocare il mio plugin.
dialogo, dì ciao dialogo, dì ciao
Ovviamente, potrebbero esserci molte variazioni di questo pattern a seconda delle opzioni, della complessità e della funzionalità del plugin. Il punto qui è che i plugin possono essere chiamati tramite elementi DOM esistenti, così come quelli creati al volo.
Quando si creano plugin jQuery, è una buona idea fornire le funzioni di callback come opzione e passare queste funzioni al contesto di Questo quando viene richiamata la richiamata. Questo fornisce un veicolo per il trattamento aggiuntivo di elementi in un set di wrapper. Nel codice qui sotto, stiamo passando un'opzione personalizzata al outAndInFade () metodo plugin che è una funzione e dovrebbe essere chiamato una volta completata l'animazione. La funzione di callback viene passata il valore di Questo quando viene invocato. Questo ci permette di usare il Questo valore all'interno della funzione che abbiamo definito. Quando viene richiamata la funzione di callback, la parola chiave farà riferimento a uno degli elementi DOM contenuti nel set di wrapper.
Fuori e in dissolvenzaFuori e in dissolvenza
