How to organise my code in 'modules'?

I'm trying to wrap my head around organising my code. I have several modules within my project, which I'd like to organise.

The point is that all what has come to my mind doesn't work out. I'm currently thinking of four ideas:

1. Simple object - Is not useful due to scoping issues. Using this.a would work, but this has a different meaning depending on who called it so it's not reliable. For example, I once assigned a function to a WebSocket class, but all of a sudden this referred to the WebSocket instance when the function was called by a WebSocket event. I could use bind(foo) each time I call the function, but there must be another way I guess.

   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
                 开发者_JS百科        // reference, but I'm sure that's not the way to do it
      }
   };
   

2. Instance - a is not defined. Again, this isn't reliable.

   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. Closure with instance - Doesn't return anything; it stays undefined.

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

4. Closure with getter/setter - Works beautifully on Chrome, however IE doesn't support 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
           }
       };
   })();
   

How would I effectively organise my modules, so that I can access the properties safely and in a cross-browser way?

Thanks.

3 is undefined because you are not returning anything. instead of assigning properties and methods to 'this', try this:

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

    self.someProperty = someValue;

    self.someFunction = function () {

    }

    return self;
}());

foo will now return an object with the properties and methods defined. doing it this way you never have to wonder what 'this' is actually referring to.

It seems to me that you have no real understand of how this and closures work in JavaScript.

Please read up on both of these topics and also have a look at namespaces.

There are a ton of different ways how one could realize modules, but it doesn't make much sense to talk about it here unless you understand the basics, so please refer to my links for a in-depth explanation.

Your first code snippet uses a closure, and corresponds to a pattern that was made popular by the yui library. The second pattern corresponds to the notion of private, public and privileged members of an object.

I recommend that you read this staple article about javascript private members by Douglas Crockford, and go either with the first option or the second. They are semantically equivalent.

(The third and the forth snippets seem overly complex to me in comparison to the first two)