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.