HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptMinor

JavaScript Good Patterns - Is this a good example?

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
thisjavascriptexamplepatternsgood

Problem

I have been trying various formats of namespaces and modules patterns, however I have not come across a solution that I would use for all my projects.

I've been developing the following, that would allow me to separate my application through applications, modules, functions and global variables. Possibly I'm going to add the possibility to have public and private variables and methods.

```
/*--------------------------------------------------------------------------
* Project name
*
* Created : 01/01/2014
* Modified : 01/01/2014
* Version : 0.1
* Developer : Developer Name
*
---------------------------------------------------------------------------*/
/**
* @class mainClassName
* @constructor
*/
window.APP_NAME = window.APP_NAME || {};
window.APP_NAME.moduleName = window.APP_NAME.moduleName || {};
window.APP_NAME.deepExtend = window.APP_NAME.deepExtend || {};

window.APP_NAME.moduleName.globalVariableAvailableForEveryModuleFunctions = 0;

window.APP_NAME.moduleName.functionInsideModule1 = function (options) {

"use strict";
/jslint nomen: true/
/global $, jQuery/

// Check for arguments here.
if (arguments.length !== 1) {
throw new Error('[ClassName here] Please provide your options.');
} // if

// Increase global variable.
window.APP_NAME.moduleName.globalVariableAvailableForEveryModuleFunctions += 1;

// Store module defaults.
window.APP_NAME.moduleName.config = {
name: 'John',
age: 29
};

// Parse incoming object that stores config files.
window.APP_NAME.deepExtend(window.APP_NAME.moduleName.config, options);

// Rest of the application here.
alert(window.APP_NAME.moduleName.config.name);

// Call function in same module, to alert the age
window.APP_NAME.moduleName.functionInsideModule2();

};

window.APP_NAME.moduleName.functionInsideModule2 = function () {

"use strict";
/jslint nomen: true/
/global $, jQuery/

//

Solution

Lets look at a couple of improvements:

new is creating an object that you aren't using. read edit for clarification

new window.APP_NAME.moduleName.functionInsideModule1({
    name: 'Mary'
});


The function functionInsideModule1 doesn't return an object and doesn't assign anything to this. So there is no need for the new.
You're referencing the whole namespace window.APP_NAME.moduleName every time. Instead try putting it in a variable. Or maybe on the inside of the module refer to this instead.

(function () {

    var moduleName = window.APP_NAME.moduleName;

    moduleName.functionInsideModule1 = function (options) {
        /* snip ... */

        moduleName.globalVariableAvailableForEveryModuleFunctions += 1;
        // OR
        this.globalVariableAvailableForEveryModuleFunctions += 1;
    };

    moduleName.functionInsideModule1({
         name: 'Mary'
    });

}());


Edit:-

To create a new instance of moduleName you need to do this:

(function () {
    // private variables go here
    var globalPrivateCount = 0;

    var moduleName = window.APP_NAME.moduleName = window.APP_NAME.moduleName || function moduleName(initialval) {
        globalPrivateCount ++;

        this.globallyAccessible = 'unique for each instance';

        this.functionInsideModule1 = function (options) { ... };
        this.functionInsideModule2 = function (options) { ... };

        var instancePrivateVariable = initialVal;

        this.incr = function () { instancePrivateVariable++; };

        return this;
    };
    moduleName.nonUniqueGloballyAccessible = 0;
}());


and the usage is something like:

var moduleName = window.APP_NAME.moduleName;
var firstInstance = new moduleName(10);
// OR
var anotherInstance = new window.APP_NAME.moduleName(20);

Code Snippets

new window.APP_NAME.moduleName.functionInsideModule1({
    name: 'Mary'
});
(function () {

    var moduleName = window.APP_NAME.moduleName;

    moduleName.functionInsideModule1 = function (options) {
        /* snip ... */

        moduleName.globalVariableAvailableForEveryModuleFunctions += 1;
        // OR
        this.globalVariableAvailableForEveryModuleFunctions += 1;
    };

    moduleName.functionInsideModule1({
         name: 'Mary'
    });

}());
(function () {
    // private variables go here
    var globalPrivateCount = 0;

    var moduleName = window.APP_NAME.moduleName = window.APP_NAME.moduleName || function moduleName(initialval) {
        globalPrivateCount ++;

        this.globallyAccessible = 'unique for each instance';

        this.functionInsideModule1 = function (options) { ... };
        this.functionInsideModule2 = function (options) { ... };

        var instancePrivateVariable = initialVal;

        this.incr = function () { instancePrivateVariable++; };

        return this;
    };
    moduleName.nonUniqueGloballyAccessible = 0;
}());
var moduleName = window.APP_NAME.moduleName;
var firstInstance = new moduleName(10);
// OR
var anotherInstance = new window.APP_NAME.moduleName(20);

Context

StackExchange Code Review Q#45483, answer score: 5

Revisions (0)

No revisions yet.