Bonjour,
Après avoir codé pendant pas mal de temps en PHP, puis en javascript (forte utilisation de jQuery), je me suis posé la question suivante au niveau de la conception d'un script gérant plusieurs éléments similaires, comme des fenêtres (en sachant que le nombre peut être variable).

J'ai actuellement trouvé plusieurs solution :

• Recréer l'élément en javascript en lui rajoutant les événements à chaque fois qu'on veut un élément de plus.
• Créer l'élément en javascript, lui rajouter les événements et le cloner à chaque fois qu'on veut un élément de plus.
• Avoir la structure HTML de l'élément (qui sera caché) et lui rajouter les événements, puis le cloner à chaque fois qu'on veut un élément de plus.

Autrement, j'ai déjà vu qu'on pouvait faire un truc ressemblant à la conception orienté objet en javascript en faisant un truc comme ça (pas sûr du tout) :

function MonObjet()
{
   this.nom = 'nom de l\'objet';
   return this;
}
var objet1 = new MonObjet();
var objet2 = new MonObjet();

Peut-on vraiment utiliser cette technique? si oui, comment bien l'utiliser?

Je vous remercie d'avance

Béeuh, oui bien sur qu'on peut utiliser cette méthode, elle est tout-a-fait banale, a ça près, que ton return this; ne sert a rien

function Monstre() {
	this.kill = function() {
		alert('Die !');
		this.life = 0;
	};
	
	this.life = 3;
}

var pikachu = new Monstre();
var poring = new Monstre();
pikachu.kill();
poring.life--;

Ok, je pense qu je vais utiliser ça.
Par contre, vaut-il mieux que je créé le DOM (avec les évènements) dans ma "classe" ou que je créé un élément de référence et qu'il soit copié à chaque instanciation?

Mais n'est pas de trop.
Et c'est toujours mieux de le mettre.
Imagine un jours ils décident que new ne fait plus renvoyer this


Pour ce qui est de bien l'utiliser, je te conseille fortement de beaucoup utiliser les closures.
Schéma type :

var Voiture = (function() {
	//les variables et fonction statiques
	var vitesse_max = 120,
	vitesse_min = 0;
	return function Voiture(p) {//tu n'est pas obligé de la nommer ici... m'enfin je préfère moi 
		p = (typeof p === 'object') ? p : {};//pour éviter les bugs dans la suite
		this.couleur = p.couleur || 'noir';//comme ça, les paramètres sont optionnels
		this.longueur = p.longueur || 120;
		this.vitesse = (p.vitesse > vitesse_min && p.vitesse < vitesse_max) ? p.vitesse : 60;
		this.position = 0;
		var nom = p.nom;//on garde le nom dans le constructeur parce que c'est secret
		this.whatIsYourName = function() {//mais on met une fonction pour l'afficher
			var hidden_name = '';
			for (var i=0, l=nom.lenth; i<l; ++i) {
				hidden_name += '*';
			}
			return 'My name is '+hidden_name+'.';
		};
		var moteur = {//vu que chaque voiture a un moteur, on ne peut pas le mettre en statique... mais ce n'est pas une raison pour permettre à l'extérieur d'y accéder...
			temperature: 0
			// ...
		};
		this.getMoteurTemperature() {//on permet de le récupérer
			return moteur.temperature;
		};
		this.setMoteurTemperature(speed) {//et de le modifier mais sans en perdre le contrôle
			moteur.temperature = /* calcul complexe */ * speed;
		};
		return this;
	};
})();
Voiture.prototype.avancer = function() {
	this.position += this.vitesse;
	this.setMoteurTemperature(this.vitesse);
};

Et tu peux aussi utilisé p pour tes variables locales.

var Voiture = (function() {
	//les variables et fonction statiques
	var vitesse_max = 120,
	vitesse_min = 0;
	return function Voiture(p) {//tu n'est pas obligé de la nommer ici... m'enfin je préfère moi 
		p = (typeof p === 'object') ? p : {};//pour éviter les bugs dans la suite
		this.couleur = p.couleur || 'noir';//comme ça, les paramètres sont optionnels
		this.longueur = p.longueur || 120;
		this.vitesse = (p.vitesse > vitesse_min && p.vitesse < vitesse_max) ? p.vitesse : 60;
		this.position = 0;
		p.nom = p.nom;//on garde le nom dans le constructeur parce que c'est secret
		this.whatIsYourName = function() {//mais on met une fonction pour l'afficher
			var hidden_name = '';
			for (var i=0, l=p.nom.lenth; i<l; ++i) {
				hidden_name += '*';
			}
			return 'My name is '+hidden_name+'.';
		};
		p.moteur = {//vu que chaque voiture a un moteur, on ne peut pas le mettre en statique... mais ce n'est pas une raison pour permettre à l'extérieur d'y accéder...
			temperature: 0
			// ...
		};
		this.getMoteurTemperature() {//on permet de le récupérer
			return p.moteur.temperature;
		};
		this.setMoteurTemperature(speed) {//et de le modifier mais sans en perdre le contrôle
			p.moteur.temperature = /* calcul complexe */ * speed;
		};
		return this;
	};
})();
Voiture.prototype.avancer = function() {
	this.position += this.vitesse;
	this.setMoteurTemperature(this.vitesse);
};

