DOM BUILDER : PROTOTYPE ROCKS ! dom, builder, prototype, class, singleton, Source N°47227

Information sur la source

Catégorie :Divers Classé sous : dom, builder, prototype, class, singleton Niveau : Expert Date de création : 06/07/2008 Date de mise à jour : 08/07/2008 00:38:51 Vu / téléchargé: 1 886 / 49

Auteur : ralecul

Site perso

Ecrire un message privé

Note :
Aucune note

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Cette petite source contient un builder DOM compatible avec la syntaxe de celui de Prototype.
J'ai réalisé ce builder DOM pour le challenge et parce que celui de Prototype n'est pas encore finalisé.
J'ai effectivement découvert des "bug" avec les attributs camelized sous IE.
Au début je n'avais constaté le bug que pour useMap, puis en creusant un peu j'en ai trouvé beaucoup plus.
-> Au final, j'ai récupéré la liste complète des attributs incriminés dans le code de Mootools.

Le benchmark fournit avec la source est "volontairement" favorable à ma source.
En réalité mon code n'est pas 2x plus rapide que celui de Prototype, je pense juste que c'est leur Event.observe qui n'est pas assez optimisé.
Rien à voir avec le DOM donc... en revanche mon builder corrige quelques bugs de celui de Prototype et ajoute quelques fonctionnalités.

Le fichier myPrototype.js contient plusieurs Singleton :
Element -> Entièrement de moi
Ajax    -> Entièrement de moi (excepté l'évaluation de script)
Event   -> Entièrement de moi
document.viewport -> Version de Prototype 1.6.0.2 + optimisation
Element.Methods   -> Version de Prototype 1.6.0.2 + optimisation

Pour ceux qui ne savent pas ce qu'est un DOM Builder, vous pouvez jetter un coup d'oeil à la source ci-dessous.

Source

//Version DOM classique non Cross-Browser à cause des "spécificités" de IE ;-)
var input = document.createElement('input');
input.setAttribute('name', 'prenom');
input.setAttribute('disabled', 'disabled');
input.setAttribute('value', 'toto');
//Version utilisant un DOM Builder qui masque tous les problèmes de compatibilités
var input = new Element('input', {
name : 'prenom',
disabled : true,
value : 'toto'
});

//Version DOM classique non Cross-Browser à cause des "spécificités" de IE ;-)
var input = document.createElement('input');
input.setAttribute('name', 'prenom');
input.setAttribute('disabled', 'disabled');
input.setAttribute('value', 'toto');

//Version utilisant un DOM Builder qui masque tous les problèmes de compatibilités
var input = new Element('input', {
  name     : 'prenom',
  disabled : true,
  value    : 'toto'
});

Conclusion

Je n'ai pas eu le temps de tout tester donc il est possible que certains workaround pour IE ne fonctionnent pas...
Donc si certaines choses ne fonctionnent pas, vous êtes priez de me le faire savoir ;-)

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

css
- style.css 1 057 octets
js
- Chrono.js 630 octets
- myPrototype.js 11 825 octets
- prototype.js 128 321 octets
bench_builder.html 1 380 octets
bench_innerHTML.html 1 204 octets
bench_prototype.html 1 376 octets
index.html 3 985 octets
screenshot.jpg 150 437 octets

Télécharger le zip

Historique

06 juillet 2008 00:17:47 :: Je dois mettre une explication alors que je ne fais que modifier la prévisualisation ;-(
08 juillet 2008 00:38:51 :: Ajout des méthodes writeAttribute et readAttribute + correction du bug ('disabled' : false) + gestion de tous(?) les attributs de types booléens + introduction de nouveau(x) bug(s) (?)

Sources du même auteur

Toutes les sources de ralecul

Sources de la même categorie

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

Commentaires

Commentaire de ralecul le 06/07/2008 10:20:30

Une bonne lecture pour la comparaison DOM vs innerHTML :http://www.quirksmode.org/dom/innerhtml.html

Mon benchmark n'utilise pas la méthode cloneNode, il est donc comparable au test "W3C DOM 1" présent sur ce site. En ce qui concerne la version innerHTML, elle est très basique et elle est donc comparable au test "innerHTML 1".
Commentaire de XtremDuke le 07/07/2008 16:35:03

Sympa mais une remarque qui me vient à l'esprit :

Celà fonctionne-t-il ?

var input = new Element('input', {
  name : 'prenom',
  disabled : false,
  value : 'toto'
});
Commentaire de ralecul le 07/07/2008 18:12:16

Il y a effectivement un bug avec mon DOM Builder si tu précises une valeur false pour l'ajout d'attribut de type booléen.
Après cela parait bizarre de spécifier "disabled : false" alors qu'il suffirait de ne pas spécifier de valeur pour disabled.
Mais cela peut être intéressant si l'état de l'attribut booléen est stocké dans une variable.

J'ai écrit une nouvelle version de mon DOM Builder avec les méthodes writeAttribute et readAttribute donc il me sera plus facile de corriger ce bug. Par contre je n'ai pas encore pu re-tester tous les workarounds de IE donc je vais attendre un peu avant de poster les modifications.
Commentaire de XtremDuke le 18/07/2008 12:34:32

Je viens de tomber sur un problème et par curiosité j'ai regardé si celà se produisant avec ta méthode :

var input = new Element('input', {
  type : 'radio',
  name : 'prenom',
  checked : true
});

Sous IE, impossible d'affecter l'attribut 'checked'.
Commentaire de XtremDuke le 18/07/2008 14:47:06

Bon apparement, sous IE, il n'est pas possible de jouer sur l'attribut "checked" tant que l'élément n'est pas inseré.

"...You will noticed I set the checked status on the checkbox. But when IE renders that code the checkbox is unchecked. But when I do the alert it tells me true. What the...? Well, it turns out IE's rendering doesn't care what I do to the checkbox before I insert it into the document. IE only reflects those changes made after the insertion..."
Commentaire de ralecul le 22/07/2008 23:33:05

Encore une "spécificité" de IE, cool ;-)
Je l'avais rencontré il y a longtemps mais je n'utilisais pas encore de DOM builder.
Le seul workaround fonctionnel (de mémoire), créer l'input via innerHTML là il est pris en compte correctement...

<troll>Vivement IE8 et qu'il corrige tout ça...</troll>
Commentaire de XtremDuke le 23/07/2008 09:53:21

"Vivement IE8 et qu'il corrige tout ça..."

>> je pencherai plutôt pour la version IE12 en 2038. ^^

Bon ok, j'arrête mes sarcasmes...

Ajouter un commentaire

Discussions en rapport avec ce code source

modif CLASS et attribut en dynamique ? par McPeter

Aidez moi ... Plizzzz ... comment modifier un class ...? par GuilleW

[DOM MOZILLA]urgent par dionysos6868

Class Defilement auto d'images avec animation par MeTh

probleme mozilla par javert

Aidez-moi s'il vous plait par pandzobo

probleme triangle de pascal par tofismagic

Aide pour Newsletter par Nownow

Récupérer toutes les class d'un élément par flexx

Class CSS dans code javascript par micfont999