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
};
})();
Related
So the first one being something like:
myFile.js
var name = "Peter";
module.exports.sayHello = function () {
console.log('Hello ' + name);
}
And the second one
myFile.js
module.exports = function () {
var name = 'Mary';
function sayHello () {
console.log('Hello ' + name);
}
return {
sayHello : sayHello
};
}();
Essentially it's the same thing right? If not, what's the difference and what's the pros and cons of each method?
Why do we need modules?
When you have a code like this:
// module 1
var a = 1;
var x = function (){
return a;
};
// module 2
var a = 2; // duplicated variable declaration
var y = function (){
return a;
};
// main
console.log(x()); // BUG: this should read value from module 1 instead of module 2
console.log(y());
It will lead to error, since the a variable was already taken by the first module. You need to define modules somehow.
Using a prefix
By old-style procedural programming you would add a prefix to separate modules:
// module 1
var m1_a = 1;
var m1_x = function (){
return m1_a;
};
// module 2
var m2_a = 2;
var m2_y = function (){
return m2_a;
};
// main
console.log(m1_x());
console.log(m2_y());
But this makes the code less readable.
Using closures
By javascript you have closures, which make things a little bit easier:
// module 1
var x = (function (){
var a = 1;
var x = function (){
return a;
};
return x;
})();
// module 2
var y = (function (){
var a = 2;
var y = function (){
return a;
};
return y;
})();
// main
console.log(x());
console.log(y());
But still you have different modules in a single file, so that file will be really big and hard to maintain.
Using the node.js module loader
By node.js you can move the code of different modules to separate files, so it will be easy to maintain the code of different modules, since you will be able to find the relevant part of the code much faster:
m1.js
var a = 1;
var x = function (){
return a;
};
module.exports = x;
m2.js
var a = 2;
var y = function (){
return a;
};
module.exports = y;
main.js
var x = require("m1");
var y = require("m2");
console.log(x());
console.log(y());
You can do the same in the browser
The simplest node.js style browser module loader I could come up with so far, is this:
var cache = {};
function require(name){
if (name in cache)
return cache[name];
var uri = "./" + name + ".js";
var xhr = new XMLHttpRequest();
xhr.open("GET", uri, false);
xhr.send(null);
var moduleCode = xhr.responseText;
var fn = new Function("module", moduleCode);
var module = {};
fn(module);
cache[name] = module.exports;
return cache[name];
};
Ofc. it is much safer to use browserify, webpack, require.js and other more sophisticated libs, I just wanted to show you, it is not that hard to write a loader.
What did we learn from all of this?
Both node.js modules and closures are for modularization. You should not mix them, since they solve the same problem, and mixing them will lead only to confusion!
For me it's the same thing.
Maybe the first example is more common.
You can use both, according to the rest of your code.
Yes they are basically the same. You just don't need the verbosity of the second example.
In the first example you are adding a named property to the already existing module.exports object injected by node.js, in the second example you are overriding the original object - there is no difference for the consuming end.
Lets go to the basics of module mechanism in NodeJS. For every JS
file the ground reality is which happens on the top of file:
var exports = module.exports = {};
Whenever we try to fetch the import it retrieves module.exports only
If we do both in Js file
exports.key = "key1" and module.exports = {key : "VAL"}
only the module.exports is fetched during the import according to the rule.
Now coming back to your question Adding module.exports.sayHello will
add the reference to the {} which is common with exports variable too.
However if you do
module.exports = function () {} // some function
it breaks the chain and it is only assigned to module.exports and not
exports variable.
This is why if we add any key to exports variable is retrieved via
module.exports during import! Hope it clarifies!
A very good article on this https://www.sitepoint.com/understanding-module-exports-exports-node-js/
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 c++ programmer at heart and I'm currently being thrown into the deep end with javascript and asked to swim very quick. I am using browserify so I am able to use the require function that node.js uses to get get access to code in other files. Now everything I have done seems to be working fine, I am just unsure that I am doing it correctly.
//a.js
module.exports = function(){
alert("hello world");
}
//b.js
var myClass = new MyClass();
module.exports = myClass;
//c.js
var a = require("./a.js");
a();
var b = require(./b.js");
b.prototype.test = 555;
//d.js
function () {
var a = require("./a.js");
a();
var b = require(./b.js");
assert(b.test === 555);
}
function () { // duplicated require called inside same file but different function
var a = require("./a.js");
a();
}
So in every function and every file I want to use a.js do I have to put the require call? Seems like it will get a bit convoluted. Is there a better way to do this? Also assuming that c.js is ran before d.js will the assert pass or does it result in a copy being created of myClass so the objects are different between C and D?
Thanks for any help.
The result of require function is cached, so it would be the same only within a single process.
By the way, I cannot understand why you require a.js twice. Why not just do
//d.js
var a = require("./a.js");
function () {
a();
var b = require("./b.js");
assert(b.test === 555); // success!
}
function () { // no dupes!
a();
}
One technique to solve cyclical references issues between modules in Node.js is to export an object before requiring other modules.
For example:
var MyModule = {};
module.exports = MyModule;
var req1 = require("req1.js");
var req2 = require("req2.js");
...
module.exports.MyFunction = function(...) { ... };
module.exports.MyVariable = 22;
...
Where are MyFunction and MyVariable stored? Is it in the MyModule object?
The reason I am asking this question is I want to know whether I can simplify my code. Could I safely replace my code with the following?
var MyModule = {};
module.exports = MyModule;
var req1 = require("req1.js");
var req2 = require("req2.js");
...
MyModule.MyFunction = function(...) { ... };
MyModule.MyVariable = 22;
...
Yes, those two code snippets are functionally equivalent.
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.