« »
12/28/2007

Le Javascript non intrusif

J'ai longtemps inséré le code Javascript directement dans mes pages, jusqu'à m'apercevoir que sans Javascript, la navigation sur mes sites étaient impossible.

J'ai donc mis en place des systèmes permettant de naviguer sur le site avec, et sans Javascript. Cependant, il me restait encore une étape à franchir : mettre en place du Javascript non intrusif.

Pour ceux qui ne le savent pas encore, la méthode du Javascript non intrusif, consiste à ne pas insérer directement dans le code html les référence à Javascript, comme par exemple : "onclick, onmouseover". Le but étant de garder du code html propre. L'insertion de ces évènements se fait une fois la page chargée avec par exemple la propriété ondomready.

Cela permet d'une part une meilleur visibilité, on se repère plus facilement dans son code, et cela instaure une profonde séparation entre le contenu (xhtml/html), la mise en forme du contenu (css), et l'animation du contenu (Javascript).

Si j'écris ce post c'est parce qu'il y a quelques heures, une idée m'est venue permettant de résoudre bien des problèmes.

Explication de la méthode :
  • Nous avons un style "style.css" inclut dans le head
  • Une page index.php, contenant toutes les pages sur site via un include
  • En bas de cette page nous avons un appel vers un script "script.js.php?p=&p2=&opt="
La solution consiste à modifier le contenu de script.js.php en fonction des variables passées en paramètre.

Avantage :
  • Une seule page de script à modifier (on peut utiliser des includes dans le script.js.php pour alléger le tout)
  • Cohésion des évènements Javascript sur l'ensemble des pages : il est possible d'affecter une portion du script à toutes les pages, puis de traiter chaque page au cas par cas
Inconvénient :
  • Pas (ou peu) de mise en cache par le navigateur, le contenu change souvent

Le projet actuel (intranet/extranet du association de Tennis de Table) sur lequel je travail est trop avancé pour appliquer ce genre de modification, mais mon prochain projet (site d'e-commerce dans la vente en ligne de matériel de glisse : roller, snowboard, surf etc...) aura ce genre d'architecture. Je suis pressé de voir ce que cela va donner.
« »
 
 
Made with on a hot august night.
http://bit.ly/1II1u5L