Comment organiser mon code en 'modules'?

Question

Je suis en train d'essayer d'organiser mon code. J'ai plusieurs modules dans mon projet, que j'aimerais organiser. Le fait est que tout ce qui m'est venu à l'esprit ne fonctionne pas. Je pense actuellement quatre idées:

1. objet simple - n'est pas utile en raison de problèmes de la portée. Utiliser this.a fonctionnerait, mais this a une signification différente en fonction de qui l'a appelé donc ce n'est pas fiable. Par exemple, j'ai une fois affecté une fonction à une classe WebSocket, mais tout à coup this fait référence à l'instance WebSocket lorsque la fonction a été appelée par un événement WebSocket. Je pourrais utiliser bind(foo) chaque fois que j'appelle la fonction, mais il doit y avoir une autre façon je suppose.

   var foo = { 
       a: 3, 
       s: function() { 
        alert(a); // a doesn't exist in this scope 
        alert(this.a); // 'this' isn't always foo 
        alert(foo.a); // I would have to put 'foo.' before each variable 
            // reference, but I'm sure that's not the way to do it 
       } 
   }; 
   

2. instance-a n'est pas défini. Encore une fois, this n'est pas fiable.

   var foo = function() { 
       this.a = 3; 
       this.s = function() { 
        alert(a); 
       }; 
   }; 
   var foo_instance = new foo(); 
   foo_instance.a = 4; 
   foo_instance.s(); // Error: a is not defined 
   

3. Fermeture par exemple - Ne retourne rien; il reste undefined.

   var foo = (function() { 
       this.a = 3; 
       this.s = function() { 
        alert(a); 
       }; 
   })(); 
   // foo === undefined 
   

4. Fermeture avec getter/setter - fonctionne à merveille sur Chrome, mais IE ne supporte pas les getters/setters.

   var foo = (function() { 
       var a = 3; 
       return { 
        get a() { return a; }, 
        set a(v) { a = v; }, 
   
        s: function() { 
         alert(a); // Doesn't work in IE as getters/setters are 
            // not supported 
        } 
       }; 
   })(); 
   

Comment puis-je organiser efficacement mes modules, afin que je puisse accéder aux propriétés en toute sécurité et de manière multi-navigateur?

Merci.

Answer 1

Il me semble que vous n'avez pas vraiment compris comment this et les fermetures fonctionnent en JavaScript.

S'il vous plaît lire sur both de these sujets et aussi jeter un oeil à namespaces.

Il existe plusieurs façons de réaliser des modules, mais cela n'a pas beaucoup de sens d'en parler ici, à moins de comprendre les bases, veuillez donc consulter mes liens pour une explication détaillée.

Answer 2

3 est indéfini car vous ne renvoyez rien. au lieu d'attribuer des propriétés et des méthodes pour « ceci », essayez ceci:

var foo = (function() { 
    var self = {}; 

    self.someProperty = someValue; 

    self.someFunction = function() { 

    } 

    return self; 
}()); 

foo retourne maintenant un objet avec les propriétés et méthodes définies. De cette façon, vous ne devez jamais vous demander à quoi cela fait réellement référence.

Answer 3

Votre premier extrait de code utilise une fermeture et correspond à un motif popularisé par le yui library. Le second modèle correspond à la notion de membre privé, public et privilégié d'un objet.

Je vous recommande de lire cet article de base au sujet de javascript private members par Douglas Crockford, et aller soit avec la première option ou la seconde. Ils sont sémantiquement équivalents.

(La troisième et la quatrième extraits me semblent trop complexes par rapport à aux deux premiers)