Compatibilité HTMLXXXElement (résolu)

Bonjour à tous,

Une technique bien utile pour ajouter des méthodes personnalisées à tous les éléments HTML d'un type donné est la suivante :

HTMLXXXElement.prototype.mymethod = function () {
...
}

Par exemple avec HTMLInputElement, on ajoute la méthode à tous les <input>; avec HTMLTableCellElement à tous les <td>; etc. C'est surtout bien pratique pour ajouter la méthode à tous les éléments du type voulu, actuellement présents sur la page, ou créés ultérieurement, sans avoir à s'en soucier par la suite.

C'est notamment beaucoup plus pratique et performant que ce genre de code :

var array = document.getElementsByTagName('XXX');
for (var i=0; i<array.length; i++) {
array [ i ] = function () { ... };
}

C'est moins bien pour deux raisons :
1 - IL faut penser à rajouter la méthode à chaque nouvel élément créé ultérieurement, ce n'est pas automatique
2 - Techniquement, ça fait une fermeture différente par élément existant, si on assigne la fonction directement de cette façon; pas sûr que les optimiseurs sont capables de déterminer que c'est la même fonction à chaque fois
3 - Sans doute conséquence du point 2, c'est un peu lent si on le fait sur un grand nombre d'éléments (notamment * !)

Pour le moment, concrètement, j'utilise ça pour ajouter des méthodes à HTMLInputElement, pour me simplifier la validation de formulaires.

Venons-en à ma question: sur quels navigateurs cette technique fonctionne, et sur lesquels elle ne fonctionne pas ?

J'ai cherché, et j'ai trouvé énormément de sites présentant des tableaux de compatibilité sur beaucoup d'API différentes, mais pas précisément ça !

Par exemple sur un site qui s'appelle quelque chose comme quirkmode.org et qui semble être und des plus complets en la matière (j'ai pas retenu le lien), on trouve facilement ce qu'on cherche pour DOM level 1 et 2, CSS 2.1 et 3, API HTML5 comme audio/video, canvas, etc.
Par contre pour ce que je cherche précisément aujourd'hui, je ne trouve pas...

Je vois que ça marche nickel sur IE9 et firefox 21. Pa rcontre je me rappelle très clairement qu'à l'époque d'IE6, ça ne marchait que sure firefox 1 et 2, et il fallait alors obligatoirement recourrir au second code que j'ai indiqué comme mauvais pour y arriver, ou alors utiliser des trucs propriétaires incompréhensibles comme les behavior d'IE5/6.

Qu'en est-il pour IE7, IE8, chrome et safari ?

Merci pour vos réponses, et désolé d'avoir posé cette question idiote si vous arrivez à me répondre en un seul lien...

P.S. Merci de ne pas me répondre quelque chose comme "ne t'emm**** pas et utilise JQuery"; ce n'est normalement pas le genre de la maison, mais autant prévenir vu que beaucoup de monde croit à tort que JQuery est le nouveau javascript alors que ce n'est ni plus ni moins qu'une bibliotèhque très populaire; et en l'occurence, je ne l'utilise pas.
Modifié par QuentinC (25 Jun 2013 - 20:53)

Tu devrais lire ça :

http://perfectionkills.com/whats-wrong-with-extending-the-dom/
http://perfectionkills.com/extending-built-in-native-objects-evil-or-not/
http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/

Ah... je vois que j'ai bien fait de poser la question. Apparament, ce n'est donc pas vraiment une bonne idée. Je pensais sérieusement que c'était standard, ces choses-là.

Je comprends mieux pourquoi personne n'en parle, et pourquoi les bibliothèques javascript comme JQuery ont pratiquement toutes opté pour des syntaxes bizarroïdes et pas du tout naturelles à base de $(), $., $$, _(), _., $_(), $_. et autres illogismes étranges et abscons... en fait il n'ont guère le choix pour faire court et efficace. Tout s'explique !

Dommage, ça paraissait plutôt pratique et ingénieux comme système.

La réponse à ma question initiale est dans le premier article mis en lien: ça marche sur IE8 et sur chrome, pas sur IE7 et safari. Mais bon, de toute façon ce n'est pas une bonne idée, alors autant que je cherche comment faire autrement.

Merci.

QuentinC a écrit :
La réponse à ma question initiale est dans le premier article mis en lien: ça marche sur IE8 et sur chrome, pas sur IE7 et safari. Mais bon, de toute façon ce n'est pas une bonne idée, alors autant que je cherche comment faire autrement.

Merci.

Une bonne réponse à comment faire autrement: utiliser une bibliothèque. Une parmi les milliers qui existe ou une que tu fais toi-même. ça paraît simpliste comme réponse, mais je vois difficilement meilleure architecture pour la maintenance, la lisibilité et la vitesse de développement.

a écrit :

Je comprends mieux pourquoi personne n'en parle, et pourquoi les bibliothèques javascript comme JQuery ont pratiquement toutes opté pour des syntaxes bizarroïdes et pas du tout naturelles à base de $(), $., $$, _(), _., $_(), $_. et autres illogismes étranges et abscons... en fait il n'ont guère le choix pour faire court et efficace. Tout s'explique !

