Discussion :

[umiak]

Bonjour,

Dans un formulaire de contact qui contient les champs "votre mail" et "votre message" (input et textarea), je voudrais étendre ces objets pour leur ajouter un attribut. Le problème c'est que je n'ai réussi à le faire qu'en passant par l'objet Element. Du coup tous les tags HTML sont étendus ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
	// augmente l'objet Element de l'Attribut : regEx
	Element.prototype.regEx = "";

Comment faire pour étendre uniquement les champs de mon formulaires ?
D'avance merci.

[Bovino]

Avant de te répondre, il serait bon de comprendre exactement ce que tu cherches à faire parce que là, c'est pas très clair...
Ceci dit, ta bribe d'explication semble indiquer que tu cherches à réinventer la roue, en particulier l'attribut HTML5 pattern.

[SpaceFrog]

soit pattern pour forcer un format ...

ou si il s'agit juste d'un attribut il y a aussi data-nomattribut

[umiak]

Merci pour vos réponses, pour info l'idée est d'accompagner l'utilisateur avec un message d'info lorsque le champ est actif (onfocus) et un message de feedback dès qu'il le quitte (onblur). Ces messages sont dans des div, masqués en css.

Du peut d'essai que j'ai réalisé avec pattern (html5) je n'arrivais à afficher le feedback qu'au submit, pour un long formulaire c'est un peu tard.

L'attribut data semble intéressant ... je vais creuser

Néanmoins, j'aimerais quand même bien savoir comment étendre précisément un objet DOM sans passer par l'objet Element ...

[Kaamo]

Étendre les objets natifs du DOM est une mauvaise pratique ... (même si Prototype, Mootools l'ont fait, mais c'est un autre débat).
Une bonne pratique, comme le fait jQuery, est de créer un "wrapper" qui permet d'utiliser des fonctions personnalisées sur un élément ou une collection d'élément.

Ou plus simplement, directement attacher des événements aux éléments ciblés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Attacher un événement à un élément
var bindEvent = function( element, type, eventHandler ) {
  if ( element.addEventListener ) {
    element.addEventListener( type, eventHandler, false );
  } else if ( element.attachEvent ) {
    element.attachEvent( "on" + type, eventHandler );    
  }
};
 
bindEvent(document.getElementById('votre_mail'), 'focus', function (evt) {
  console.log('sélectionner votre mail');
});
 
bindEvent(document.getElementById('votre_mail'), 'blur', function (evt) {
  if (evt.currentTarget.value === '') { // ou regEx
    console.log('Le champ est toujours vide ou pas au bon format !');
    evt.currentTarget.style.backgroundColor  =  '#f00';
  } else {
    evt.currentTarget.style.backgroundColor  =  '#fff';
  }
});

[SylvainPV]

+1 pour un wrapper plutôt que de modifier le prototype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function SuperChamp(element, regex){
    this.element = element;
    this.regex = regex;
 
    bindEvent(element, 'focus', function(){
        //faire ce que tu veux avec ta regex ou d'autres infos
    });
}
 
var monSuperChamp = new SuperChamp(document.querySelector('input.email'), emailRegEx);

[umiak]

Merci pour vos réponses.
Je ne connaissais pas du tout le wrapper ... (faut bien commencer )

[sekaijin]

ajouter des attributs au éléments du dom c'est faisable rapide et efficace
il y a longtemps je m'était attelé à cette approche avec des but différent
http://www.developpez.net/forums/d85...s-autoverifes/
http://www.developpez.net/forums/d83...ace-innerhtml/

attention ça date
A+JYT

[Kaamo]

ajouter des attributs au éléments du dom c'est faisable rapide et efficace

Pourquoi penses-tu que cela est efficace ? Il n'y a pas de problèmes de perf ? Incompatibilité ?

J'ai lu que c'était bien, mais déconseillé (pour prob d'incompatibilité/perf). Prototype avait suivi cette voie, mais va refondre totalement cela pour la v2. Pareil pour Mootools. Si c'est gros acteurs décident de changer leur approche, c'est qu'il doit "y avoir anguille sous roche".

Avant j'étendais le DOM aussi, mais ça ... (oserais-je? ) ....c'était avant de lire cet article de Kangax

[Bovino]

Kaamo, attention, ce que propose sekaijin, ce n'est pas à proprement parler étendre le prototype des éléments HTML (ce qui pose effectivement de gros problèmes de compatibilité puisque IE < 9 de mémoire n'expose pas les objets de type Element ou HTMLElement et dérivés).
Sa solution consiste à considérer un objet DOM déjà récupéré (via getElementById() par exemple) comme n'importe quel autre objet auquel tu peux ajouter directement des propriétés et des méthodes. A ma connaissance, cela ne pose aucun problème.

