Structurez votre Javascript avec Dojo

Décembre 2016

Vous connaissez déjà Javascript et l'utilisez pour animer certaines parties de votre site, mais cela manque de structuration. Vos fonctions JavaScript se baladent dans des balises <script> disposées un peu partout et vous aimeriez mettre de l'ordre dans tout ça ? Dojo est fait pour vous.


Introduction


Dojo est un Framework (kit de composants logiciels) JavaScript vivant un peu dans l'ombre du très connu JQuery, mais il a pourtant son lot de bonnes choses. Facile à installer et très léger, il permet d'organiser votre Javascript en classes composées, en toute logique, d'attributs et de méthodes. Vous pouvez ainsi utiliser les notions d'héritage et les inclusions de classes les unes dans les autres.

Mais ce n'est pas tout : avec Dojo est fourni un autre Framework : "Dijit". Ce dernier contient entre autres de nombreux outils graphiques entièrement codés comme des calendriers, des fenêtres en fondu ou encore des "displayers" permettant d'organiser facilement votre site en onglets (par exemple). Un displayer est un objet graphique.

Bref, Dojo est puissant et il est difficile d'aborder toutes ses possibilités à la première utilisation !
Ci-dessous se trouvent les bases vous permettant de l'installer sur votre site et de profiter de l'organisation de votre code en classes.

Parce que les sites entièrement en Javascript, ça peut exister et c'est très sympa aussi ! :-)

Installation de Dojo


L'installation de Dojo se fait en trois étapes assez courantes : téléchargement, inclusion dans le site et chargement lors de l'ouverture du site.

Téléchargement de Dojo


Le meilleur moyen d'obtenir Dojo est d'aller directement sur le site officiel du framework, à savoir ici : http://dojotoolkit.org/download/ et de prendre la dernière version stable.

Installation de Dojo


Une fois téléchargé, vous avez face à vous trois dossiers : "dojo" ; "dijit" et "dojox" (ce dernier est en fait une extension du framework de base). Rien de plus simple pour l'installation : copier ces trois dossiers à la racine de votre site (ou dans un sous-dossier si cela vous fait plaisir, évidemment).

Chargement au démarrage du site


Dernière étape, la plus importante : demander au navigateur de l'internaute de charger le framework lors du chargement du site. Pour cela, on utilise une technique similaire au chargement d'une source CSS : on place une balise source dans le "head" :
<head>    
   <script src=\"../../dojo/dojo.js\" type=\"text/javascript\"></script>    
</head>    

Dans cette ligne, "dojo.js" est la page Javascript principale du framework. N'oubliez pas de modifier le chemin du dossier dojo en fonction de son positionnement dans votre arborescence de site !

Voilà ! Dojo est désormais prêt à fonctionner sur votre site !

Utilisation de Dojo


Bon, c'est bien beau tout ça, mais cela vous fait une belle jambe d'avoir Dojo qui se charge. Qu'en fait-on maintenant de ce framework ?

La méthode addOnLoad


Voici la méthode pilier de Dojo : la méthode dojo.addOnLoad(). Cette méthode est appelée au chargement du site. Il existe de même une méthode dojo.addOnUnload() appelée cette fois-ci à la fermeture du site. Concrètement, il vous suffit de placer dans la page d'accueil de votre site un script JS appelant cette méthode :

<script type="text/javascript">    
   dojo.addOnLoad(    
      function() {    
       // Placez ici le code lancé au chargement de votre site    
      }    
   );    
</script>    

La classe "Application"


