Organisation des contenus et fichiers css javascript

Bonjour

Comment doit s organiser le contenu css et javascript par rapport aux composants qui composent les differentes pages .

pages : composants
home : menu breadcrumbs
contact : menu breadcrumb , contact ,google map
rendez vous : menu breadcrumb , date picker .... : ............

Chaque composant a ses prorpes selecteurs css et javascript .

1) Si la page par defaut du site ( home) est déja chargé et on va vers la page contact ; est il possible de ne charger les nouveau contenu css et js images et donc les fichiers spécifiques que pour les composants nouveaux ( contact et google map ) .

2) Dans le cas de la page Rendez vous ayant un date picker; ce composant test dynamique . Est il possible de ne charger le css et js pour ce se composant que si on active l'apparition du date picker ( et pas le chargement de la page) ?

3) pour organiser ses scripts , quel est l intéret de créer des contextes differents entre les pages ?



En css , il y a les preprocesseurs ( compass avec prepros) .Mais en javascript quels outils sont équivalents , utiles ? grunt ? et require.js ?

Merci pour tous liens informations sur l organisation / architecture javascript pour un site web contenant différents composants sur différentes pages .
Modifié par 75lionel (22 May 2015 - 22:45)

Bonjour,

Ce que vous présentez ici est une problématique d'optimisation, et en matière d'optimisation css il vaux bien mieux regrouper tous vos styles dans un seul fichier CSS que de les diffracter et les appeler à la demande (à moins qu'il s'agisse d'un style très spécifique comportant des centaines de lignes de code). En effet, l'allègement que vous recherchez serait négligeable en comparaison des requêtes http supplémentaires induites par l'appel à des fichiers distinctes.

Idem pour le javascript. Si le fichier est vraiment lourd et spécifique vous pouvez toujours le faire appeler par un autre script, avec une commande telle que $.getScript() pour jQuery par exemple.

a écrit :
En css , il y a les preprocesseurs ( compass avec prepros) .Mais en javascript quels outils sont équivalents , utiles ? grunt ? et require.js ?

Grunt sert autant pour le pour le javascript que pour les CSS, en utilisation post-processeur par exemple...