JavaScript  »  Articoli  »  Mondo Javascript 

Questa è la traduzione dell'articolo The seven rules of Unobtrusive JavaScript di Christian Heilmann. Come l'originale, è pubblicato e distribuito su HTML.it con una Licenza Creative Commons.

Negli ultimi anni, sviluppando, insegnando e implementando un linguaggio come Javascript, ho elaborato le regole che seguono a proposito del Javascript non intrusivo. Nello specifico, quella che segue è la traccia di un intervento che ho tenuto nel corso di un workshop per la conferenza Paris Web 2007 tenutasi a Parigi.

Spero che possano aiutarvi a comprendere perché è una buona idea pianificare e implementare Javascript in maniera non intrusiva. Questo modo di procedere mi ha aiutato a rilasciare i miei lavori più velocemente, con una qualità più elevata e con una maggiore facilità nella manutenzione del codice.

1. Non fate supposizioni

Probabilmente la più importante caratteristica del Javascript non intrusivo è che ti fa smettere di fare supposizioni:

• Non devi supporre e aspettarti che Javascript sia disponibile; piuttosto va implementato come se fosse un'utile aggiunta.
• Non devi aspettarti che i browser supportino certi metodi o certe proprietà: devi testarle prima di renderle disponibili.
• Non devi aspettarti che l'HTML corretto sia a tua disposizione, ma verifichi che lo sia e se non lo è non fai nulla.
• Mantieni le funzionalità che implementi indipendenti dal dispositivo con cui si accede al sito.
• Valuti che altri script possono interferire con queste funzionalità e rendi quanto più sicuro possibile lo scopo dei tuoi script.

La prima cosa da considerare prima di iniziare a progettare uno script è studiare bene la parte HTML che si intende attivare e verificare cosa si può usare per raggiungere l'obiettivo che ci siamo prefissi.

2. Trovare agganci e relazioni

Prima di lavorare su uno script bisogna guardare alla base da cui si parte. Se l'HTML non è ben strutturato non c'è un modo facile per creare una buona soluzione di scripting. Molto probabilmente, o si creerà troppo markup con Javascript, o l'applicazione dipenderà troppo da Javascript.

Ci sono diverse cose da considerare nel markup HTML. Le prime due sono agganci e relazioni.

Agganci nell'HTML

Gli agganci nel contesto del codice HTML sono innanzitutto gli ID degli elementi. Ad essi si può accedere tramite il più veloce dei metodi DOM, getElementById. Gli ID sono un eccellente e sicuro punto d'appoggio fin quando sono definiti in maniera univoca all'interno di un documento HTML valido (IE ha un bug relativo agli attributi name e id, ma le migliori librerie Javascript riescono a superarlo). Inoltre, gli ID sono facili da testare.

Altri agganci sono gli elementi HTML che possono essere intercettati tramite il metodo getElementsByTagName e le classi CSS. Queste ultime non possono essere intercettate con un metodo DOM nativo in tutti i browser, ma ci sono molti metodi alternativi per che consentono di sfruttare getElementsByClassName.

Relazioni nell'HTML

L'altra cosa interessante rispetto all'HTML è la presenza di relazioni nel contesto del markup. Ci si potrebbe porre queste domande:

• Come posso raggiungere questo elemento nel modo più veloce e con meno passi nell'attraversamento del DOM?
• Su quale elemento ho bisogno di intervenire per raggiungere facilmente gli elementi figli che devo cambiare?
• Quali attributi o informazioni possiede un certo elemento che possa sfruttare per collegarlo ad un altro?

Attraversare il DOM ha dei costi e può essere un'operazione lenta. Ecco perché è una buona idea lasciarlo ad una tecnologia che è già in uso sul browser.

3. Lasciare l'attraversamento del DOM agli 'esperti'

È una cosa piuttosto interessante che lo scripting del DOM e l'attraversamento dello stesso DOM con i suoi metodi e proprietà (getElementsByTagName, nextSibling, previousSibling, parentNode, etc) sembri essere motivo di confusione per diverse persone. È interessante dal momento che in fondo facciamo la stessa cosa con un'altra tecnologia: i CSS.

I CSS sono una tecnologia che prende un selettore CSS e attraversa il DOM per accedere ad uno specifico elemento e cambiarne le sue caratteristiche visuali. Una porzione di Javascript piuttosto complessa può essere facilmente essere sostituita con un solo selettore CSS.

è la stessa cosa di

Altri articoli

Altre guide

Altre newsletter