Passare parametri ad un JavaScript in modo flessibile

Questo articolo è stato ispirato leggendo un articolo in inglese di Mihai Bazon che ho trovato come demo installando HTMLarea (un editor online per l'HTML). Se foste interessati l'articolo originale è anche consultabile qui.

La situazione

Abbiamo un sito composto da varie pagien HTML che includono tutte lo stesso JavaScript globale (che a sua volta può includerne altri), il tutto secondo la filosofia dello Unobtrusive Javascript.
Se vogliamo mantenere questa situazione dobbiamo anche prevedere un meccanismo per attivare dei JavaScript customizzati per le singole pagine, senza attivarli per tutto il sito.
Per esempio, l'autore dell'articolo si è trovato nella necessità di invocare un javaScript per generare l'indice del contenuto di un'unica pagina del sito, senza invocare espressamente un JavaScript nella pagina.

L'idea

La prima soluzione che ci viene in mente è di abbandonare momentaneamente la filosofia dello Unobtrusive Javascript per fare tutto a mano, come agli "sporchi" bei vecchi tempi... ma non è l'unico modo.

Una soluzione molto più elegante consiste nell'utilizzare il DOM della pagina come parametro del JavaScript ed invocare le varie funzionalità JavaScript quando necessario.
In dettaglio utilizziamo i tag <div> come parametro, l'attributo id di questo come nome del parametro e il contenuto del tag stesso (a condizione che sia un commento, per previre il parsing da parte del browser) come valore dell'opzione.
In alternativa avremmo potuto usare l'attributo class, ma non è una soluzione molto elegante, anche se è stata adottata in alcuni contesti.

La realizzazione

La cosa è più semplice di quello che sembra e con un esempio spero di chiarire il tutto.

Il primo componente è il DIV:

<div id="pname"><!-- Value of pname --></div>

Il secondo componente è un JavaScript di questo tipo:

var element = getElementById("pname");
if (element.firstChild && element.firstChild.nodeType == 8) {
    var parameters = element.firstChild.data;
    /* adesso "parameters" contiente la stringa "Value of pname" */
}

Nota che abbiamo usato il valore numerico "8" per il nodeType anziché "Node.COMMENT_NODE" perché IE6 pare non supportarlo.

Alternativa: attributo personalizzato

Sempre volendo mantenere questa filosofia, possiamo adottare una soluzione simile, che però non utilizza il commento contenuto nel DIV, ma un suo speciale attributo creato ad hoc per questo scopo, il cui nome corrisponde al nome dell'opzione che vogliamo impostare e il cui valore corrisponde al valore dell'opzione.

Il div a questo punto diventa:

<div id="option_id" myns:pname="Value of pname"></div>

dove myns è un nostro namespace customizzato (il nome l'ho scelto a caso) e dev'essere definito da qualche parte, per esempio:

<head xmlns:my="http://pinco.pallo.net/pippo/pluto">

Ulteriori trattazioni

Potete trovare ulteriori discussioni in merito in vari posti:

http://www.bazon.net/mishoo/articles.epl?art_id=246: L'articolo di Mishoo Bazon che mi ha ispirato originariamente, con relativi commenti
JavaScript Triggers di Peter-Paul Koch: Questo articolo affronta tematiche molto simili a quelle riportate qui, concentrandosi però sul come utilizzare attributi "custom" per ottenere lo stesso effetto.
Come compendio a questo articolo, è necessario anche leggere Validating a Custom DTD di J. David Eisenberg che spiega come validare il DTD che ci siamo dovuti creare per utilizzare degli attributi "custom" e avere nel contempo una pagina valida.

Aggiungi a:

Menu