comment organiser un peu de javascript dans un grand site php

Question

Je travaille sur un grand CMS php mysql. J'ai fait un travail décent en organisant mon code côté serveur avec des includes, des objets, etc. Maintenant que j'ai commencé à améliorer le front-end avec des choses comme la validation de formulaire et les curseurs d'image, je commence à accumuler un fouillis de petites fonctions javascript/jquery. La plupart d'entre elles font moins de 5 lignes et ne sont utilisées que sur une page chacune.

Est-ce que ce n'est pas une bonne pratique ou est-ce que c'est une perte de temps de mettre tous ces éléments dans un fichier functions.js, de l'inclure dans mon en-tête puis d'appeler myJavaScriptFunction() dans la page où j'en ai besoin ? Si oui, quelle est la meilleure approche ?

Answer 1

Est-ce que ce n'est pas une bonne pratique ou une folie de mettre tous ces éléments dans un fichier functions.js, de l'inclure dans mon en-tête, puis d'appeler myJavaScriptFunction() dans la page où j'en ai besoin ?

Cela pourrait fonctionner, mais faites attention à ne pas charger une grande quantité de fonctions inutiles dans chaque page. Par exemple, si vous avez 30 fonctions Javascript liées à la manipulation d'une carte Google et que vous n'avez qu'une seule page qui traite de l'API Google Maps, vous perdrez beaucoup de temps à charger ces fonctions inutiles si vous les incluez dans chaque page.

Answer 2

S'ils ne sont utilisés que sur une page, pourquoi les mettre dans un fichier universel. C'est le bon moment pour peser le pour et le contre.

Pour :

1. Le navigateur met en cache le fichier javascript, la première demande de page est légèrement plus lente, toutes les suivantes sont légèrement plus rapides.
2. HTML un peu plus simple, car le javascript est conservé dans un fichier séparé.
3. Fichier séparé, donc coloration syntaxique !

Cons :

1. Une tonne de code javascript inutile est chargée à chaque fois que vous chargez une page

Pour moi, il semble que c'est quelque chose que vous ne devriez pas faire, mais cela dépend vraiment de la taille de votre code JavaScript, et de la facilité avec laquelle il est possible de mettre un <script> dans votre head .