classes en Javascript.

Version imprimable

24/01/2011, 16h30
kaptnkill

classes en Javascript.
Bonjour à vous, en lisant un peu sur le web sur les classes en Javascript, j'ai réussi à bidouiller un validateur de formulaire intéressant, mais quelque chose m'échappe :

J'ai deux instance d'une même classe déclarée avec des paramètres propres à chacune (nom, etc.)

Le problème est que lorsque je veux récupérer (code interne de la classe)la propriété nom de mon objet il me donnera toujours le nom de la dernière instance créée

Par exemple :
Code:

1 2 3 var test1 = new FormValidation('test1'); var test2 = new FormValidation('test2');
Dans le code je fait une alerte et 'test2' est toujours affiché même si je suis sur l'objet test1

Je dois mal m'y prendre....et j'utilise prototype avec aussi du jquery dans la classe

Merci de votre aide
24/01/2011, 20h19
dukej
Citation:
Envoyé par kaptnkill

Bonjour à vous, en lisant un peu sur le web sur les classes en Javascript, j'ai réussi à bidouiller un validateur de formulaire intéressant, mais quelque chose m'échappe :

J'ai deux instance d'une même classe déclarée avec des paramètres propres à chacune (nom, etc.)

Le problème est que lorsque je veux récupérer (code interne de la classe)la propriété nom de mon objet il me donnera toujours le nom de la dernière instance créée

Par exemple :

Code:

1 2 3 var test1 = new FormValidation('test1'); var test2 = new FormValidation('test2');

Dans le code je fait une alerte et 'test2' est toujours affiché même si je suis sur l'objet test1

Je dois mal m'y prendre....et j'utilise prototype avec aussi du jquery dans la classe

Merci de votre aide
Et si tu nous donnais le code de FormValidation ?

Ouais j'y ai pensé...il est vraiment long...donc je l'ai réduit un peu
Voici le constructeur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
FormValidation = function(formName, required, absolutePositioning, verbose){
	this._formName = formName;
	this._required = (required != undefined)? required : "";
	this._required = this._required.split("|");
	this._absolutePositioning = (absolutePositioning != undefined)? absolutePositioning : true;
	this._verbose = (verbose != undefined) ? verbose : false;
	this.setUpValidation(this);
	this.getRequired = function(){
		alert('REQUIS ' + this._required );
	}
}

Voici la fonction appelée à l'interne qui me donne toujours la valeur de la dernière instance créée :

Code:

1
2
3
4
5
 
FormValidation.prototype.checkSubmit = function(form, required, checkOnly){
	this.getRequired(); //donne moi la bonne valeur de la variable!!!
        //selon l'exemple cela donne toujours 'test2'..... (aussi avec this._required)
}

Et voici comment j'ajoute l'appel de cette fonction sur un submit :

Code:

1
2
3
4
5
6
7
 
FormValidation.prototype.setUpValidation = function(e) {
	$scope = e;
	$(form).submit(function(){
		return  $scope.checkSubmit($(form),this._required); 	//this._required est ok à cet endroit, mais pas dans la fonction checkSubmit	   
	})
}

J'ai vérifié et de l'externe, la variable this._required est la bonne, mais de l'interne elle garde la dernière valeur? Pourtant dans le code suivant :

Code:

1
2
3
4
 
$(form).submit(function(){				
	return $scope.checkSubmit($(form),$required); 			   	   
})

...c'est le bon formulaire qui est passé, j'ai bien vérifié...

Merci

Code:

