Bonnes pratiques

Bonnes Pratiques

Voici quelques methodes d'implementation qui peuvent vous aider a rendre votre code plus lisible et facilement maintenable.

Rajouter un "namespace" a vos functions javascript.

Lorsque votre application commence a devenir complexe avec beaucoup de fonctions declarees, il peut etre judicieux de regrouper ces fonctions dans un meme object.

  var Users = {}
  Users.init = function() { /* init code */}
  Users.reloadDatagrid = function() {}

  var Groups = {}
  Groups.reloadDatagrid = function() {}

  Users.init(); // lance la fonction

On peut, en plus, creer un fichier par object.

La balise command

La balise command peut se reveler fort utile pour desactiver une commande. Imaginons que votre application contient une toolbar et un menu contextuel avec des actions identiques. Il suffit de desactiver la commande pour que toutes les actions afferentes soient desactives.

 <commandset>
   <command id="cmdMySuperCommand" label="Recharger" oncommand="Users.reloadDatagrid()" />
 </commandset>

 ...
 <menuitem command="cmdMySuperCommand" />
 ...

$(id)

Gagner en lisibilite et du temps. Utiliser la fonction $('myId') :

 function $(element) {
   if (typeof element == 'string') {
     element = document.getElementById(element);
   }

   return element;
 }

 function o$(element) {
   if (typeof element == 'string') {
     element = window.opener.document.getElementById(element);
   }

   return element;
 }

Compter le nombre de fois que vous utilisez 'document.getElementById' dans vos scripts...

Helper Object

Pour des taches repetitifs, penser a creer un helper qui fera le travail pour vous.

 var TreeHelper = {};
 // return cells' values from the selected row
 TreeHelper.getIdx = function(tree, idx) {
   var tree = $(tree);
   if(!tree) {
     throw new Exception();
   }

   var ids = new Array();
   for(var i in idx) {
     ids.push(tree.view.getCellText(tree.currentIndex,tree.columns[idx[i]]));
   }

   return ids;
 }

Si par exemple vous souhaitez rafraichir une liste en fonction d'une autre liste.

 // on recupere l'id du group
 try {
   var id = TreeHelper.getIdx('GroupsDatagrid', [0]); // id group en position 0
 } catch {
   alert('Selectionner un groupe !);
   return;
 }
 Users.reloadDatagrid(id); // on reload

L'autre avantage d'une telle solution est de pouvoir facilement abstraire le code en fonction de la version du navigateur. En effet, celon les versions de firefox, l'implementation de certaines methodes peuvent varier.