i have 2 .js utility files. and im using module pattern like below. MODULE1 & MODULE2 are global namespaces. In addition internally both the .js files are using same variable name for namespace i.e "mynamespace"
i would like to know that would cause any issue having internal namespace name same in both the modules.
1.js
var MODULE1 = (function () {
var mynamespace = {};
privateVariable = 1;
function privateMethod() {
// ...
}
mynamespace .Init = function () {
// ...
};
return mynamespace ;
}());
2.js
var MODULE2 = (function () {
var mynamespace = {};
privateVariable = 1;
function privateMethod() {
// ...
}
mynamespace.Init = function () {
// ...
};
return mynamespace;
}());
No because mynamesapce variable is only defined in the local scope of each function.
It would cause you trouble if mynamespace was global, which isn't the case
Related
I've been running into this issue lately and am looking for a good solution.
Below is the basic setup.
In c.js, a is an empty object. Currently I got around this by putting the var a=require('./a.js') inside the function (cFunction) that needs access to module a's methods. But is that the best way to go about this?
Thanks,
David
main.js
var a = require('./a.js');
a.js
module.exports = (function() {
var b = require('./b.js');
function aFunction() {
console.log("aFunction");
}
return {
aFunction: aFunction
};
})();
b.js
module.exports = (function(){
var c = require('./c.js');
function bFunction(){
console.log('bFunction');
}
return {
bFunction: bFunction
};
})();
c.js
module.exports = (function(){
var a = require('./a.js');
console.log(a); //empty object
function cFunction(){
a.aFunction(); //undefined
console.log('cFunction');
}
return {
cFunction: cFunction
};
})();
Let's say I have 2 files: main.js, and module.js:
//main.js
const myModule = require('./module');
let A = 'a';
myModule.log();
//module.js
module.exports = {
log() {
console.log(A);
}
}
When calling myModule.log, A is not defined. Is there any way I can make global vars from main.js available in module.js? Thanks.
Use force, use global
const myModule = require('./module');
let A = 'a';
global.A = A
myModule.log();
A is not a global variable. every module is itself wrapped in a function, A is local to that function. You need to explicitly pass reference to your variable
module.exports = {
log(a) {
console.log(a);
}
}
//...
//main.js
const myModule = require('./module');
let A = 'a';
myModule.log(A);
I am a little confused here. Following the module pattern in JS, a module is normally a returned object from an anonymous function that is immediately executed. But what if I don't want to execute the function and instead call it whenever I need to e.g. window.onload.
var module = function (args) {
//private members
return {
//public members
};
};
var module_instance = module (args); // module instance or facade instance?
Are there any problems with this implementation? Is there a different, more efficient way to do this?
Also, following the previos block of code, what if I call the function again and asign the returned value to another variable:
var module_instance2 = module (args);
does that mean I now have a 2nd facade of the function or is it a new function altogether?
Cheers!
That function is the constructor of your module so each time you call that function, a new separate instance of the module is created and assigned to the receiving variable.
There is not any problem with this implementation (actually it is very common,), and you can use it wherever in your program to obtain a new instance of that module.
Best.
The module pattern is similar to namespaces in other languages, and is used to prevent global variable pollution and as a method of encapsulation.
window.module1 = (function() {} {
var version = "0.0.1";
function func1 () {};
function func2 () {};
return = {
version: version,
func1: func1,
func2: func2,
};
})()
You could have a Function DeclareModule() that defines a module on the window object.
var DeclareModule = function(name, content) {
if (typeof content === 'object') {
window[name] = content;
} else if (typeof content === 'function') {
window[name] = content();
}
};
//Declared by object
DeclareModule("module1", {
version: "0.0.1",
func1: function () {},
func2: function () {}
});
//Declared by function
DeclareModule("module1", function () {
var version = "0.0.1";
function func1 () {};
function func2 () {};
return {
version: version,
func1: func1,
func2: func2
};
});
Have a look at AMD and CommonJS modules, or an article by Addy Osmani.
Let's say I have these files: a.js b.js c.js which each one is defined like this:
(function(){
function afunction() {
}
function yetanotherfunction() {
}
... ...
})();
I also have a file named common.js, which contains functions that can be shared by multiples:
function commonFunction() {
}
function yetAnotherCommonFunction() {
}
I would like to put commonFunction, yetAnotherCommonFunction inside scope. ie:
(function() {
... //commonFunction, yetAnotherCommonFunction goes here
})();
however if I do so, I won't be able to call the common functions from a/b/c.js scope. Is there a better way to handle this?
Namespaces:
var Common = (function () {
var Common = {};
Common.commonFunction = function() {
}
return Common;
}())
Common.commonFunction() // do something from anywhere
You can create a namespace for each script. A simple script to do this would be to have a namespace script like this :
var ns = function (namespace, callback) {
var nssplit = namespace.split('.'), x, curObj = window, curPos = null, lasObj;
for (x = 0 ; x < nssplit.length ; x++) {
curPos = nssplit[x];
if (curObj[curPos] === undefined) {
curObj[curPos] = {};
}
lasObj = curObj;
curObj = curObj[curPos];
}
lasObj[curPos] = callback;
};
ns('local.test', function() {
document.getElementById('test').innerHTML = "test";
});
local.test();
You can see it in action here http://jsfiddle.net/Nemesis02/Qtq8Q/
How do I access/create a sub module based on the module pattern?
I would like to have the ability to access methods from sub modules in my Modules.js main file.
Module.js
var Module = (function() {
function A(){
console.log("Module: A");
B();
};
function B(){
console.log("Module: B");
Module.Utils.C(); /* Here is the problem */
};
return {
A:A,
B:B
}
} ());
$(function() {
Module.A();
});
Module.Utils.js
var Module = Module ? Module : {};
Module.Utils = (function() {
var settings = {
x : 1,
y : 2
};
function C(){
console.log("Module.Utils: C");
};
function D(){
console.log("Module.Utils: D");
};
return {
C:C,
D:D
}
}());
There's nothing wrong with your approach, provided:
You load the sub-module script after the module script
You do not attempt to access the sub-module script before it is loaded
You're OK with making your primary module dependent on the existence of the sub-module. (I'm not so sure this is a good idea.)
Side-issue
Your code currently has a syntax error on the following line:
var Module.Utils = (function() {
There should be no var keyword preceding the assignment.
Example Code
Here's a simplified version of your code -- stripped to show only the methods I'm invoking -- that demonstrates that your approach works:
var Module = (function() {
function B() {
console.log("Module: B");
Module.Utils.C(); /* accessing submodule public methods */
};
return {
B: B
};
})();
var Module = Module || {};
Module.Utils = (function() {
function C() {
console.log("Module.Utils: C");
};
return {
C: C
}
})();
Module.B();
Output:
Module: B
Module.Utils: C
You should look into using an actual module framework like RequireJS.
A "submodule" would then just be a module located at module/utils, and your module module would require it as a dependency, which RequireJS would take care of resolving for you.