Javascript namespace - good pratices?

[plicatibu]

In other programming languages like Java, C# and ActionScript I use a lot the package feature in order to organize my code.

 

JavaScript doesn't have packages so I'm doing the following:

 

I create a namespace named (say) Setup to hold all constants I'm going to use and another namespace named (say) MyGame.

 

Then I add  Setup to MyGame as follow

MyGame.Setup = Setup;

The problem is that it becomes very inconvenient to type and to read (say)

MyGame.Setup.GAME_STATE_IMG_VALUE

to access a constant defined originally in Setup namespace. Imagine then when I have more deeper namespaces.

 

It would be easier to type just

Setup.GAME_STATE_IMG_VALUE

Am I doing the right thing including one namespace into another one or should I have 2 separated namespaces?

 

What's the best practice?

 

Moreover, is their any performance penalty accessing variables and constants in deeper namespace?

 

Thanks

 

 

[prtksxna]

I am not sure if this will solve your problem completely but you could do something like this - 

 

game.main.js

( function ( MyGame ) {  MyGame = {};} ) ( MyGame );

game.setup.js

( function ( MyGame ) {  var Setup = {};  Setup.CONST = 42; // No extra typing  MyGame.Setup = Setup;} ) ( MyGame );

But yes if you refer to it from elsewhere you'll have to type out the whole thing.

[rich]

This is well worth a read: http://programming.oreilly.com/2014/03/javascript-without-the-this.html

[away168]

I usually do it this way:

var engine = window.engine || {};engine = {};engine.core = {};engine.lib = {};engine.graphics.2d = {};var game = window.game || {};game.core = {};game.entity = {};game.whatever = {};

Just a little addition, when using namespace means you're in a large-scale development, which means you may need your own compiler (or available) and little OOP framework to perform better OOP and reorder your files so each classes can depend on each other before it throws an error when you perform an inheritance. This is unlike Java/C# that doesn't really care about file ordering.

To save your life from these OOP craziness in JavaScript unless you like to play around with it, you may want to try to use something like require.js, or simply use TypeScript.

 

I use my own implementation to wrap the classes, which may be out of the topic, but my example usage on namespace above goes like this:

game.entity.Car = retain(function() {    // Like Java import.    var Vehicle = game.entity.Vehicle;    var Engine = game.entity.Engine;    // Inheritance and class creation.    return Vehicle.extends({        engine: null;                // constructor.        __construct: function() {            this.engine = new Engine();        }        // Whatever variables or methods.    });});

This is just one sample of my implementation, and there are many others out there using different techniques, because JavaScript is very, very flexible.

 

 

This is well worth a read: http://programming.oreilly.com/2014/03/javascript-without-the-this.html

 

Thank you Rich, this is it. This is groundbreaking (at least for me)! I was stuck with traditional OOP using 'this' trying to find a better solution.
EDIT: I've tested the technique, but unfortunately it is unable to provide a comparison whether an object is belong to a class/parent class or not (such as using instanceof).

[prtksxna]

This is well worth a read: http://programming.oreilly.com/2014/03/javascript-without-the-this.html

 

Thanks for this link I read this kind of a pattern in a book that I was reading but I always fail to implement it in real life code.

I can't wait for the EcmaScript6 arrow functions!

[plicatibu]

Thank you all for replying.

 

@rich the reading was very instructive.

[d13]

 

I can't wait for the EcmaScript6 arrow functions!

Actually, you can start using ES6 right now:

 

https://github.com/google/traceur-compiler

 

Arrow functions, classes, modules and promises  

The ES6 spec is now finally stable enough for production level work.

the only thing they're still tinkering with is the module loader syntax.

Traceur is great; easy to use and compiles your code down to optimized ES5.

 

For me, the best thing is arrow functions, because it it binds the value of "this" to the correct scope... that was always JavaScript's biggest headache.

 

Or...

... there's no reason not to use Typescript, Coffeescript or Dart. (just pick the one that matches your coding style.)

JavaScript is pretty much becoming the assembly language of the web, so there's no real reason to code in it directly anymore.