C'est pas vraiment des syntaxes bizarroïdes une fois qu'on connait le pourquoi du comment. Les signes $ et _ sont autorisés, en plus des lettres et des chiffres dans les noms de variables et de fonctions en JavaScript. L'utilisation de $, $$, _$, etc par de nombreuses bibliothèque permet juste d'avoir des raccourcis faciles à saisir.

Par exemple pour jQuery, $ est un alias de jQuery.

Tu peux aussi bien écrire :

jQuery(document).ready(function () {
  jQuery("a").on("click", function() {
   jQuery(this).css({"background-color": "#000", "border": "2px solid #f00"})
  });
});

Que :

$(document).ready(function () {
  $("a").on("click", function() {
   $(this).css({"background-color": "#000", "border": "2px solid #f00"})
  });
});

La deuxième version est juste plus courte à écrire.

a écrit :

P.S. Merci de ne pas me répondre quelque chose comme &quot;ne t'emm**** pas et utilise JQuery&quot;; ce n'est normalement pas le genre de la maison, mais autant prévenir vu que beaucoup de monde croit à tort que JQuery est le nouveau javascript alors que ce n'est ni plus ni moins qu'une bibliotèhque très populaire; et en l'occurence, je ne l'utilise pas.

jQuery permet aussi de faire facilement des trucs pas forcément naturels en JavaScript comme de l'héritage simple. Coder ses scripts sous formes de plug-ins est aussi bien meilleur pour avoir du code réutilisable et plus facile à maintenir et à faire évoluer. Dans ce sens on peut parler de jQuery comme d'un framework.

kustolovic a écrit :

Une bonne réponse à comment faire autrement: utiliser une bibliothèque. Une parmi les milliers qui existe ou une que tu fais toi-même. ça paraît simpliste comme réponse, mais je vois difficilement meilleure architecture pour la maintenance, la lisibilité et la vitesse de développement.

+1
Modifié par jb_gfx (26 Jun 2013 - 01:54)

Ce qui à la fois m'étonne et me rebute avec JQuery, c'est que... on peut lire sur leur page d'accueil: petit, 32 Ko minifié et gzippé.
En gros ça veut dire que la version complète dézippée ne doit pas faire loin de 100 Ko.

1 - Mème 32 Ko, c'est plus q'une page HTML moyenne + le CSS correspondant, en tout cas pour mon site (sans les images, quand même). Ca me paraît assez énorme, surtout pour quelques vérifications de formulaires et 3 requêtes AJAX qui se courent après.

2 - Je suis encore en train de me demander comment les navigateurs n'implosent pas en voyant 100 Ko de code js... d'après mon expérience, le js est un langage extrêmement lent et sensible.

3 - J'ai vraiment l'impression que c'est une syntaxe bizarre, à la limite c'est presque un autre langage. C'est peut-être juste une question d'habitude, mais bon, ça me paraît excessivement moche.

QuentinC a écrit :

2 - Je suis encore en train de me demander comment les navigateurs n'implosent pas en voyant 100 Ko de code js... d'après mon expérience, le js est un langage extrêmement lent et sensible.

Regarde la taille du JS externe gzippé (uniquement, je compte pas le JS inline dans la page) chargé quand tu visites un site "de tous les jours" :

Google.fr, page de résultat : 230ko
Facebook, ton mur : 450Ko
Outlook.com, inbox : 400Ko
Gmail.com, inbox : 420Ko
Msn.com : 300Ko

Est-ce que tu as déjà vu un navigateur "imploser" parce que tu as visité un de ces sites ? 32Ko/100Ko de JS à parser c'est rien du tout. Je viens de faire un petit benchmark sur la machine sur laquelle je suis : un mac mini avec processeur 32bit à 1,8 Ghz, 2Go de RAM (une veille machine pourrie), Firefox 21, résultat : parser jquery 1.9.1 prend moins de 10 millisecondes.

JavaScript est probablement le langage de programmation interprété le plus rapide disponible à l'heure actuelle. Grâce aux efforts des constructeurs de navigateurs dans l'amélioration des moteurs JS.

J'avais fait un test il y a quelques temps suite à un article de blog incendiaire à propos des performances de node.js. Le test consistait à calculer les 40 premiers nombres de la suite de fibonacci avec une fonction récursive.

Sur ma machine de travail j'avais un truc comme :

- Node.js (aka le moteur V8 de chrome) -> quelques secondes (7 secondes je crois)
- Python 2.7 -> moins de 2 minutes
- PHP 5.3 -> au bout d'une heure de calcul le script s'était arrêté parce que la limite d’exécution de mon PHP était atteinte.

a écrit :

3 - J'ai vraiment l'impression que c'est une syntaxe bizarre, à la limite c'est presque un autre langage. C'est peut-être juste une question d'habitude, mais bon, ça me paraît excessivement moche.

Là je t'avoue que je ne vois pas du tout de quoi tu parles. La syntaxe de jQuery c'est la syntaxe de JavaScript. jQuery c'est rien d'autre qu'un programme écris en JavaScript donc il ne lui est pas possible de changer la syntaxe du langage dans lequel il est écrit.

Peut être que tu pourrais donner quelques exemples pour illustrer ton propos ?