Définition asynchrone de
modules JavaScript avec
IDenpendOnYou ❤

La plupart des assets JavaScript et CSS de mes applications sont généralement liés à des classes PHP utilisées pour générer des éléments HTML. Par exemple la classe AdjustImage ajoutera au document ses assets JavaScript et CSS (e.g. « adjust-image.js » et 'adjust-image.css ») lorsqu'une de ses instances est transformée en chaine de caractères. Il n'est pas inhabituel que des assets JavaScript dépendent les un des autres. Par exemple, comme AdjustImage hérite de AdjustNode du côté PHP, AdjustImage hérite également de AdjustNode du côté JavaScript. Malheureusement il arrive parfois que l'ordre dans lequel les assets sont collectés crée des problèmes de dépendances. Afin de résoudre ce problème, j'ai voulu adopter le paradigme AMD.

AMD, RequireJS et DOM

L'API de Définition Asynchrone de Modules (AMD) spécifie un mécanisme pour définir des modules de façon à ce qu'un module et ses dépendances puissent être chargés de façon asynchrone. RequireJS est une de ces implémentations les plus abouties. Malheureusement elle ne répond pas à mes attentes.

Considérons le code suivant:

define('one', [], function() {

    alert('here0')

    return 'one'

})

define('two', [ 'one' ], function(one) {

    alert('here1')

    return 'two'

})

require([ 'two' ], function(two) {

    alert('here2')

})

document.addEventListener('DOMContentLoaded', function() {

    alert('here3')

})

On peut voir ceci :

  • La première déclaration définit « one ».
  • La deuxième déclaration définit « two » qui dépend de « one ».
  • La troisième déclaration requiert « two ».
  • Enfin, la quatrième déclaration affiche l'alerte « here3 » lorsque le DOM est chargé.

Comme les dépendances sont déjà définies lorsqu'on en a besoin, je m'attendais à ce que les alertes me sautent au visage tels des écureuils farceurs dans l'ordre « here0 », « here1 », « here2 » et « here3 ». Comme vous pouvez le voir sur cette démonstration en ligne, il n'en est rien :

http://jsfiddle.net/olvlvl/z9jPn/

RequireJS ne résoud les dépendances que lorsque le DOM est chargé, et non pas lorsque les dépendances sont définies ou requises. Ce fonctionnement rend RequireJS inutilisable avec Brickrouge, puisque ce dernier utilise également cet évènement pour construire les éléments personnalisés, et comme la fonction de rappel de Brickrouge est appelée avant celle de RequireJS, les constructeurs utilisant le système AMD ne sont pas encore définis lorsque les éléments personnalisés sont construits.

J'ai discuté de cela avec l'auteur de RequireJS sans succès. C'est pourquoi j'ai décidé de créer ma propre implémentation.

IDenpendOnYou ❤

IDenpendOnYou est une approche très dépouillée du paradigme AMD, puisqu'elle se contente de résoudre les dépendances entre ce qui est défini et ce qui est requis, sans aller chercher quoi que ce soit sur le serveur, et sans faire de manipulation incroyable de code JavaScript.

Avec IDenpendOnYou, les dépendances sont résolues au fur et à mesure qu'elles sont définies et requises, sans attendre le moindre évènement. C'est tout simple. Ça tient dans 1ko une fois compressé avec UglifyJS. Et ça marche !

http://jsfiddle.net/olvlvl/szJzL/

Conclusion

IDenpendOnYou n'est pas une solution étourdissante de remplacement de RequireJS, mais si comme moi vous utilisez un système pour collecter et agréger vos assets JavaScript et que vous avez besoin d'une solution simple pour résoudre les dépendances entre vos modules, elle peut vous intéresser.

Laisser un commentaire

Pas de commentaire