Discussion :

[scandinave]

bonjour, j'ai construit le singleton suivant :

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
var Dashboard = (function(){
      var constructeur = function(){
            var canvas = document.getElementById('dashboard');
            var ctx = canvas.getContext('2d');
            // others attributs and methods
      }
 
      var instance = null; 
      return new function(){
           this.getInstance = function(){
                 if( instance == null){
                        instance = new constructeur();
                 }
                 return instance;
           }
     }
 
})();

lors que j'appelle le singleton comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
     var  dash = Dashboard.getIntance();
});

je récupère bien l'instance. Par contre si je l'appelle ensuite comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function Item(x, y, width, height) {
       this.dashboard = Dashboard.getIntance();
       // others attributs and methods
}

j'obtient l'erreur suivante :

canvas is null
var ctx = canvas.getContext('2d');

quelqu'un a une idée sur ce problème?

[SpaceFrog]

soit tu ne nous montres pas tout le code ...
soit il y un souci de parenthèse en trop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Dashboard = (function(){

[scandinave]

dsl , un oublie de ma part sur le post , c'est corrigé ci dessus. manquait

)();

à la fin

[SpaceFrog]

ce qui est donc la cause du problème ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

)();

là, la fonction est exécutée
et je suis prêt a parier que c'est directement au chargement de la page et pas dans le ready ...
=> ta page n'a pas fini de charger et ton canvas n'est pas instancié .
var canvas = document.getElementById('dashboard'); => paf !!!! erreur

[scandinave]

donc tu me dis que le premier cas marche, parce que j'ai un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
 
}

pourtant l'item est bien instancié dans le document.ready également :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function(){
     var  dash = Dashboard.getIntance();
     var text = new Text("mon message", 1, 50);
});

l'object Text hérite de Item. Donc je ne voit pas pouquoi le premier appel marche bien mais que le 2nd dans l'object Text ne marche pas.

[SpaceFrog]

je ne parle pas ce l'instanciation, je parle de la declaration ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Dashboard = (function(){ ... })()

ça tu l'a mis ou dans ton code ...

si il n'est pas dans le ready, et qu'il est dans le head de ta page, c'est a dire dans le flux AVANT ta balise canvas ...
vu que la focntion est exécutée avec les () finales, à ce moment là ton canvas n'existe pas encore ...


A passage, ce n'est pas la cause de ton souci, mais tant qu'a prendre de bonnes habitudes de codage, il y a une nouvelle entrée dans les contributions qui peut t'intéresser : http://www.developpez.net/forums/d13...n/#post7107219

[scandinave]

ahh oui, effectivement, c'est tout à fait ça. Comment je peux résoudre ce problème?

J'ai essayer de placer çà

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
$(document).ready(function(){
     var Dashboard = (function(){
         var constructeur = function(){
            var canvas = document.getElementById('dashboard');
            var ctx = canvas.getContext('2d');
            // others attributs and methods
         }
 
         var instance = null; 
         return new function(){
             this.getInstance = function(){
                 if( instance == null){
                        instance = new constructeur();
                 }
                 return instance;
             }
         }
 
     };
});

Mais sans succès

En gros avant, j'avais la même classe mais non construite sous forme de singleton. Tout marchais correctement. seulement j'ai maintenant besoin du singleton.

[SpaceFrog]

ne lance par la fonction au départ ?
=> enlève les () à la fin

[scandinave]

Ok mais le singleton marche toujours dans ce cas? je suis pas encore trop au point niveau design pattern javascript.

J'ai trouvé une solution qui marche en déclarant les fichiers .js en fin de page html. Comme ça le canva est déjà déclarée. Je sais pas si c'est une bonne idée.

[Bovino]

La notion de singleton n'existe pas en JavaScript...
D'autre part, si Dashboard() renvoie une valeur, ce n'est plus un constructeur...