Crea un plugin Trova e sostituisci in jQuery

Se hai mai usato jQuery, ci sono buone probabilità che tu abbia usato almeno uno dei suoi innumerevoli plugin. Pensa solo a qualcosa di utile che vorresti fare in jQuery e sono quasi certo che esiste un plugin per fare esattamente questo. 

A volte, quando un plugin non esiste, potrebbe essere necessario crearne uno tutto da solo. Non è così difficile come sembra. In questo tutorial, esaminerò alcune regole generali che devi seguire durante la creazione dei plugin, e in seguito creeremo il nostro plugin Trova e sostituisci.

Le basi

Ci sono alcune cose di cui devi essere a conoscenza quando sviluppi i plugin. In questa sezione, li copro tutti uno per uno. Considera il seguente frammento di codice:

(function ($) $ .fn.functionName = function () return this.addClass ("my-class");; (jQuery));

In primo luogo, potresti aver notato che sto usando Questo invece di $ (This) nel nostro plugin. Questo è perché $ .fn fa functionName parte dello stesso oggetto jQuery come .addClass () metodo. 

Lascia che ti spieghi per renderlo più chiaro. utilizzando $ .fn restituisce sempre un oggetto jQuery che contiene tutti i metodi che usi in jQuery. Se crei i tuoi stessi metodi, anche loro faranno parte di questo oggetto. Poiché la funzione è ora parte dell'oggetto jQuery, puoi utilizzare Questo al posto di $ (This).

Secondo, dovresti provare a rendere il tuo plugin concatenabile. Questa è una delle molte importanti funzionalità di jQuery che gli sviluppatori usano sempre. Per rendere un metodo concatenabile, dovrebbe restituire l'oggetto jQuery originale. Questo può essere ottenuto semplicemente aggiungendo ritorno come ho fatto nel codice sopra.

Infine, dovresti proteggere il $ alias e assicurarsi che l'utilizzo del proprio plug-in con altro codice JavaScript non comporti alcun conflitto. Tutto quello che devi fare per assicurarti che ciò non accada è semplicemente racchiudere la funzione in un'espressione di funzione immediatamente richiamata proprio come il codice sopra. 

Creazione del plugin

Con le nozioni di base, possiamo concentrarci sul nostro compito principale, ovvero creare il plugin. Iniziamo con una versione primitiva, in cui sostituiremo semplicemente il testo originale con un testo predefinito. Ecco il codice per farlo:

(function ($) $ .fn.findReplace = function (options) return this.each (function () $ (this) .html ($ (this) .html (). replace (/ Lorem Ipsum / g, "Sostituzione")););; (jQuery));

Sto usando regex per sostituire tutte le occorrenze di Lorem Ipsum con Sostituzione. Per essere onesti, nella sua forma attuale, il nostro plugin è totalmente inutile. Gli utenti dovrebbero almeno avere la possibilità di trovare una porzione di testo e quindi sostituirla con un altro testo di loro scelta. 

A questo punto, la possibilità di accettare varie opzioni viene in nostro soccorso. Forniremo agli utenti tre opzioni: un testo da trovare, del testo da sostituire e la possibilità di impostare il colore di sfondo del testo sostituito. È anche possibile utilizzare questa opportunità per impostare valori predefiniti per vari parametri, nel caso in cui gli utenti consapevolmente o inconsapevolmente non abbiano impostato il valore da soli. Ecco il codice per farlo:

