Share
Molto tempo fa, in una galassia molto, molto lontano, JavaScript era un linguaggio odiato. In effetti, "odiato" è un eufemismo; JavaScript era una lingua disprezzata. Di conseguenza, gli sviluppatori in genere l'hanno trattato come tale, solo spostando le dita dei piedi nelle acque JavaScript quando avevano bisogno di aggiungere un po 'di fascino alle loro applicazioni. Nonostante il fatto che ci sia un bel po 'di bene nel linguaggio JavaScript, a causa della diffusa ignoranza, pochi hanno avuto il tempo di apprenderlo appropriatamente. Invece, come alcuni di voi potrebbero ricordare, l'uso standard di JavaScript comportava una notevole quantità di copia e incolla.
"Non preoccuparti di sapere cosa fa il codice o se segue le migliori pratiche, semplicemente incollalo!" - Il peggior consiglio di sempre
Poiché l'ascesa di jQuery ha riacceso l'interesse per il linguaggio JavaScript, gran parte delle informazioni sul web è un po 'approssimativa.
Ironia della sorte, si scopre che gran parte di ciò che la comunità di sviluppo odiava aveva molto poco a che fare con il linguaggio JavaScript, in sé. No, la vera minaccia sotto la maschera era il DOM, o "Document Object Model", che, soprattutto all'epoca, era orribilmente incoerente dal browser al browser. "Certo, potrebbe funzionare in Firefox, ma per quanto riguarda IE8? Ok, potrebbe funzionare in IE8, ma per quanto riguarda IE7?" La lista continuò instancabilmente!
Fortunatamente, a partire da circa cinque anni fa, la comunità JavaScript vedrebbe un incredibile cambiamento in meglio, poiché le librerie come jQuery sono state introdotte al pubblico. Queste librerie non solo fornivano una sintassi espressiva particolarmente attraente per i web designer, ma riuscivano anche a livellare la sensazione di gioco, rimuovendo le soluzioni alternative per i vari dettagli del browser nella sua API. grilletto $ .ajax e lascia che jQuery faccia la parte difficile. Avanti veloce a oggi e la community JavaScript è più vivace che mai, in gran parte grazie alla rivoluzione di jQuery.
Poiché l'ascesa di jQuery ha riacceso l'interesse per il linguaggio JavaScript, gran parte delle informazioni sul web è un po 'approssimativa. Questo è meno dovuto all'ignoranza degli scrittori e più al fatto che stavamo tutti imparando. Ci vuole tempo perché emergano le migliori pratiche.
Fortunatamente, la comunità è maturata immensamente da quei giorni. Prima di immergerci in alcune di queste migliori pratiche, esponiamo prima alcuni cattivi consigli diffusi sul web.
Il problema con suggerimenti come questo è che portano l'idea della pre-ottimizzazione ad un estremo.
Molto simile a Ruby on Rails, la prima introduzione di molti sviluppatori a JavaScript era attraverso jQuery. Questo ha portato a un ciclo comune: impara jQuery, innamorati, scavare in JavaScript vaniglia e salire di livello.
Anche se non c'è sicuramente nulla di sbagliato in questo ciclo, ha spianato la strada a innumerevoli articoli, che raccomandavano agli utenti non utilizzare jQuery in varie situazioni, a causa di "problemi di prestazioni". Non sarebbe raro leggere che è meglio usare la vaniglia per cicli, oltre $ .Ogni. Oppure, ad un certo punto o in un altro, potresti aver letto che è meglio usarlo document.getElementsByClassName sul motore Sizzle di jQuery, perché è più veloce.
Il problema con suggerimenti come questo è che portano l'idea della pre-ottimizzazione a un estremo e non tengono conto delle varie incoerenze del browser - le cose che jQuery ha risolto per noi! Eseguire un test e osservare risparmi di pochi millisecondi su migliaia di ripetizioni non è un motivo per abbandonare jQuery e la sua elegante sintassi. Il tuo tempo è molto più ottimizzato investendo parti della tua applicazione che realmente farà la differenza, come la dimensione delle tue immagini.
Questo secondo anti-modello, ancora una volta, è stato il risultato della comunità (incluso il sottoscritto a un certo punto) che non capiva completamente cosa stava succedendo sotto il cofano. Come tale, è probabile che tu abbia trovato (o scritto te stesso) codice, che ha avvolto un elemento nell'oggetto jQuery innumerevoli volte all'interno di una funzione.
Accentsconagua
$ ('button.confirm'). on ('click', function () // Fallo una volta $ ('. modal'). modal (); // Ancora una volta $ ('. modal'). addClass ('attivo'); // E ancora per buona misura $ ('modale'). css (...);); Mentre questo codice potrebbe, all'inizio, sembrare innocuo (e in verità è nel grande schema delle cose), stiamo seguendo la cattiva pratica di creare più istanze dell'oggetto jQuery. Ogni volta che ci riferiamo a $ ( 'Modale'), viene generato un nuovo oggetto jQuery. È così intelligente??
Pensa al DOM come a una piscina: ogni volta che chiami
$ ( 'Modale'), jQuery si tuffa nella piscina e cerca le monete (o gli elementi) associati. Quando interroghi ripetutamente il DOM per lo stesso selettore, stai essenzialmente gettando quelle monete nell'acqua, solo per saltare dentro e ritrovarle tutte da capo!
Seleziona sempre selettori se intendi usarli più di una volta. Lo snippet di codice precedente può essere rifatto a:
$ ('button.confirm'). on ('click', function () $ ('. modal') .modal () .addClass ('active') .css (...);); In alternativa, usa "cache".
$ ('button.confirm'). on ('click', function () // Fallo SOLO una volta var modal = $ ('. modal'); modal.modal (); modal.addClass ('active') ; modal.css (...);); Con questa tecnica, jQuery salta nel pool DOM per un totale di una volta, anziché tre.
Troppa attenzione viene prestata alle prestazioni del selettore.
Sebbene non sia così onnipresente in questi giorni, non molto tempo fa, il web è stato bombardato da innumerevoli articoli sull'ottimizzazione delle prestazioni dei selettori in jQuery. Ad esempio, è meglio usare $ ('div p') o $ ( 'Div'). Find ( 'p')?
Pronto per la verità? Non importa. È certamente una buona idea avere una conoscenza di base del modo in cui il motore Sizzle di jQuery analizza le query del selettore da destra a sinistra (il che significa che è meglio essere più specifici alla fine del tuo selettore, piuttosto che all'inizio). E, naturalmente, più specifici puoi essere, meglio è. Chiaramente, $ ( 'A.button') è meglio per le prestazioni di $ ( 'Bottone'), dovuto al fatto che, con il primo, jQuery è in grado di limitare la ricerca solo agli elementi di ancoraggio nella pagina, piuttosto che a tutti gli elementi.
Oltre a ciò, tuttavia, viene prestata troppa attenzione alle prestazioni del selettore. In caso di dubbi, confida nel fatto che il team jQuery è composto dai migliori sviluppatori JavaScript del settore. Se c'è un aumento di prestazioni da raggiungere in biblioteca, lo avranno scoperto. E, se non loro, uno dei membri della comunità invierà una richiesta di pull.
Con questo in mente, sii consapevole dei tuoi selezionatori, ma non preoccuparti troppo delle implicazioni di rendimento, a meno che tu non possa verbalizzare perché è necessario farlo.
jQuery ha incoraggiato l'uso diffuso delle funzioni di callback, che possono certamente fornire una buona comodità. Piuttosto che dichiarare una funzione, usa semplicemente una funzione di callback. Per esempio:
$ ('a.external'). on ('click', function () // questa funzione di callback viene attivata // quando viene cliccato .external; Hai sicuramente scritto un sacco di codice simile a questo; So di avere! Se usate con parsimonia, le funzioni di callback anonimo servono come utili comodità. Lo sfregio si verifica lungo la linea, quando entriamo ... callback hell (trigger thunderbolt sound)!
L'inferno di callback è quando il tuo codice si indovina numerose volte, mentre continui ad annidare le funzioni di callback.
Si consideri il seguente codice abbastanza comune qui sotto:
$ ('a.data'). on ('click', function () var anchor = $ (this); $ (this) .fadeOut (400, function () $ .ajax (// ... successo: function (data) anchor.fadeIn (400, function () // hai appena inserito callback hell);););); Come regola generale, più il codice è indentato, più è probabile che ci sia un odore di codice. O, meglio ancora, chiediti, il mio codice sembra il Mighty Ducks Flying V?
Quando si refactoring un codice come questo, la chiave è chiedersi: "Come potrebbe essere testato?" All'interno di questo bit di codice apparentemente semplice, un listener di eventi è associato a un link, l'elemento si attenua, viene eseguita una chiamata AJAX, in caso di successo, l'elemento si dissolve, presumibilmente, i dati risultanti verranno aggiunti da qualche parte. Questo è sicuramente molto da provare!
Non sarebbe meglio suddividere questo codice in pezzi più gestibili e verificabili? Certamente. Sebbene quanto segue possa essere ulteriormente ottimizzato, un primo passo per migliorare questo codice potrebbe essere:
var updatePage = function (el, data) // aggiungi dati recuperati al DOM; var fetch = function (ajaxOptions) ajaxOptions = ajaxOptions || // url: ... // dataType: ... success: updatePage; restituire $ .ajax (ajaxOptions); ; $ ('a.data'). on ('click', function () $ (this) .fadeOut (400, fetch);); Ancora meglio, se hai una varietà di azioni da attivare, contenga i metodi pertinenti all'interno di un oggetto.
Pensa a come, in un ristorante fast-food, come McDonalds, ogni lavoratore è responsabile di un compito. Joe fa le patatine, Karen registra i clienti e Mike griglia gli hamburger. Se tutti e tre i membri dello staff facessero tutto, ciò introdurrebbe una varietà di problemi di manutenibilità. Quando i cambiamenti devono essere implementati, dobbiamo incontrarci con ciascuna persona per discuterne. Tuttavia, se noi, per esempio, teniamo Joe esclusivamente focalizzato sulle patatine fritte, dovremmo avere bisogno di aggiustare le istruzioni per preparare le patatine fritte, abbiamo solo bisogno di parlare con Joe e nessun altro. Dovresti adottare un approccio simile al tuo codice; ogni funzione è responsabile di un compito.
Nel codice sopra, il andare a prendere la funzione attiva semplicemente una chiamata AJAX all'URL specificato. Il updatePage la funzione accetta alcuni dati e li aggiunge al DOM. Ora, se vogliamo testare una di queste funzioni per assicurarci che funzioni come previsto, ad esempio, il updatePage metodo, possiamo prendere in giro l'oggetto dati e inviarlo alla funzione. Facile!
È importante ricordare che l'ecosistema di jQuery è maturato molto negli ultimi anni. Le probabilità sono, se hai bisogno di un particolare componente, che qualcun altro l'abbia già costruito. Certamente, continua a creare plugin per aumentare la tua comprensione della libreria jQuery (ne scriveremo uno in questo articolo), ma, per l'utilizzo nel mondo reale, fai riferimento a eventuali plugin esistenti prima di reinventare la ruota.
Ad esempio, è necessario un selettore di date per un modulo? Risparmia il lavoro sulle gambe e sfrutta invece la libreria dell'interfaccia utente jQuery guidata dalla community e altamente testata.
Una volta che hai fatto riferimento alla libreria dell'interfaccia utente jQuery e al foglio di stile associato, il processo di aggiunta di un selettore di date a un input è semplice:
O che ne dici di una fisarmonica? Certo, potresti scrivere tu stesso questa funzionalità o, ancora una volta, sfruttare l'interfaccia utente di jQuery.
Crea semplicemente il markup necessario per il tuo progetto.
Capitolo 1
Qualche testo.
capitolo 2
Qualche testo.
capitolo 3
Qualche testo.
Sezione 4
Qualche testo.
Poi, automagicamente trasformalo in una fisarmonica.
$ (function () $ ("# fisarmonica"). accordion ();); 
Che cosa succede se è possibile creare schede in trenta secondi?
Crea il markup:
- Riguardo a noi
- La nostra missione
- Mettiti in contatto
Riguardo a noi testo.
Il nostro testo di missione.
Mettiti in contatto con il testo.
E attiva il plugin.
$ (function () $ ("# tabs"). tabs ();); Fatto! Non richiede nemmeno alcuna comprensione notevole di JavaScript.
Esaminiamo ora alcune best practice per la creazione di plug-in jQuery, cosa che in un certo punto della tua carriera di sviluppo dovrai svolgere.
Useremo un relativamente semplice Casella dei messaggi plugin come demo per il nostro apprendimento. Sentiti libero di lavorare insieme; infatti, per favore fallo!
L'incarico: implementare la funzionalità necessaria per visualizzare le finestre di dialogo, utilizzando la sintassi, $ .message ('SAY TO THE USER'). In questo modo, ad esempio, prima di eliminare definitivamente un record, possiamo chiedere all'utente di confermare l'azione, piuttosto che ricorrere all'infrlessibile e brutto mettere in guardia scatole.
Il primo passo è capire come "attivare" $ .message. Piuttosto che estendere il prototipo di jQuery, per i requisiti di questo plugin, abbiamo solo bisogno di allegare un metodo allo spazio dei nomi jQuery.
(function ($) $ .message = function (text) console.log (testo);;) (jQuery);
È così facile; vai avanti, provalo! Quando chiami $ .message ('Ecco il mio messaggio'), quella stringa deve essere registrata nella console del browser (Maiusc + Comando + i, in Google Chrome).
Sebbene non ci sia abbastanza spazio per esaminare il processo di test del plug-in, questo è un passaggio importante da ricercare. C'è un incredibile senso di sicurezza che si verifica quando si refactoring il codice testato.
Ad esempio, quando si utilizza la suite di test di jQuery, QUnit, è possibile testare il codice del passaggio 1 scrivendo:
module ('jQuery.message', test ('è disponibile nello spazio dei nomi jQuery', 1, function () ok ($. message, 'dovrebbe esistere il metodo messaggio'););); Il ok la funzione, disponibile tramite QUnit, afferma semplicemente che il primo argomento è un valore di verità. Se la Messaggio il metodo non esiste nello spazio dei nomi jQuery, quindi falso sarà restituito, nel qual caso il test fallisce.
Seguendo il modello di sviluppo basato su test, questo codice sarebbe il primo passo. Dopo aver osservato che il test fallisce, il passo successivo sarebbe aggiungere il Messaggio metodo, di conseguenza.
Mentre, per brevità, questo articolo non approfondirà ulteriormente il processo di sviluppo basato su test in JavaScript, ti invitiamo a fare riferimento al repository GitHub per questo progetto per esaminare tutti i test per il plug-in: https: // github .com / JeffreyWay / MessageBox / blob / padrone / test / MessageBox_test.js
UN Messaggio metodo che non fa nulla non è di aiuto a nessuno! Prendiamo il messaggio fornito e mostriamolo all'utente. Tuttavia, piuttosto che incorporare un enorme glob di codice nel $ .message metodo, utilizzeremo invece semplicemente la funzione per istanziare e inizializzare a Messaggio oggetto.
(function ($) "use strict"; var Message = initialize: function (text) this.text = text; return this;; $ .message = function (text) // Richiede polyfill per IE8- - return Object.create (Message) .initialize (text);;) (jQuery);
Non solo questo approccio, di nuovo, rende il Messaggio oggetto più testabile, ma è anche una tecnica più pulita, che, tra le altre cose, protegge di nuovo l'inferno di callback. Pensa a questo Messaggio oggetto come la rappresentazione di una singola finestra di messaggio.
Se Messaggio rappresenta una singola casella di messaggio, quale sarà l'HTML per uno? Creiamo a div con una classe di casella dei messaggi, e renderlo disponibile al Messaggio esempio, tramite un EL proprietà.
var Message = initialize: function (text) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = testo; restituiscilo; ; Ora, l'oggetto ha un riferimento immediato al wrapping div per la finestra di messaggio. Per accedervi, potremmo fare:
var msg = Object.create (Message) .initialize (); // [â € Ricorda, ora abbiamo un frammento HTML, ma non è ancora stato inserito nel DOM. Ciò significa che non dobbiamo preoccuparci di eventuali reflussi inutili, quando aggiungiamo il contenuto al div.
Passaggio 5
Il prossimo passo è prendere la stringa di messaggio fornita e inserirla nel div. Questo è facile!
initialize: function (text) // ... this.el.html (this.text); // [â € â € <] Tuttavia, è improbabile che vorremmo inserire il testo direttamente nel div. Più realisticamente, la finestra di messaggio avrà un modello. Mentre potremmo lasciare che l'utente del plugin crei un modello e lo faccia riferimento, manteniamo le cose semplici e limitiamo il modello a Messaggio oggetto.
var Message = template: function (text, buttons) return [''+ testo +'
','', pulsanti,'' ].aderire("); //… ;
In situazioni, quando non hai altra scelta che annidare il codice HTML nel tuo JavaScript, un approccio popolare è quello di archiviare i frammenti HTML come elementi all'interno di un array e quindi unirli in un'unica stringa HTML.
In questo frammento sopra, il testo del messaggio viene ora inserito in un paragrafo con una classe di messaggio-box-text. Abbiamo anche impostato un posto per i pulsanti, che implementeremo a breve.
Ora il inizializzare il metodo può essere aggiornato a:
initialize: function (text) // ... this.el.html (this.template (text, buttons));
Quando viene attivato, costruiamo la struttura per la finestra di messaggio:
Ecco un messaggio importante.
Passaggio 6
Affinché la message box sia il più flessibile possibile, l'utente del plugin deve avere la possibilità di specificare, tra le altre cose, quali pulsanti devono essere presentati all'utente - come "Okay", "Annulla", "Sì , "ecc. Dovremmo essere in grado di aggiungere il seguente codice:
$ .message ('Sei sicuro?', button: ['Yes', 'Cancel']); ... e genera una finestra di messaggio con due pulsanti.
Per implementare questa funzionalità, aggiornare prima il file $ .message definizione.
$ .message = function (testo, impostazioni) var msg = Object.create (Message); msg.initialize (testo, impostazioni); return msg; ;
Ora il impostazioni oggetto sarà passato attraverso il inizializzare metodo. Aggiorniamolo.
initialize: function (text, settings) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = testo; this.settings = settings this.el.html (this.template (text, buttons)); Non male, ma cosa succede se l'utente del plugin non specifica alcuna impostazione? Considera sempre i vari modi in cui il tuo plugin può essere usato.
Passaggio 7
Supponiamo che l'utente del plugin descriva quali pulsanti presentare, ma, per essere sicuro, è importante fornire un set di valori predefiniti, che è una buona pratica quando si creano plug-in.
$ .message = function (testo, impostazioni) var msg = Object.create (Message); msg.initialize (testo, impostazioni); return msg; ; $ .message.defaults = icona: 'info', pulsanti: ['Okay'], callback: null;
Con questo approccio, se l'utente del plugin deve modificare i valori predefiniti, deve solo aggiornarlo $ .message.defaults, come necessario. Ricorda: non nascondere mai le impostazioni predefinite dall'utente. Rendili disponibili "all'esterno".
Qui, abbiamo impostato alcune impostazioni predefinite: l'icona, i pulsanti e una funzione di callback, che dovrebbe essere attivata, una volta che l'utente ha fatto clic su uno dei pulsanti nella finestra del messaggio.
jQuery offre un modo utile per sovrascrivere le opzioni predefinite per un plugin (o qualsiasi oggetto, in realtà), tramite la sua estendere metodo.
initialize: function (text, buttons) // ... this.settings = $ .extend (, $ .message.defaults, settings);
Con questa modifica, this.settings ora sarà uguale a un nuovo oggetto. Se l'utente del plugin specifica le impostazioni, sostituiranno quelle del plugin default oggetto.
Passaggio 8
Se intendiamo aggiungere un'icona personalizzata alla finestra del messaggio, a seconda dell'azione, sarà necessario aggiungere una classe CSS all'elemento e consentire all'utente di applicare un'immagine di sfondo, di conseguenza.
All'interno del inizializzare metodo, aggiungere:
this.el.addClass ('message-box-' + this.settings.icon); Se nessuna icona è specificata nel impostazioni oggetto, il valore predefinito, Informazioni, viene usato: .messaggio-box-info. Ora, possiamo offrire una varietà di classi CSS (oltre lo scopo di questo tutorial), contenenti varie icone per la finestra di messaggio. Ecco un paio di esempi per iniziare.
.message-box-info background: url (path / to / info / icon.png) no-repeat; .message-box-warning background: url (path / to / warning / icon.png) no-repeat;
Idealmente, come parte del tuo plugin MessageBox, dovresti includere un foglio di stile esterno che contiene lo stile di base per la finestra di messaggio, queste classi e una manciata di icone.
Passaggio 9
Il plug-in ora accetta una serie di pulsanti da applicare al modello, ma non abbiamo ancora scritto la funzionalità per rendere utilizzabili tali informazioni. Il primo passo consiste nel prendere una serie di valori dei pulsanti e tradurli negli input HTML necessari. Crea un nuovo metodo su Messaggio oggetto per gestire questa attività.
createButtons: function (buttons)
jQuery.map è un metodo utile che applica una funzione a ciascun elemento all'interno di un array e restituisce un nuovo array con le modifiche applicate. Questo è perfetto per i nostri bisogni. Per ogni elemento nell'array dei pulsanti, ad esempio ['Si No'], vogliamo sostituire il testo con un input HTML, con il valore impostato, di conseguenza.
createButtons: function (buttons) return $ .map (buttons, function (button) return ')'; ).aderire("); Quindi, aggiorna il inizializzare metodo per chiamare questo nuovo metodo.
initialize: function (text, settings) this.el = $ ('', ' class ':' message-box ',' style ':' display: none '); this.text = testo; this.settings = $ .extend (, $ .message.defaults, settings); var buttons = this.createButtons (this.settings.buttons); this.el.html (this.template (text, buttons)); restituiscilo;
Passaggio 10
A cosa serve un pulsante, se non succede nulla quando l'utente fa clic su di esso? Un buon posto per archiviare tutti gli ascoltatori di eventi per una vista è all'interno di uno speciale eventi metodo sull'oggetto associato, come questo:
initialize: function () // ... this.el.html (this.template (text, buttons)); this.events (); , events: function () var self = this; this.el.find ('input'). on ('click', function () self.close (); if (typeof self.settings.callback === 'function') self.settings.callback.call (self, $ (this) .val ());); Questo codice è leggermente più complesso, poiché l'utente del plugin deve avere la possibilità di attivare la propria funzione di callback, quando si fa clic su un pulsante nella finestra del messaggio. Il codice determina semplicemente se a richiama la funzione è stata registrata e, in tal caso, la attiva e invia il valore del pulsante selezionato. Immagina che una finestra di messaggio offra due pulsanti: "Accetta" e "Annulla". L'utente del plugin deve avere un modo per catturare il valore del pulsante cliccato e rispondere di conseguenza.
Nota dove chiamiamo self.close ()? Questo metodo, che deve ancora essere creato, è responsabile di una cosa: chiudere e rimuovere la finestra del messaggio dal DOM.
close: function () this.el.animate (top: 0, opacity: 'hide', 150, function () $ (this) .remove (););
Per aggiungere un po 'di fascino, nascondendo la finestra del messaggio, nel corso di 150 millisecondi, svaniamo la casella e la spostiamo verso l'alto.
Passaggio 11
La funzionalità è stata implementata! Il passaggio finale è presentare la finestra di messaggio all'utente. Aggiungeremo un ultimo mostrare metodo sul Messaggio oggetto, che inserirà la finestra di messaggio nel DOM e la posizionerà.
show: function () this.el.appendTo ('body'). animate (top: $ (window) .height () / 2 - this.el.outerHeight () / 2, opacity: 'show', 300); Basta un semplice calcolo per posizionare la scatola verticalmente al centro della finestra del browser. Con quello sul posto, il plugin è completo!
$ .message = function (testo, impostazioni) var msg = Object.create (Message) .initialize (testo, impostazioni); msg.show (); return msg; ;
Passaggio 12
Per usare il tuo nuovo plugin, chiama semplicemente $ .Message (), e passa attraverso un messaggio e tutte le impostazioni applicabili, in questo modo:
$ .message ('La riga è stata aggiornata.'); 
Oppure, per chiedere conferma per qualche azione distruttiva:
$ .message ('Vuoi veramente cancellare questo record?', button: ['Yes', 'Cancel'], icona: 'alert', callback: function (buttonText) if (buttonText === 'Sì ') // continua e cancella record); 
Pensieri di chiusura
Per ulteriori informazioni sullo sviluppo di jQuery, sei invitato a fare riferimento al mio corso su questo sito, "30 giorni per imparare jQuery".
Nel corso della costruzione di questo campione Casella dei messaggi plugin, sono emerse varie best practice, come evitare l'inferno del callback, scrivere codice testabile, rendere disponibili le opzioni predefinite all'utente del plugin e assicurarsi che ogni metodo sia responsabile di esattamente una attività.
Mentre si potrebbe certamente ottenere lo stesso effetto incorporando innumerevoli funzioni di callback all'interno $ .message, farlo è raramente una buona idea ed è persino considerato un anti-modello.
Ricorda le tre chiavi per il codice mantenibile e i plugin e gli script jQuery flessibili:
- Potrei provare questo? In caso contrario, refactoring e dividere il codice in blocchi.
- Ho offerto la possibilità di sovrascrivere le mie impostazioni predefinite?
- Sto seguendo le cattive pratiche o facendo supposizioni?
Per ulteriori informazioni sullo sviluppo di jQuery, sei invitato a fare riferimento al mio corso di screencast su questo sito, "30 giorni per imparare jQuery".
