Trucs et astuces Javascript/jQuery/Firebug
Voici une liste de fonctions/astuces JavaScript. Certaines peuvent être résponsables de longues heures de débogage donc c'est bien de les connaitre!
JavaScript
Savoir si un objet est vide
Il n'y pas de façon rapide de savoir si un objet est vide. Même si vous ne lui ajoutez pas de propriété, un objet a des méthodes et propriétés crées par son constructeur. La seule façon est donc de parcourir toutes les propriétés de l'objet et regarder si les propriétés sont héritées ou spécifiques à l'objet. C'est ce que permet la méthode hasOwnProperty qui renvoie true si la propriété n'est pas héritée.
function isEmpty(obj) { for(var prop in obj) { if(obj.hasOwnProperty(prop)) return false; } return true; }
Savoir si un objet est dans un tableau
On ne peut pas tester la présence d'un élément dans un tableau en javascript, mais on peut avec un Object(). L'astuce est donc de créer un Object() à partir du tableau et tester sur l'objet.
function obj(a){ var o = {}; for(var i=0;i<a.length;i++){ o[a[i]]=''; } return o; } var test = ['papa', 'maman', 'brother', 'sister']; if('maman' in obj(test)){ alert('Maman est parmi nous'); }
Supprimer les doublons dans un tableau
Encore une fonction essentielle qui est absente de JavaScript. Pour se faire, on commence par ordonner le tableau puis on compare chaque valeur avec la précédente.
function RemoveDupArray(a){ a.sort(); for (var i = 1; i < a.length; i++){ if (a[i-1] === a[i]) a.splice(i, 1); } } var test = ['un', 'deux', 'trois', 'un']; RemoveDupArray(test); // ['un', 'deux', 'trois']
Décoder une chaine HTML après transmission Ajax/Json
Lorsque vous souhaiter envoyer du code HTML dans une réponse Json, vous devez échapper les entités HTML pour pouvoir "parser" la réponse sans erreur. Voici une fonction simple et efficace pour recréer le code HTML.
htmlDecode = function(input){ var e = document.createElement('div'); e.innerHTML = input; return e.childNodes[0].nodeValue; }
ReplaceAll
La methode string.replace(regexp/substr,newstring) peut être utilisée avec une chaine de caractère ou une expression régulière. Si c'est avec une chaine, seule la première occurrence sera remplacée. Pour faire un "replacer tout", il faut passer par une expression régulière.
var test = "son papa aime son papa"; test = test.replace(/papa/g, "maman"); // Changer le g en i pour être "case insensitive" //ou encore test = test.replace(new RegEx("son", g), "sa");
Vrac
On supprime une propriété/méthode d'un objet avec delete:
var test = {}; test.uneprop = 'ma propriété'; delete test.uneprop;
function functionname() {} //est un raccourci pour: var functionname = function functionname() {};
Firebug
Vous pouvez connaitre le temps d'exécution d'un bout de code en utilisant console.time()
console.time( 'Depart' ); /* Code */ console.timeEnd( 'Fin' );
jQuery
Vous pouvez accéder à tous les éléments du DOM (mais ça reste à éviter) avec
$('*')
Connaitre les événements attachés à un élément
jQuery sauvegarde toutes actions/événements attachés à un élément grâce à la méthode data() . Il est très pratique pour debugger d'acceder à cette liste dans la console :
console.log( $('element').data('events') );
Commentaires
Poster un nouveau commentaire