var settings = $ .extend (// Questi sono i valori di default findText: null, replaceText: "", backgroundColor: "#FFF", options);

Ho impostato findText a nullo. Per replaceText, una stringa vuota ha più senso perché se un utente non ha impostato un valore di sostituzione, forse lui o lei voleva solo che fosse vuoto. Il valore più appropriato per colore di sfondo sarebbe il colore di sfondo della pagina web, che nella maggior parte dei casi è bianca. Puoi anche mettere dei controlli per notificare agli utenti se si sono dimenticati di fornire i valori.

Per utilizzare questi valori, dovremo cambiare anche il nostro codice originale del plugin. Il nostro codice di plugin dovrebbe ora essere:

return this.each (function () var StringToFind = settings.findText; var regExpression = new RegExp (StringToFind, "g"); var replacement = ""+ settings.replaceText +""; $ (this) .html ($ (this) .html (). replace (regExpression, replacement)););

È possibile accedere al testo che deve essere trovato utilizzando setting.findText. Questo è memorizzato in una variabile per un uso successivo. Sto usando il RegExp costruttore per creare un oggetto espressione regolare. Questo può essere usato per sostituire dinamicamente le espressioni regolari. 

Utilizzando il modificatore globale si assicura che tutte le occorrenze di StringToFind sono sostituiti. Ho incluso il testo sostitutivo in un elemento span con lo stile in linea. Infine, aggiorno l'HTML dell'elemento che ha chiamato il nostro FINDREPLACE funzione.

Questa demo mostra il nostro plugin in azione.

Fare miglioramenti

Il nostro bel plugin funziona perfettamente. Puoi renderlo ancora più bello con alcune modifiche. Abbiamo già fornito l'opzione per cambiare il colore di sfondo degli elementi sostituiti. 

Tuttavia, se gli utenti decidono di cambiare la dimensione del carattere, aggiungere un po 'di padding o apportare altre modifiche, non possono. È anche poco pratico fornire tutte queste opzioni. Quello che faremo invece è dare agli utenti la possibilità di aggiungere una classe di loro scelta agli elementi sostituiti. In questo modo possono apportare modifiche ai CSS stessi, e anche il nostro plugin sarà leggero. 

Tutto quello che devi fare è cambiare il colore di sfondo opzione nella nostra versione precedente a CustomClass nei posti corrispondenti. 

var settings = $ .extend (findText: null, replaceText: "", backgroundColor: "#FFF", options); // Dovrebbe essere Now var settings = $ .extend (findText: null, replaceText: "", customClass: "", options); var replacement = ""+ settings.replaceText +""; // Should Now Be var replacement =""+ settings.replaceText +"";

Alcuni utenti del tuo plugin potrebbero essere interessati a chiamare una funzione di callback dopo che il plugin ha funzionato. Questo è abbastanza facile da raggiungere. Hai solo bisogno di aggiungere un completeCallback opzione per ottenere la funzione di callback dagli utenti. Quindi il codice seguente si occuperà del resto:

if ($ .isFunction (settings.completeCallback)) settings.completeCallback.call (this); 

Nel frammento di codice sopra, il .isfunction il metodo controlla se l'utente ha effettivamente passato una funzione prima di eseguirla. Per chiamare le funzioni personalizzate, devi chiamare la funzione nel modo seguente:

$ ("a"). findReplace (findText: "Lorem Ipsum", replaceText: "Sono stato sostituito anch'io!", customClass: "match-link", completeCallback: function () $ ('. notification'). text ('Eseguito il plugin su tutti i collegamenti'). FadeOut (5000););

Ecco uno screenshot del plugin in azione:

Sto pubblicando il codice completo del nostro plug-in per assicurarmi che non ci sia alcun mix:

(function ($) $ .fn.findReplace = function (options) var settings = $ .extend (findText: null, replaceText: "", customClass: "", completeCallback: null, options); each (function () var StringToFind = settings.findText; var regExpression = new RegExp (StringToFind, "g"); var replacement = ""+ settings.replaceText +""; $ (this) .html ($ (this) .html (). replace (regExpression, replacement)); if ($ .isFunction (settings.completeCallback)) settings.completeCallback.call (this);) ;; (jQuery));

La nostra demo finale.

Pensieri finali

Creare un plugin in jQuery non è affatto difficile. Devi solo seguire alcune regole di base e sei a posto. 

Se sei interessato ad alcuni altri plug-in che abbiamo a disposizione e cosa possono fare per te in uno dei tuoi progetti esistenti, ti preghiamo di controllare il lavoro di jQuery che abbiamo sul mercato.

Una cosa che consiglierei è di rendere il plugin il più flessibile possibile e mantenere le sue dimensioni il più possibile ridotte. Nessuno userà un plugin 15k che trova e sostituisce solo il testo. 

Infine, spero che questo tutorial ti sia piaciuto e, se hai domande sul tutorial, fammelo sapere nei commenti.