Javascript namespacing and OO organization

Question

I have my javascript code as follow:

$(document).ready(function () {

    //call of global functions
    globalFunction1();
    globalFunction2(); //create a new object inside
    globalFunction3();
}

function globalFunction1() {
    // do something directly with jquery selectors
    var testObj1 = new object1($('#tree')); // this is called later in the function
    testObj.doSomething();
}


function globalFunction2() {
    // do other things
}

function globalFunction3() {
    // do something directly with jquery selectors
}

//creating an object in js
var object1 = (function () {
        var tree;

        function object1($tree) {
            tree = $tree;
        });
}
object1.prototype.doSomething = function () {
    .....
};
return fancyStructure;
})();

Normally I have more global functions and if possible I always try to create objects using the new keyword (as in Java or C#) Now, I am asked to provide namespacing in order to avoid function conflict problems. Thing is I am not sure how to achieve that giving my current code and knowing that I need to keep the code Object Oriented. Hence, I am wondering if there is a way to add some namespacing effisciently. Any suggestion will do as long as it is along the lines of adding a namespace.

See [How do I declare a namespace in JavaScript?](http://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript) — gfullam, May 11 '15 at 15:42

kreig · Answer 1 · 2015-05-12T14:03:37.397

Use objects as containers for your functions. This is the standard approach of code structuring in JS.

var namespace1 = {
    func1: function() {},
    func2: function() {},
}

var namespace2 = {
    func1: function() {},
    func2: function() {},
}

namespace1.func2();

You can store your OOP code in this namespaces:

var namespace3 = {
    someObj: function() {},
    create: function() { return new this.someObj(); },
}
namespace3.someObj.prototype = { 
    count: 15,
    someFunc() {} 
}

And you can easily extend them:

namespace3.anotherObj = function () {}

Edit

Regarding your example:

var fancyStructureWrapped = (function () {
    var tree;
    function fancyStructure($tree) {
        tree = $tree;
    });

    fancyStructure.prototype.doSomething = function () {
        .....
    };
    return fancyStructure;
})();

// add it to some namespace
someNamespace.fancyStructure = fancyStructureWrapped;

//create an instance
var fs = new someNamespace.fancyStructure();
//and use it
fs.doSomething();

Thx for the answer. The second part regarding the OO code is interesting. Can you please give a better example. For instance I don't see what to put in someObj: function() {???} and how to make a call to it? — Estarossa, May 12 '15 at 11:23

score 2 · Accepted Answer · answered May 11 '15 at 15:41

Just put your functions into an Object:

var mynamespace = {
    globalFunction1 : function() {
        // do something directly with jquery selectors
        var testObj1 = new object1($('#tree')); // this is called later in the function
        testObj.doSomething();
    },
    globalFunction2 : function() {
        // do other things
    },
    globalFunction3 : function() {
      // do something directly with jquery selectors
    }
}

and call the functions with

mynamespace.globalFunction1();

Or you could just define your namespace

mynamespace = {};

And later add the the functions with

mynamespace.globalFunction1 = function() {
    //do something
};

score 0 · Answer 3 · answered May 11 '15 at 15:58

If you're looking for a general approach to managing a growing JavaScript codebase, check out RequireJS and/or Browserify. Both are libraries that allow dividing your code up into modular bits (ie. AMD or CommonJS modules) and then referencing/importing between them. They include tooling for bundling these files into a single JS file when it's time to deploy a production build too.

Javascript namespacing and OO organization

3 Answers3