Comment bien coder en Javascript ?

Si certaines de vos méthodes comportent des codes lourds et redondants, faites-en de nouvelles méthodes. Plus celles-ci sont courtes et plus on les comprend facilement. La maintenance s'en retrouve facilitée et votre code est plus léger.

A titre d'exemple, créons une liste ul contenant 2 éléments li avec leur texte puis insérons les dans un conteneur div vide situé dans le code XHTML. Si on part bille en tête, on crée nos éléments les uns à la suite des autres et on obtient le code suivant :

var oO =
{
   _InitList1: function()
   {
      oO._List();
   },

   _List1: function()
   {
      // Test des méthodes utilisées
      if(!document.getElementById ||
         !document.createElement ||
         !document.createTextNode) return;

      // Définition du conteneur récepteur de la liste
      var oDiv = document.getElementById('ContList');
      if(!oDiv) return;

      // Création de la liste
      var oUl = document.createElement('ul');
      var oLi1 = document.createElement('li');
      var oTxt1 = document.createTextNode('Texte 1');
      var oLi2 = document.createElement('li');
      var oTxt2 = document.createTextNode('Texte 2');

      // Constitution de l'arbre DOM
      oLi1.appendChild(oTxt1);
      oUl.appendChild(oLi1);
      oLi2.appendChild(oTxt2);
      oUl.appendChild(oLi2);
      oDiv.appendChild(oUl);
   }
};
// Lancement de la méthode d'initialisation
window.onload = oO._InitList1;

Résultat (visible uniquement avec JS activé) :

Superbe ! Ca marche, on obtient bien notre liste...

Problème

Si maintenant, je vous dis d'ajouter une dizaine d'éléments de liste supplémentaires, allez-vous continuer à multiplier les lignes ainsi ? Et si, par un malheureux hasard, je vous disais de créer une seconde liste avec des textes différents, allez-vous recréer une méthode supplémentaire ? C'est un peu lourd, n'est-ce pas ?

Solution

Comme nous l'avons vu dans le chapitre du modèle objet, nous pouvons déjà reporter toutes nos constantes en tant que propriétés. Si nous en avons un grand nombre, il peut être judicieux de regrouper chaque type de constante dans un tableau plutôt que de faire une liste interminable de propriétés pour chaque chaîne texte.
Par ailleurs, nous voyons ici que la création des éléments de liste li est répétitive. Cette partie peut donc avoir sa propre méthode.
Enfin, votre objet contiendra certainement de nombreuses méthodes où des document.getElementById, document.getElementsByTagName et autres ressortiront régulièrement. Il est dès lors intéressant de faire une méthode test généraliste plutôt que de tout réécrire pour chaque méthode.

Pour illustrer ces propos, étudiez donc le code suivant :

var oO =
{
   // Test
   _Test: function()
   {
      var iI = arguments.length - 1;

      for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;

      return true;
   },

   // Constitution et intégration d'une liste dans le document	
   _List: function(cont, list, elem, text)
   {
      var oCont = document.getElementById(cont);
      if(!oCont) return;

      var oList = document.createElement(list);
      var iI = 0;
      var iTab = text.length;

      for(iI; iI < iTab; iI++)
      {
         oList.appendChild(oO._Elem(elem, text[iI]));
      }

      oCont.appendChild(oList);
   },

   // Création d'un élément contenant du texte
   _Elem: function(elm, txt)
   {
      var oElem = document.createElement(elm);
      var oTxt = document.createTextNode(txt);

      oElem.appendChild(oTxt);

      return oElem;
   },

   // Conteneur
   Id: 'ContList2',
   // Elements
   Tag: ['ul', 'li'],
   // Textes
   Text: ['Texte 1', 'Texte 2', 'Texte 3', 'Texte 4', 'Texte 5']
};

// Test des méthodes suivantes
if(oO._Test(document.getElementById, document.createElement, document.createTextNode))
{
   // Initialisation de la méthode oO._List
   window.onload = function()
   {
      oO._List(oO.Id,oO.Tag[0],oO.Tag[1],oO.Text);
   }
}

Résultat (visible uniquement avec JS activé :

Le résultat est identique mais la différence majeure est que :

• Nous avons regroupé toutes nos constantes sous forme de propriétés.
• Nous n'avons plus que des méthodes utilitaires courtes à qui on passe des arguments.

A première vue, vous pourriez trouver cela plus complexe mais regardez donc les possibilités. Copiez le code puis :

• Changez ul en ol dans le tableau Tag, vous obtenez une liste ordonnée.
• Ajoutez 2 chaînes textes au tableau Text, vous obtenez une liste à 7 éléments.
• Utilisez la méthode oO._Elem pour créer un paragraphe; il est inutile de l'adapter.
• Vous pouvez tester de nouvelles méthodes à l'aide la méthode oO._Test.
• etc... etc...

Comme vous le voyez, on obtient un script bien plus flexible, facile à maintenir et surtout plus rentable à la longue. Les méthodes sont courtes, donc plus lisibles, et elles se fondent sur leurs arguments ce qui permet de s'en resservir. Aussi, prenez le temps nécessaire à la bonne compréhension de ce code, je peux vous assurer que ce travail ne sera pas à perte. De manière générale, tentez toujours d'optimiser vos méthodes, c'est le seul moyen d'obtenir une bonne bibliothèque.