Debug YUI3, fonctions pratiques

Introduction

Cette page présente en vrac pas mal de petites fonctions pratiques proposées par YUI3.

Beaucoup d'entre elles sont recensées dans le screencast YUI 3 Sugar 

Dump, logger et console YUI3

2 fonctions sont assez indispensables pour ne pas perdre des heures de dev : un système de logs et un système de dumps. La console peut être pratique sur les navigateurs n'ayant pas de firebug ou équivalent.

• Les logs par défaut vont dans firebug, dragonfly ou autre outil de débug javascript
• Dump permet d'afficher le contenu d'un objet de façon propre dans un log
• la console permet de remplacer la console firebug dans les navigateurs qui n'ont pas d'outil de débug performants (IE ?)
  

// Logs
Y.log("mon message");
 
// pour afficher un log dans une console
YUI().use("console",function(Y) {
  var myConsole = new Y.Console();
  myConsole.render();
  Y.log("mon message");
});
 
// pour utiliser dump
YUI().use("dump", function(Y) {
  Y.log(Y.dump(unObjet));
});

Substitute, modèles javascript

Quand on veut générer du HTML en javascript, on a souvent besoin de mettre des données dynamiques dans ce code HTML. Le mécanisme "substitute" de YUI3 permet d'avoir un modèle HTML dans lequel on va injecter des données pour générer l'HTML.

Prenons comme exemple un code qui insère une liste de "li" dans un "ul".

// on inclut les modules node et substitute
YUI().use("node", "substitute", function(Y) {
  // on récupère le UL dans lequel on va insérer les lignes
  var ulElement = Y.one("ul#myUl");
  // on crée le template html
  var htmlTemplate = "<li>Ligne No {compteur}</li>";
  // la boucle qui va créer les lignes
  for (var i=1 ; i < 5 ; i++) {
    // on crée le code HTML réèl
    var html = Y.substitute(
      htmlTemplate,
      {
        compteur: i
      }
    );
    // on crée le node
    var newNode = Y.Node.create(html);
    // on insère le node
    ulElement.append(newNode);
  }
});

petites fonctions pratiques trim, ...

Quelques petites fonctions pratiques :

• trim : supprime les caractères "vides" (espaces, tabs,...) en début et fin de ligne
  

var cleanString = Y.Lang.trim(originalString);

Parcourir un tableau

// parcourir un tableau
var tableau = ['titi', 'toto'];
Y.Array.each(tableau, function(el) {
  Y.log("élément:"+el);
})

Complété au fil du temps