Mais vous n'allez, bien sûr, pas placer l'intégralité de votre code source JS ici, cela ne serait d'aucun intérêt par rapport à la méthode "sans Dojo" ! Pour cela, je vous dévoile une astuce que j'utilise : la classe "Application". Concrètement, cette classe s'occupe de charger toutes les autres classes du site, et possède comme attributs les paramètres par défaut de votre site, s'il en a (exemple pour un blog : le nombre d'articles par page de base, le style par défaut, etc...).

Création d'une classe Javascript


Nous allons voir ici la création d'une classe Javascript via Dojo, en l'illustrant par la création de notre classe "Application". Commencez par créer un fichier "Application.js". Pour illustrer, nous allons faire comme si cette classe se trouvait à la racine du site, dans le dossier "monsite", puis dans le sous dossier "javascript", soit ici : /monsite/javascript/.

Étudions la création de classe JS via un exemple :
dojo.provide('monsite.javascript.Application');    

dojo.declare('monsite.javascript.Application', null, {    
   monPremierArgument: null,    
   monSecondArgument: null,    

   constructor: function(param1, param2) {    
      monPremierArgument = param1;    
      // Code du constructeur de la classe.    
   },    

   methode1: function(param){    
   },    

   methode2: function(){    
   }    
});    


On remarque ici plusieurs choses :
  • Appel de la fonction dojo.provide avec comme paramètre le chemin du fichier classe. Cela permet à Dojo de "savoir" que cette classe Application existe.
  • Appel de la fonction dojo.declare dans laquelle se trouve tout le code de la classe Application. Cette méthode prend trois paramètres :
    • le chemin de la classe
    • un booleen signifiant, grosso-modo, "ignorer les erreurs lors du chargement", que je vous conseille de laisser à "true" car il y en a souvent, et une erreur bloque tout le chargement du Javascript de votre site !
    • le contenu de la classe en question, à savoir dans l'ordre :
      • En premier lieu on trouve les attributs de la classes, initialisés à "null" et suivis par des virgules (y compris le dernier).
      • Ensuite une première méthode : le constructeur, qui peut comporter ou non des paramètres. Il peut aussi ne rien faire si cela vous chante.
      • Les autres méthode de la classe (facultatives, évidemment).
    • Enfin les accolades et parenthèses fermantes de la méthode declare.

Chaque attribut et chaque méthode est suivi d'une virgule afin de bien le séparer des autres, sauf la dernière (comme on peut le voir ci-dessus).

Contenu de la classe Application


Voici un contenu que je vous proposer afin d'illustrer ce que nous avons vu jusqu'à maintenant.
dojo.provide('monsite.javascript.Application');    
dojo.declare('monsite.javascript.Application', null, {    
   _utilisateur: null,    
     
   constructor: function(userParam) {    
      this._utilisateur = userParam;    
   },    

   start: function() {    
      alert(this._utilisateur);    
   }    
});    

Concrètement, ici, nous allons créer la classe Application avec une chaine de caractères en paramètre, passer ce paramètre en attribut, et enfin appeler une méthode "start()" affichant cette chaine.

Appel de la classe


Retournons à présent dans notre dojo.addOnLoad. Nous allons ici créer une instance de notre classe application et afficher la chaine de caractère souhaitée.
Le code est le suivant :
<script type="text/javascript">    
   dojo.addOnLoad(    
      function() {    
         dojo.require('monsite.javascript.Application');    
         var appli = new monsite.javascript.Application("Salut CommentCaMarche");    
         appli.start();    
      }    
   );    
</script>    


Voila, on a donc les étapes suivantes :
  • Appel de la méthode dojo.require() donc le but est de dire "j'ai besoin de la classe suivante !". Attention, la classe en question doit être déclarée avec dojo.provide sinon cela ne fonctionnera pas !!
  • Création d'une instance de la classe Application à l'aide du constructeur que l'on a vu dans le paragraphe précédent, et donc avec une chaine de caractères en paramètre.
  • Appel de la méthode start() de la classe Application, qui se charge donc d'afficher la chaine précédente.

Résumé


Et voila ! Vous connaissez à présent toutes les bases pour créer un site entièrement en javascript. Concrètement cela se passe comme ça :
  • dojo.addOnLoad appelle votre classe application.
  • Votre classe Application contient tous les dojo.require du site ! Elle appelle ensuite les constructeur nécessaires (displayers, contrôleurs, etc...)


Finalement, la classe Application est le coeur de votre site en Javascript.

Pour une utilisation plus concrète, nous pourrons voir ensemble l'utilisation de l'architecture MVC avec Dojo.

A voir également :

Ce document intitulé «  Structurez votre Javascript avec Dojo  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.