[Kaamo]

Je n'avais pas lu le code en question. En effet, il n'ajoute rien au prototype mais à l'objet récupéré par getElementById !

Je n'ai donc rien dit

[sekaijin]

quand je dis que c'est efficace pus que sur les perfs c'est sur la gestion de la mémoire.

si on surveille la mémoire interne de l'interprète JS

florsqu'on fait un wrap on créé un objet qui contient une référence à un objet dom pour que cette référence ne soit pas perdue on doit garder le warp référencé (sinon le GC le mets à la poubelle)

du coup lorsque l'objet DOM référencé est détruit il faut aussi eventuellement suprimer le ou les wrap qu'on a créé et qui le référence.

si on attache des propriété et des pethode à l'objet DOM on ne crée pas d'objet (wrap) donc si on détruit l'objet DOM toutes les propriétés, methode perdent une référence. le GC peut alors faire le ménage.

je me suivient d'un systeme d'onglet fait ainsi un div contient plusieur autre div qui sont des onglet (une liste servant à les selectionner) chaque div fils contient une propriété qui référence la liste le div père contient une prorpiété qui désigne l'onglet activ et de méthodes qui active ou desactive un onglet

en terme d'objet il n'y a donc besoint de rien. juste les objets DOM (toute est basé sur des référence) pas de tableau des onglet pas de wrap rien
l'ajout dynamique d'onglet laisse tout cela homogène

créer de façon récurcive tout un system d'onglets dans un onglet ne pose aucun pb car chaque système est indépendant

la supression d'un system se fait simplement en supprment le div père
il ne reste aucune miète en mémoire.

pour avoir observé le moteur JS avec un télé système il c'est avéré très éconnome en mémoire et très simple à géré.

c'est dans ce sens là que je parlait d'efficacité.
A+JYT

[SylvainPV]

Les avantages d'étendre HTMLElement sont loin de couvrir tous les inconvénients. On ne peut pas toucher au prototype de HTMLElement comme ça a été dit plus tôt, seulement attacher des propriétés indivduellement. Dans une logique POO, il peut être parfois ennuyeux de ne pas avoir la certitude que tous les objets d'une "classe" ont bien tous les mêmes propriétés. Aussi, pour certains usages les éléments HTML peuvent parfois être retirés du DOM et réinsérés plus tard. Il faut alors faire attention à toujours garder une référence de l'objet côté Javascript même une fois détaché du DOM. Enfin, le HTML évoluant sans cesse, il est possible que le prototype de HTMLElement soit étendu à de nouvelles propriétés avec le même nom que vos propriétés personnalisées, et là les choses se compliquent vite...

C'est pour toutes ces raisons que jQuery a opté pour la solution wrapper, jugée plus sûre, quitte à perdre un peu en efficacité mémoire. Et c'est aussi pour ça que Prototype est particulièrement décrié.

Je vous laisse lire cet article qui fait bien le tour du sujet : http://perfectionkills.com/whats-wro...nding-the-dom/

[Kaamo]

Merci pour l'éclaircissement sekaijin ! En effet, pour l'article c'est celui dont je parlais quelques posts plus haut. Il permet de bien cerner les avantages/inconvénients comme tu l'as résumé, Sylvain.

[SylvainPV]

Oups, je n'avais pas vu que tu l'avais déjà posté

[Watilin]

Pour ajouter mon grain de sel.

Quand j'ai découvert la méthode .data de jQuery, ça et plusieurs autres sources dont je ne me rappelle plus m'ont fait penser qu'il y avait danger à ajouter des attributs sur un élément HTML individuel. Je crois que c'est lié aux histoires de fuites de mémoire sous IE. Cela dit, IE a fait des progrès (si si) donc ça ne devrait plus être un souci.

C'est peut-être quelque chose de bon à savoir, pour ce que ça vaut.