1 2 3 4 5 6 FormValidation.prototype.setUpValidation = function(e) { $scope = e; $(form).submit(function(){ return $scope.checkSubmit($(form),this._required); //this._required est ok à cet endroit, mais pas dans la fonction checkSubmit }) }
sans certitude (n'étant pas très familier du jQuery), je dirai que ton erreur se situe là, lorsque tu éxecutes cette fonction, ça rajoute le e.checkSubmit au "onsubmit" de tous tes "form" avec le même et unique "e" qui deviendra le "this" dans checkSubmit. (donc un seul et unique objet formvalidation)

edit: je ne suis pas sûr de comprendre ton code, si tu pouvais déjà nous en dire plus sur la nature du paramètre "e" passé à cette fonction. sinon je te proposerai à froid de tester :
Code:

1 2 3 4 5 6 FormValidation.prototype.setUpValidation = function(e) { var $scope = this; $(form).submit(function(){ return $scope.checkSubmit(e,this._required); //this._required est ok à cet endroit, mais pas dans la fonction checkSubmit }) }

25/01/2011, 10h43
RomainVALERI

Citation:

Envoyé par kaptnkill

Bonjour à vous, en lisant un peu sur le web sur les classes en Javascript, ...

Intéressant :)
En revanche, ça n'existe pas. :aie:

Bon, j'imagine de quoi tu veux parler : le procédé consistant à mettre en place, en JS, les mécanismes classiques des langages objet "à classes".

Mais permets-moi de te poser cette question (enfin, ce n'est pas pour moi, plutôt pour te donner l'occasion de te la poser toi-même ^^) :

>>> pour quoi faire ? :mrgreen:

JS est un langage objet "à prototype", ce qui est un paradigme à part entière, avec ses avantages et ses inconvénients. Est-il pertinent de choisir un outil pour ensuite le tordre afin de le faire rentrer dans un moule inadapté ? Si on veut inverser l'exemple, que penser d'un projet en .NET dans lequel on aurait reconstruit tout le principe des langages à prototype... ? Personnellement je n'en vois pas l'utilité immédiate.

En dehors de ces considérations toutes théoriques, un détail en passant : pour initialiser les valeurs de ton objet, tu peux passer par cette syntaxe plus légère et plus lisible à la fois, basée sur l'opérateur "||" :

Code:

this._required = required || "";
25/01/2011, 12h27
Bovino

Citation:

Je dois mal m'y prendre....

Oui, il semblerait :aie:

Citation:

et j'utilise prototype avec aussi du jquery dans la classe

Je pense qu'un début de réponse est caché dans cette phrase... :mrgreen:
25/01/2011, 13h51
RomainVALERI

Citation:

Envoyé par Bovino

Oui, il semblerait :aie:

Je pense qu'un début de réponse est caché dans cette phrase... :mrgreen:

Citation:

Envoyé par kaptnkill

et j'utilise prototype avec aussi du jquery dans la classe

Il parait qu'en rajoutant mootools et ExtJS ça tourne encore mieux :aie:

/sarcasmes off
>>> je pense que Bovino évoque la multiplication des librairies comme facteur de confusion et de conflits ^^
25/01/2011, 14h24
kaptnkill

Citation:

si tu pouvais déjà nous en dire plus sur la nature du paramètre "e" passé à cette fonction

this.setUpValidation(this); //e = this ... le constructeur

Citation:

this._required = required || "";

Merci j'en prends note...

Je vois que j'ai enflammé certaines personne avec mon idée absurde de vouloir travailler en Javascript avec le principe de classes, sachant bien que le langage Javascript n'est pas un langage orienté objet...

Citation:

>>> pour quoi faire ?

Bien, pour avoir du code un peu plus organisé, si tu as une autre idée, je suis preneur

Citation:

Je pense qu'un début de réponse est caché dans cette phrase..

Ce qui veut dire? :>>> je pense que Bovino évoque la multiplication des librairies comme facteur de confusion et de conflits ^^ Dac! Capté

Merci de votre aide
25/01/2011, 14h33
Willpower

Donne-nous toute ta page, ce sera plus simple. :)
25/01/2011, 15h11
Bovino

Citation:

Envoyé par kaptnkill

Ce qui veut dire? :>>> je pense que Bovino évoque la multiplication des librairies comme facteur de confusion et de conflits ^^ Dac! Capté

Oui... en gros, tu manipules des contextes et des objets assez divers, en particulier les objets jQuery. Donc la perte de référence ou autres joyeusetés peuvent apparaitre facilement ;)
25/01/2011, 15h42
kaptnkill

Citation:

Oui... en gros, tu manipules des contextes et des objets assez divers, en particulier les objets jQuery. Donc la perte de référence ou autres joyeusetés peuvent apparaitre facilement

Ouais, bien je convertit le tout sans JQuery et je vous redonne des nouvelles...c'est dommage, pratique ce JQuery :cry:
26/01/2011, 13h45
kaptnkill

Citation:

En dehors de ces considérations toutes théoriques, un détail en passant : pour initialiser les valeurs de ton objet, tu peux passer par cette syntaxe plus légère et plus lisible à la fois, basée sur l'opérateur "||" :

Hummm, après quelques test, ce n'est pas concluant si la valeur est == à false...

Code:

this.valeur = valeur || "Rien"

Si valeur == false, this.valeur sera == à "Rien"
26/01/2011, 16h34
RomainVALERI

Citation:

Envoyé par kaptnkill

Hummm, après quelques test, ce n'est pas concluant si la valeur est == à false...

Code:

this.valeur = valeur || "Rien"

Si valeur == false, this.valeur sera == à "Rien"

Oui, c'est juste, j'aurais dû le préciser ce n'est pas un détail ^^'

Si false est une donnée valide pour le paramètre, en effet, il faut alourdir un peu la syntaxe pour gérer le cas.

Au temps pour moi :roll:
11/02/2011, 14h16
kaptnkill

Enfin

Merci à vous tous pour vos conseils, j'ai en effet enlevé le jquery de ma "classe" est tout fonctionne à merveille. J'ai du me confectionner une fonction maison du style des sélecteurs de jquery, mais c'est tant mieux...j'ai drôlement appris.

Merci encore
11/02/2011, 17h54
kimjoa

normalement tu peux garder jQuery avec prototype, il faut que renseigne la propriété noConflict
11/02/2011, 21h39
RomainVALERI

Citation:

Envoyé par kimjoa

normalement tu peux garder jQuery avec prototype, il faut que renseigne la propriété noConflict

Dans la mesure où il a réussi à épurer son site d'une librairie surnuméraire, je vois mal l'utilité de lui conseiller de faire machine arrière... ou bien pour le plaisir de l'usine à gaz ? :aie:
15/02/2011, 01h55
kimjoa

A titre informatif tout simplement ....