4

I was writing some code with a namespace to reduce clutter when I thought that maybe I could stop polluting the namespace all together by creating an anonymous namespace. I just want to make sure that this is valid and there's no hidden gotcha's that I'm not thinking of.

Basically, the code goes like this:

new function() {
   // bunch of private helper functions and variables
   // ...

   this.loadEventHandler = function()
   {
      // do load stuff
   };

   this.resizeEventHandler = function()
   {
      // do resize stuff
   };

   window.onload = this.loadEventHandler;
   window.onresize = this.resizeEventHandler;
};

Is there anything that I'm not taking in to account? This wouldn't be taken out by a garbage collector or something, right?

Adrian
  • 10,246
  • 4
  • 44
  • 110
  • we usually use a *self executing function* for this, which looks slightly different. – goat May 22 '14 at 05:02
  • 2
    It's not really invalid, but I'm guessing you've never seen anyone do it that way either. Generally speaking you're creating a new empty instance of nothing, so `this` inside the function is just an empty object, then you add properties to that object and assign those to event handlers. Seems okay to me, but I really don't see any advantages to doing it this way? I don't see any pitfalls either, but it looks a little weird, it's not easy to read, and there's really no good reason to write it that way ? – adeneo May 22 '14 at 05:03
  • What's the point of using `this` at all in that case? This doesn't really have anything to do with namespacing IMO. – Felix Kling May 22 '14 at 05:07
  • Your comment to my now deleted answer was correct. As @adeneo said above, this is valid, but fairly non-standard / uncommon. – Adam Rackis May 22 '14 at 05:08
  • @AdamRackis - it is valid -> http://jsfiddle.net/arGg9/1/, but it just creates an empty object ? – adeneo May 22 '14 at 05:09
  • Why would you need to use `this` as a namespace, when you just can use the scope (which is anonymous to the outside as well)? – Bergi May 22 '14 at 05:14
  • 1
    It's not an "anonymous namespace", it is actually calling a function expression as a constructor and is equivalent (though not identical) to an immediately invoked function expression (IIFE). Appart from how *this* is set, it uses *new* to call the function instead of `()`. – RobG May 22 '14 at 05:15
  • @adeneo: [It's not even empty](http://jsfiddle.net/arGg9/3/) – Bergi May 22 '14 at 05:17
  • @Bergi, what do you mean? I went to you jsfiddle but it didn't do anything. What was it supposed to show? – Adrian May 22 '14 at 05:21
  • That the `this` instance you created has a `.constructor` - nothing you would expect from what the pattern is supposed to do. – Bergi May 22 '14 at 06:14

1 Answers1

1

What you have will work, but the more idiomatic, clean way would be to use an IIFE —Immediately Invoked Function Expression.

Your code above creates a function on the fly, and invokes it with new, which results in a new object being created. The object has a loadEventHandler and resizeEventHandler added to it, which you then add to the global object. The function then exists, releasing said object for future garbage collection.

An IIFE lets you get in, and add what you want to the global object, without cluttering it up with all your private helpers and such, and without any useless objects being created in the process.

(function() {
   // bunch of private helper functions and variables
   // ...

   function loadEventHandler()
   {
      // do load stuff
   };

   function resizeEventHandler()
   {
      // do resize stuff
   };

   window.onload = loadEventHandler;
   window.onresize = resizeEventHandler;
})();
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • But it does get executed. And if I understand your code correctly, it doesn't have any state. – Adrian May 22 '14 at 05:06
  • Oh, ok. So it does have private state. No object required. Every time I come back to js, I have to wrap my brain around this syntax. – Adrian May 22 '14 at 05:24