Versions

06/11/2011 : Création
19/12/2012 : Liens mis à jour

Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Philippe Le Van (

plv) Dernière mise à jour : 19 December 2012

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 simple

YUI 3 propose la classe Y.Array qui permet de faire pas mal de choses. Voilà la fonction la plus pratique.

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

Parcourir un tableau associatif

En javascript un objet et un tableau associatif, c'est la même chose, on utilise donc Y.Object (module yui, classe Object).

// parcourir un tableau
var tableau = {
  label:'titi',
  description: 'ma description'
};
Y.Object.each(tableau, function(val, key) {
  Y.log("clé:"+key+' val='+val);
})

Complété au fil du temps

Je vais compléter cette page au fil du temps en fonction des fonctions que je vais utiliser. A suivre.

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

Navigation