C’est génial, faut tout refaire !
Olivier
Hier, donc, je disais avoir commencé à développer un petit plugin, histoire de mettre les mains et le nez dans le Javascript. J’ai retrouvé le plaisir de concevoir, de coder, de débugger — beaucoup, c’est là que je vois que le niveau est encore faible — avant de finir un peu satisfait d’avoir quelque chose qui tourne.
Et puis, comme à mon habitude, après avoir obtenu le résultat que je souhaitais, je passe à la partie revue de code et optimisation ; parce que j’aime bien avoir quelque chose d’un peu élégant à (re)lire, y compris par d’autres — ce qui est la moindre des choses à mon humble avis —, et en complétant ici et là les commentaires pour rendre l’ensemble à peu près évident.
Par exemple, j’avais codé préalablement deux petites fonctions qui me permettait de sauvegarder quelques attributs de style d’un élément HTML du DOM et de le restaurer ensuite. À la première j’indiquais outre l’élément, la liste des attributs à sauvegarder (display
, height
, …), la seconde se contentait d’aller récupérer cette sauvegarde pour remettre les valeurs d’origine :
var saveCssAttributes = function(elt,attrs) {
// Save given css attribute's list of an HTML element
var attributes = {};
for (var i in attrs) {
attributes[attrs[i]] = $(elt).css(attrs[i]);
}
$(elt).data('maxedit',JSON.stringify(attributes));
}
var restoreCssAttributes = function(elt) {
// Restore saved css attribute's of an HTML element
var attributes = $(elt).data('maxedit');
if (attributes && attributes !== '') {
var attrs = JSON.parse(attributes);
for (var attr in attrs) {
$(elt).css(attr,attrs[attr]);
}
}
}
Ça fonctionne très bien mais :
- Il faut déterminer à l’avance les propriétés qu’il faut sauvegarder
- Les propriétés sauvegardées sont celles calculées pour l’affichage (ça peut conduire à des effets de bord)
- La restauration est imparfaite dans la mesure où les propriétés restaurées le sont au niveau de l’élément (attribut style) — ce qui est normal quand on bricole ça avec JS — et viennent en surcharge des styles initiaux (ce qui peut aussi conduire à des effets de bord)
Du coup j’avais un comportement bizarre quand je combinais l’usage de mon plugin et d’un autre script javascript qui agit aussi sur l’affichage (affichage/masquage du menu de l’administration). Pour résumer ça fonctionnait, mais je n’étais pas capable de restaurer le DOM à son état initial.
J’ai donc entrepris de remplacer complètement les deux fonctions par ces nouvelles :
var saveStyleAttribute = function(elt) {
// Save style attribute of given HTML element
var style = $(elt).attr('style');
if (style !== undefined) {
$(elt).data('maxedit', style);
}
}
var restoreStyleAttribute = function(elt) {
// Restore a previously saved style attribute of a given HTML element
var style = $(elt).data('maxedit');
if (style !== undefined) {
$(elt).attr('style', style);
} else {
$(elt).removeAttr('style');
}
}
Plus simple (pas besoin pour la sauvegarde de spécifier la liste des propriétés concernées par la sauvegarde), on se focalise uniquement sur l’attribut style de l’élément HTML du DOM puisque c’est uniquement celui-ci qui sera ensuite modifié par mon code et la restauration se contente de remettre la valeur initiale si elle existait ou de supprimer l’attribut dans le cas contraire.
Avantage annexe, on s’épargne une boucle, on évite de passer par une conversion au format JSON, toujours ça de pris, et le code est plus facile à déchiffrer (y compris par moi dans quelques mois ou années).
Il reste bien sûr des défauts, par exemple dans le cas où un autre script Javascript viendrait modifier (légitimement) l’attribut style des éléments concernés et c’est là qu’il faut savoir ne pas aller trop loin et accepter un fonctionnement dégradé dans certains cas, au risque sinon d’obtenir une usine à gaz simplement pour gérer des cas marginaux ; reste à définir la bonne position du curseur entre ce qui est marginal ou pas !
J’ai bien conscience que ça reste encore très basique question implémentation mais l’idée est là : reprendre son code, le rendre élégant et éviter autant que possible les traitements répétitifs (une des bases de l’optimisation), commenter là où c’est nécessaire/ambigu, …
Tout ça donne du sens à cette phrase : « C’est génial, faut tout refaire ! ».