Bonnes pratiques Javascript: Le code non intrusif

La récente découverte de l'excellent framework Javascript Mootools et l'exploration qui en à suivi à été pour moi une bonne aubaine pour me rappeller de la technique du Javascript non intrusif et de mieux la mettre en pratique. Cette technique, similaire dans l'esprit au couple XHTML/CSS, consiste à séparer le code javascript de la page HTML.

JS non intrusif, pourquoi?

On raconte depuis des lustres qu'environ 10% des internautes n'ont pas Javascript activé sur leur browser. Bien qu'à l'ère "Web 2.0", cela puisse sembler un brin surréaliste, de récentes études prouvent que c'est toujours le cas. Entre l'administrateur réseau qui à désactivé JS par peur de problèmes récurrents au couple Internet Explorer/ActiveX, au particulier mal informé qui l'a désactivé par peur de choper un virus, les raisons ne manquent pas pour prendre en compte ces utilisateurs qui n'ont pas de javascript actif sur leur poste.

Comme je l'ai dit plus haut, le principe du Javascript non intrusif est de séparer totalement le code JS du co,ntenu de la page, à savoir le code (x)html. Cette pratique possède plusieurs avantages:
Déja, pour le développeur, celà rendra le code plus maintenable, ensuite, pour l'utilisateur, si celui-ci n'a pas Javascript activé, il pourra toujours naviguer dans le site.

Mise en pratique

Supposons que dans le footer de notre page, nous souhaitons ajouter un lien intitulé "haut de page" qui permet à l'utilisateur, comme son nom l'indique de remonter en haut de la page sans avoir à scroller pendant 3 minutes.
On aurait tendance à penser d'abord à ça:

<a href="javascript:scrollTop();">haut de page</a>

ou encore:

<a href="#top" onclick="scrollTop();">haut de page</a>

Même si le deuxième exemple est meilleur que le premier, l'un comme l'autre incluent du code Javascript dans le html. A ce stade, la question que vous vous posez probablement –du moins si vous n'avez jamais pratiqué cette technique pour le moment– est: "Mais comment ne pas inclure une seule ligne de Javascript dans mon HTML?"

Il suffit de prendre un fichier js externe, dans lequel vous regrouperez toutes vos fonctions, et d'utiliser un gestionnaire d'évenements.
Pour reprendre l'exemple vu plus haut, mais de manière non intrusive cette fois, cela nous donnera:

<a href="#top" id="scrolltop">haut de page</a>

Cette fois-ci, notre lien ne comporte aucun Javascript, et restera fonctionnel même si l'utilisateur n'a pas de Javascript activé.

Coté Javascript, celà nous donnera:

function attacherAction() {
   if (document.getElementById) {
       if (document.getElementById('scrolltop')) {
           leLien = document.getElementById('scrolltop');
           leLien.onclick = function() {
               maFonction(this);
           }
       }
   }
}
addLoadEvent(attacherAction);

Le principe est simple: On va utiliser la fonction addLoadEvent() de Simon Willison pour "attacher" la fonction attacherAction(). Dans cette fonction, nous récupererons le lien via son id, et nous lui appliqueront alors la fonction désirée.

La fonction addLoadEvent() en détail:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

A la vue de ce dernier exemple, on est en droit de douter de l'intêret immédiat de cette pratique vu le nombre de lignes de code supplémentaire que celà occasionne par comparaison au tout premier exemple. Toutefois, il est rare de n'utiliser qu'une seule et unique action Javascript dans une page. Une fois que vous avez écrit la fonction attacherAction(), vous pouvez rajouter autant d'actions que nécessaire.

Avec Mootools

La plupart (tous??) des frameworks Javascript disponibles à l'heure actuelle proposent des fonctions maison qui vous permettrons de créer facilement du code non intrusif.

J'en avais déja parlé dans un précedent article, Mootools propose une fonction très interessante, window.addEvent(). Cette méthode permet d'éxecuter le script dès que l’arbre dom est chargé sans devoir attendre le chargement des images de la page.

window.addEvent('domready', function() {
// Votre code Mootools
});