Archives mensuelles : décembre 2006

Firebug 1.0 Beta : Incroyable !

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

 

Le prototypage…

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’;
}

//essai
voiture1.demarre()
>>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;
}

//définition d’un tableau
tableau = [‘choux’,’carotte’,’poireau’]
>>choux,carotte,poireau

//Appel de  la methode ajoutée
tableau.compte()
>>3

//Appel de la proprieté length
tableau.length
>>3
 
Prenons un cas un peu plus tordu (c’est au final l’objet de ce post…)
 
coll = document.getElementsByTagName(‘*’)
>>[object HTMLCollection]
 
coll.length
>>90

coll.compte()
>>TypeError on line 1: coll.compte is not a function
 
En effet, getElementsByTagName ne retourne pas un tableau, contrairement à ce qu’indique Aptana dans sa documentation contextuelle, mais un Dom Collection
 
//on demande le type de coll
coll.constructor.name
>>Object
 
//on demande le type de tableau
tableau.constructor.name
>>Array
 
Les deux sont différents. Nous allons donc essayer de prototyper les Object :
 
Object.prototype.compte = function(){ return this.length;}
>>function () { return this.length; }
 
coll.compte()
>>90
 
Mais sous Internet Explorer, ça ne fonctionnera pas car le script n’a pas accès à ces objets là.
Et comme dirait Nico : « Les types des DOM ne sont pas dans l’arbre d’héritage du JS »…