Chargement conditionnel de vos scripts Javascript avec yenotype.js

Easy script yep nope

Yenotype va nous permettre d’alléger les JavaScript chargé dans nos pages afin de ne charger que l’essentiel c’est-à-dire il permettra de charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non sur le navigateur concerné.

Mais pour tester si une fonctionnalité est disponible ou non, il faudrait combiner Yenotype avec Modernizr.js, pour rappel Modernizr n’ajoute en rien de nouvelles fonctionnalités aux différents navigateurs.
Ce qu’il fait en revanche c’est d’indiquer si oui ou non un navigateur prend en charge la fonctionnalité utilisée. ( voir ici un article sur Modernizr sur notre blog )

Idéalement Yenotype est utilisé pour charger un Polyfill. Un Polyfill est une fonction (généralement en Javascript) qui émule une fonctionnalité pour les navigateurs ne la prenant pas en charge.

Grâce à combinaison Modernizr et yepnope.js, il est possible pour nous nous d’expérimenter de nouvelles fonctionnalités avec le CSS3 et le HTML5 sans pour autant sacrifier les anciens navigateurs.

Exemple avec la géolocalisation

Si le navigateur prend en charge la géolocalisation, nous chargeons le script general.js, sinon, nous chargeons les deux scripts passés en paramètres.

Si vous voulez aller plus loin voir la ressource en anglais : http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Répondre