Structurer le javascript

[Ernestine]

Bonjour,

Ces derniers temps, je me demande quelle est la bonne façon de structurer le javascript dans un site web "full ajax" entre guillemets, c'est à dire un site où on ne recharge que des parties de page.

Supposons que j'ai un layout général, et dans ce layout j'ai une région #main dont le contenu va changer en fonction des clics de l'utilisateur. Au premier chargement, la région #main va contenir par exemple une vue A. L'utilisateur clique quelque part, et en Ajax on charge une vue B qui vient prendre la place de la vue A. Je reclique ailleurs, une vue C vient se placer et ainsi de suite.

Jusque là rien de sorcier. Mais la plupart du temps, chaque vue a elle aussi besoin de son propre javascript. Par exemple la vue A contiendra un slideshow, sur la vue B on aura un widget qui affiche la météo, sur la vue C on aura je ne sais quoi. Jusqu'à présent, je charge la totalité des "class" javascript nécessaires dès le premier chargement. Chaque class contient une fonction init() : quand une vue est chargée, j'appelle la fonction init() adéquate. On pourrait aussi charger le javascript adéquat en même temps que la vue.

Donc déjà, avec ce système, la question est toujours de savoir : j'exécute quelle class javascript en fonction de la vue ? Au moment où la vue A est chargée, il faut appeler la fonction init() de la class slideshow. Au moment où la vue B est chargée, il faut appeler la fonction init() de la class Meteo. Et éventuellement déclencher d'autres fonctions, au cas par cas. Mais savoir quelle fonction appeler de quelle class, ça ne se fait pas automatiquement : encore faut-il appeler la bonne fonction de la bonne class. Ce que je fais actuellement, c'est que je déclare le type de vue dans un champ input hidden dans le html de la vue, et quand la vue est chargée, je lis la valeur de cet input et j'exécute le javascript correspondant. Mais cette méthode me semble un peu mauvaise, c'est plein de switch/case illisibles.

Et là où ça se complique encore, c'est quand il y a des dépendances entre les différents objets. Par exemple, on peut supposer que j'ai un objet javascript commun à l'ensemble du site. Disons que cet objet, par exemple, possède une fonction qui modifie l'image de background. Et cet objet peut avoir des interactions avec les objets spécifiques à telle ou telle vue. Par exemple sur la vue qui contient le slideshow, on peut imaginer qu'un clic sur le slideshow déclenche la fonction qui modifie le background du layout. Du coup je me retrouve avec tout un tas de références entre les objets, objets qui apparaissent / disparaissent au fur et à mesure que l'utilisateur passe d'une vue à l'autre (sauf l'objet de base bien sûr qui lui persiste tout au long de la navigation), c'est un peu nul.

Et pour couronner le tout, l'arborescence peut tout à fait être constituée de plusieurs niveaux de profondeur, et là ça devient ingérable.

Voila. Je sens que mes pages web commencent à tourner à l'usine à gaz, alors je cherche une bonne méthode pour organiser / structurer le code javascript. Voila pourquoi j'en appelle aux experts du Hub. Auriez-vous des recommandations, des bonnes pratiques ?