classes en Javascript. [Résolu]

[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

[dukej]

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 :

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 ?

[kaptnkill]

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

[Willpower]

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 js :

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	   
	})
}

[RomainVALERI]

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.

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 ?

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 javascript :

this._required = required || "";

[Bovino]

Je dois mal m'y prendre....

Oui, il semblerait

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...

[RomainVALERI]

Envoyé par Bovino

Oui, il semblerait

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

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

/sarcasmes off
>>> je pense que Bovino évoque la multiplication des librairies comme facteur de confusion et de conflits ^^

[kaptnkill]

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

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...

>>> pour quoi faire ?

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

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

[Willpower]

Donne-nous toute ta page, ce sera plus simple.

[Bovino]

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

[kaptnkill]

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

[kaptnkill]

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"

[RomainVALERI]

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

[kaptnkill]

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

[kimjoa]

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

[RomainVALERI]

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 ?

[kimjoa]

A titre informatif tout simplement ....