Objet Encapsulation Collision

Version imprimable

Bonjour,

Voila, j'ai un petit problème de "collision" sur le code suivant. Au lieu d'afficher successivement 'Chapitre 1' puis 'Chapitre 2', cela affiche 'Chapitre 2' et 'Chapitre 2'.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var oO = (function() {
 
  var target = 'section'
  var value = ''
 
  function execute() {
    targetNode.appendChild(document.createTextNode(value));
  }
 
  function addEvent(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  }
 
  return {
    init:
      function(string) {
        value = string;
        targetNode = document.getElementById(target);
        if (targetNode) {
          addEvent(window, 'load', function() {
            execute();
          });
        }
      }
  }
 
 
}) ();
 
oO.init('Chapitre 1');
oO.init('Chapitre 2');

Si ce code parait disproportionné pour afficher 2 lignes dans le corps de la page, c'est une simplification d'un code plus vaste pour en comprendre l'origine du problème.

Merci par avance pour votre aide.

01/11/2009, 17h33
gwyohm

Bonjour et bienvenue sur le forum.

A chaque fois que tu execute ta methode init, tu assigne une nouvelle valeur au membre privé value.
02/11/2009, 09h22
F.P.S.

Oui car j'aimerais que cette valeur soit stocker en tant qu'attribut de l'objet afin de pouvoir être utilisé par les méthodes.

Cependant et c'est là où je ne comprends pas le problème, c'est que le 2ème appel (oO.init('Chapitre 2');) semble écraser le premier.

Est ce qu'il y a une erreur ? Est ce qu'il y a un problème de méthode ?
02/11/2009, 10h05
Bovino
Citation:

Envoyé par F.P.S.

Cependant et c'est là où je ne comprends pas le problème, c'est que le 2ème appel (oO.init('Chapitre 2'); ) semble écraser le premier.

C'est effectivement le cas car tes deux appels se font sur la même instance de oO :
Code:

1 2 new oO.init('Chapitre 1'); new oO.init('Chapitre 2');
02/11/2009, 14h32
F.P.S.
Donc, je comprends que l'erreur vient du fait que j'utilise la même instance de l'objet oO.

Par conséquent, je dois créer une nouvelle instance de l'objet oO, ce que j'ai essayé de faire avec le code suivant :
Code:

1 2 new oO.init('Chapitre 1'); new oO.init('Chapitre 2');
à la place de
Code:

1 2 oO.init('Chapitre 1'); oO.init('Chapitre 2');
Cependant, je me retrouve toujours avec le même problème, cela affiche 'Chapitre2' et 'Chapitre2' au lieu de 'Chapitre1' et 'Chapitre2'.

Le souci, c'est que oO n'est pas un constructeur. C'est un objet créé par le résultat d'une fonction anonyme.
Soit tu changes ta méthode init pour qu'elle enregistre différement le listener sur le load :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var oO = (function() {
  
  var target = 'section'
  var value = ''
  
  function execute(string) {
    targetNode.appendChild(document.createTextNode(string));
  }
  
  function addEvent(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  }
  
  return {
    init:
      function(string) {
        //value = string;
        targetNode = document.getElementById(target);
        if (targetNode) {
          addEvent(window, 'load', function() {
            execute(string);
          });
        }
      }
  }
  
  
}) ();

Soit tu modifies ton code pour gérer plusieurs instances

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var oO = function(string) {
 
  var target = 'section';
  var value = string;
 
  var execute = function(string) {
    targetNode.appendChild(document.createTextNode(value));
  };
 
  var addEvent = function(elem, type, func) {
    return elem.addEventListener?
      elem.addEventListener(type, func, false):
      elem.attachEvent?
        elem.attachEvent('on'+type, func):
        elem['on'+type] = func;
  };
 
  targetNode = document.getElementById(target);
  if (targetNode) {
    addEvent(window, 'load', function() {
      execute();
    });
  }
};
// ...
new oO("Chapitre 1");
new oO("Chapitre 2");

02/11/2009, 21h16
F.P.S.

OK, bien noté. Je vais modifier mon script en conséquence.
Merci pour le coup de main.