snippetjavascriptMinor
JavaScript Good Patterns - Is this a good example?
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/
//
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:
The function
You're referencing the whole namespace
Edit:-
To create a new instance of
and the usage is something like:
new is creating an object that you aren't using. read edit for clarificationnew 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.