Brico-Info – le blog de Bruno CATTEAU

La nouvelle version de Firebug (une extension pour Firefox) est sortie en beta. Un descriptif des nouveautés est disponible ici.

Cette version 1.0 apporte pas mal de nouveauté dont un profiler qui permet de montrer graphiquement le temps dechargement de chacun des fichiers (js, css, html)

Sur une application comme URBA, on a fait le choix de compiler les sources Javascript en un seul fichier, pour deux choses :

• Gagner du poids en retirant les commentaire, les sauts de lignes…
• Gagner du temps de chargement car (et Firebug 1.0 permet de le montrer) un seul fichier = une seule connexion alors qu’une multitude de fichiers = une multitude de connexions. En local, on passe de 988ms à 282ms !

C’est une beta, j’ai trouvé quelques instabilités sur l’inspection. Dans la version 0.4, les éléments étaient entourés de bleu systématiquement alors que dans la 1.0 beta, je n’ai eu ce comportement qu’occasionnellement…

Site officiel : http://www.getfirebug.com/
Fichier xpi : http://www.getfirebug.com/releases/firebug1.0-b4.xpi

Lors de la formation AJAX, on aborde cette facette du Javascript peu connue.

Une définition du Prototypage est :  »un prototype est une instance d’une classe qui possède des attributs et des méthodes par défaut qui sont utilisés si les instances de la classe ne les redéfinissent pas ». En Javascript, on peut tout prototyper.

Pour faire ces exemples, vous pouvez utiliser le shell qui  vous permet de faire de la ligne de commande en Javascript dans le contexte de la page en cours.

La syntaxe du prototypage est la suivante :

//Définition d’une classe
Voiture = function(marque, modele) {
  this.marque= marque;
  this.modele= modele;
}

//Exemple :
voiture1 = new Voiture(‘BMW’, ‘Classe 1’);

//On rajoute une méthode qui s’ajoute à tous les objets Voiture en prototypant la classe Voiture 
Voiture.prototype.demarre = function() {
  return ‘Vrooom’;
}

Si une méthode demarre() avait été définie dans la classe Voiture, elle n’aurait pas été écrasée par la méthode ajouté par prototype.

Nous allons maintenant prototyper l’objet natif Array du Javascript

Array.prototype.compte = function(){
  return this.length;
}