Buone pratiche nella scrittura del codice jQuery

Le buone pratiche di scrittura del codice JavaScript si applicano anche a jQuery, sebbene con alcune differenze specifiche. Scopo di questo post è quello di evidenziare alcune pratiche raccomandate che semplificano di molto il nostro lavoro.

Catena dei selettori

Quando la catena dei selettori (selector chain) supera una certa lunghezza, andrebbe suddivisa su più righe, in questo modo:

$('#test').addClass('test').
          animate({
             left: 10
          }, 1000, 'linear').
          find('p[class]').
          bind('click', function() {
              $(this).parent().
              toggleClass('test');
          });

Ancora meglio sarebbe suddividere le varie azioni in blocchi distinti in modo da evitare di avere troppe routine in uno stesso blocco.

Separare il codice jQuery dalla marcatura

Il codice jQuery non andrebbe mai abbinato alla marcatura utilizzando la notazione in stile DOM Level 0:

<a href="#" onclick="$(this).fadeOut(1000);">...</a>

Creare una sandbox attorno ai plugin

I plugin andrebbero scritti usando questo pattern di base:

;(function($) {
    $.fn.plugin = function() {
        // codice del plugin. ; può essere omesso se siamo sicuri che il codice che precede il plugin
        // termini correttamente con il token ;
    };
})(jQuery);

Se non si crea una sandbox intorno al plugin potrebbero sorgere dei problemi in quei sistemi (come WordPress) in cui il namespacing è fondamentale.

Usare un solo evento ready()

L'evento .ready() non dovrebbe essere mai duplicato, come spesso accade su alcuni CMS quando si utilizzano plugin. jQuery infatti considera questo evento come un unico evento, quindi ogni chiamata all'interno del blocco dell'evento viene eseguita in sequenza.

Questo problema si pone quando abbiamo diversi elementi script caricati nel body della pagina. I browser elaborano questi blocchi insieme alla marcatura, ma ogni volta devono rieseguire lo stesso lookup per ogni blocco .ready(). Quindi si consiglia di usare questo evento una sola volta.

Usare gli oggetti

In molti temi di WordPress e su molti siti il codice jQuery viene definito come una sequenza molto lunga di procedure e funzioni che vengono create direttamente all'interno dell'evento .ready().

Questa pratica porta ad avere un codice ingestibile e alla lunga soggetto a problemi. In realtà  si possono usare gli oggetti in questo modo:

var APP = {
    // metodi e proprietà 
    init: function() {
       // inizializzazione
    }
};
$(function() {
    APP.init();
});

Se usiamo un IDE JavaScript, utilizzando gli oggetti possiamo facilmente navigare tra i metodi e le proprietà  dell'oggetto APP invece che avventurarci in un find disperato usando le funzionalità  di ricerca testuale del nostro editor.