Niveau : Confirmé

Comment bien coder en Javascript ?

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

Sommaire


Séparation des données : avantages de JSON

JSON

Jusqu'à maintenant, nous avons vu comment améliorer nos scripts en séparant la structure, la présentation et le comportement, en utilisant le modèle objet et en rendant nos méthodes utiles à de nombreuses occasions. Dans cette dernière phase, nous avons regroupé nos données sous forme de propriétés de l'objet. Nous pouvons faire mieux en séparant les données de notre script. Certains d'entre vous penseront dès lors XML mais dans ce cas, vous devrez soit transformer votre fichier XML pour le rendre interprétable par le script soit utiliser des méthodes propres au contenu XML. Est-ce la meilleure méthode ? Vous l'aurez deviné, la réponse est non.

Le souci avec XML est qu'il structure vos données, ce qui nécessite un moteur de transformation tel que Xalan ou Saxon associé à une feuille de style XSLT ou des méthodes spéciales pour convertir vos données au bon format. C'est plutôt fastidieux pour ce que nous souhaitons faire et nous n'avons généralement pas besoin de cette structure pour transmettre des données. C'est pourquoi un autre format d'échange semble plus en vogue : JSON ou Javascript Object Notation. L'avantage de celui-ci est qu'il est directement interprétable par Javascript et notamment par des frameworks (voir Le format JSON, AJAX et jQuery), ce format étant une sous-classe de ce langage, et qu'il est bien moins lourd qu'un fichier XML lorsqu'il s'agit d'envoyer des données. Cela ne met pas pour autant XML au placard, ce dernier ayant bien d'autres utilités mais si vous vous mettez à l'Ajax, mieux vaut y réfléchir à deux fois avant de foncer tête baissée.

Reprenons donc les propriétés où nous avions regroupé nos données et créons un fichier data.json . Cela prend la forme suivante :

{
   "Id": "ContList2",
   "Tag": ["ul", "li"],
   "Text": ["Texte 1", "Texte 2", "Texte 3", "Texte 4", "Texte 5"]
}

Pour lier le fichier JSON à notre script, nous transformons notre fichier script.js en fichier script.js.php puis nous faisons une inclusion PHP. Nous créons ensuite une nouvelle variable pour accueillir notre objet. Cela donne :

<?php
header("Content-type: text/javascript; charset=iso-8859-1");
?>

// Objet Utilitaire
var oO =
{
   // Ici se trouvent nos méthodes précédentes
};

// Objet de données
var o$ =
< ?php require_once "data.json"; ?>;

Pour appeler chaque propriété en tant qu'argument de la méthode oO._List, nous faisons un tableau associatif et nous prenons soin de vérifier que l'objet de données existe bien, ce qui donne :

// Initialisation de la méthode oO._List
window.onload = function()
{
   if(o$) oO._List(o$["Id"], o$["Tag"][0], o$["Tag"][1], o$["Text"]);
}

A noter que cette écriture est parfaitement équivalente à la syntaxe pointée. Pour vous en convaincre, faites donc le test avec :

// Initialisation de la méthode oO._List
window.onload = function()
{
   if(o$) oO._List(o$.Id, o$.Tag[0], o$.Tag[1], o$.Text);
}

Le script fonctionne toujours.

Nos données sont bien en externe dans un fichier qui leur est propre. Ceci facilite l'échange avec d'autres langages, PHP entre autres. Une autre méthode pour accéder au fichier JSON est de recourir à l'Ajax (sujet non développé ici).