Merci beaucoup.
Par contre, au niveau de l'utilisation, j'ai pas trop compris comment l'utiliser :

var Voiture = (function(){
   var attr_static = 'Voici un attribut statique';
   var method_static = function(){
      alert(attr_static);
   };
   return function(p){ // On est pas obligé de la nommer, si?
      this.attr_public = 'Attribut public';
      this.method_public = function(){
         alert(attr_public);
      };
      var attr_private = 'Attribut privé';
      var method_private = function(){
         alert(attr_private);
      };
   }
})();

Voiture.attr_static; // c'est bien l'attribut statique?
var maVoiture = new Voiture();
maVoiture.attr_static; // Ça fonctionne pas?
maVoiture.attr_public; // Ça fonctionne?
maVoiture.attr_private; // Ça fonctionne pas?

Par contre, ça résous pas mon autre problème :

Citation

Par contre, vaut-il mieux que je créé le DOM (avec les évènements) dans ma "classe" ou que je créé un élément de référence et qu'il soit copié à chaque instanciation de la classe?

Bah tu mets une référence à l'élément du DOM dans ta classe.

Non, mais je veut parler de la "fabrication" de l'objet DOM.
Par exemple, si je veut faire un WebOS, je vais avoir une classe Fenetre et je me demandais quel solution utiliser pour créer une nouvelle fenêtre au niveau DOM entre copier un élément fait au début de script ou créer cette élément de toute pièce à chaque fois qu'on veut une nouvelle fenêtre.

Bah créer un élément
Si t'as des attributs communs à tous, c'est que tu peux les remplacer par des trucs statiques. Et si t'as un style commun à tous, bah t'as qu'à utiliser une class CSS et juste la mettre à ton élément

Je pense que t'as pas vraiment compris ce que je voulais dire :
Solution 1 : copier un élément fait au début de script

// début du script
var fenetre_de_referance = $('<div class="fenetre">... tout le blabla ...</div>')
   .find('.header')
      .mousedown(function(){/* blabla */})
      .mousemove(function(){/* blabla */})
      .mouseup(function(){/* blabla */})
      .end()
   .find('.corps') /// etc...

// ensuitre
var Fenetre = (function(){
   return function(width, height){
      this.elem = fenetre_de_referance.clone().appendTo('body');
   };
})();

Solution 2: créer cette élément de toute pièce à chaque fois qu'on veut une nouvelle fenêtre

var Fenetre = (function(){
   return function(width, height){
      this.elem = $('<div class="fenetre">... tout le blabla ...</div>')
         .find('.header')
            .mousedown(function(){/* blabla */})
            .mousemove(function(){/* blabla */})
            .mouseup(function(){/* blabla */})
            .end()
         .find('.corps')
         // etc...
         .appendTo('body');
   };
})();

EDIT : en fait, en montrant les exemple, je me dit que solution 2 permet une beaucoup plus grande adaptabilité avec les évènements.

Exactement.
Et si les fonction sont les mêmes, tu les déclare dans une closure pour les rendre statique et comme ça tu passe la référence (ça évite d'avoir plusieurs fonction identiques).

Xavierm et la simplicité, une histoire de haine x_x

Et comment je fait pour avoir des attributs statiques accessibles de l'extérieur, comme ici :

var Voiture = (function(){
   var attr_static = 'Voici un attribut statique';
   var method_static = function(){
      alert(attr_static);
   };
   return function(p){ // On est pas obligé de la nommer, si?
      this.attr_public = 'Attribut public';
      this.method_public = function(){
         alert(attr_public);
      };
      var attr_private = 'Attribut privé';
      var method_private = function(){
         alert(attr_private);
      };
   }
})();

Voiture.attr_static; // marche Pô!

Par contre le coup des variables locales en tant que propriétés de 'p', personnellement j'adhère pas.

Il suffit de déclarer les variables locales avec 'var' et le tour est joué...

Citation : Golmote

Par contre le coup des variables locales en tant que propriétés de 'p', personnellement j'adhère pas.

Il suffit de déclarer les variables locales avec 'var' et le tour est joué...

Dans ce cas, il faut supprimer le p. Sinon, t'as tout en double