Niveau : Confirmé

Comment bien coder en Javascript ?

Tutoriel par (Développeur Front Office Senior, Expert AccessiWeb en évaluation)
Créé le , mis à jour le (6667 lectures)
Tags : javascript, objet

Sommaire


Modèle objet

Javascript est un langage basé sur des objets. D'un point de vue général, on assimile un objet à une collection de données avec lesquelles on peut avoir diverses interactions. Un objet peut être pourvu de propriétés (des variables spécifiques à l'objet) et de méthodes (des fonctions que seul l'objet peut invoquer). Par exemple :

// La propriété length dépend du tableau aTab
var aTab = aTab.length;

// La propriété alert dépend de l'objet window
window.alert("coucou");

L'objet window est appelé objet global puisqu'il regroupe tout ce qui se trouve dans votre fenêtre. alert() est une méthode appartenant à cet objet, ce qui assure que seul window peut appeler cette fonction.

Afin de suivre la même logique, vous pouvez créer un objet en premier lieu dans votre script. Vous passez ensuite une fonction en tant que méthode de l'objet, ce qui permet, entre autres, de la protéger du fait que seul cet objet en dispose.

L'exemple précédent devient alors :

// Définition d'un objet
var oUtil = new Object;

// Définition d'une propriété (méthode) de l'objet
oUtil._Alert = function()
{
   var sBonjour = "Coucou !";
   window.alert(sBonjour);
}

// Appel de la méthode
oUtil._Alert();

Seul l'objet oUtil peut éxécuter la méthode _Alert. Du coup, si la méthode _Alert fait partie d'un autre script, il n'y a plus d'interaction. Pour différencier les méthodes de vos propres objets, vous pouvez placer un tiret bas sur chacune d'elles.

Aussi, Javascript permet l'utilisation des littéraux. Ceux-ci ne sont autres qu'une forme abrégée d'une expression afin de la rendre plus lisible. Par exemple :

var sTxt = new String("coucou");// équivaut à :
var sTxt = "coucou";

var aTab = new Array;// équivaut à :
var aTab = [];

var oObj = new Object;// équivaut à :
var oObj = {};

// etc...

En utilisant les littéraux, l'écriture équivalente à notre objet est :

// Définition d'un objet
var oUtil =
{
   // Définition d'une propriété (méthode) de l'objet
   _Alert: function()
   {
      var sBonjour = "Coucou !";
      window.alert(sBonjour);
   }
};

// Appel de la méthode
oUtil._Alert();

On y retrouve la méthode de notre objet exprimée à l'aide d'un label (_Alert) suivi de deux points et d'une valeur. Vu qu'il s'agit d'une méthode, on lui affecte une ou plusieurs instructions que l'on encapsule dans une fonction.

Si vous souhaitez ajouter plusieurs propriétés à votre objet, vous devez les séparer par une virgule.

Aussi, la chaîne texte "Coucou !" n'est pas, à proprement parler, une variable mais plutôt une constante dans ce script. Si vous placez les constantes directement en tant que propriétés de l'objet, vous pouvez les réutiliser pour d'autres méthodes. Cela donne :

var oUtil =
{
   sBonjour: "Coucou !", // Constante définie en tant que propriété
   _Alert: function()
   {
      window.alert(oUtil.sBonjour); // Accès à la constante
   }
};

oUtil._Alert();

Une propriété accepte n'importe quel type ( string, array, function, etc... ), comme n'importe quelle variable.

Pour rendre la méthode plus générique, et donc réutilisable, il est préférable de passer les variables en tant qu'arguments de la fonction comme dans l'exemple ci-dessous :

var oUtil =
{
   sBonjour : "Coucou !",
   // Définition de la variable en tant qu'argument de la méthode
   _Alert: function(sText)
   {
      window.alert(oUtil.sBonjour + sText);
   }
};

// Exemples d'utilisation de notre méthode
oUtil._Alert(" Ca va ?");
oUtil._Alert(" Comment tu t'appelles ?");

Si votre méthode comporte plusieurs arguments, vous devez les séparer par une virgule, de la même manière que pour les fonctions.

Cette écriture rend vos scripts plus lisibles, plus sûrs et plus aisés à maintenir. Elle reste aussi dans l'esprit de JavaScript qui est, rappelons le, un langage essentiellement basé sur des objets.