Reference undescore in browserify and backbone set up - node.js

I am trying to wrap my head around bundling an app as a node module using browserify and I have come across the following scenario:
var
$ = require('jquery')(window),
_ = require('underscore'),
// _ = require('lodash/dist/lodash.underscore'),
Backbone = require('backbone');
Backbone.$ = $;
var TodoView = new Backbone.View.extend({
tagName: 'li',
tpl: _.template('An example template'),
events: {/* dom events */},
render: function() {
this.$el.html(this.tpl(this.model.toJSON()));
return this;
}
});
var todoView = new TodoView();
console.log(todoView.el); // => TypeError: Object [object Object] has no method 'apply'
I can't seem to get a reference for the underscore function. I will definitely be needing it to manipulate data. Templating is just an example use case here as there are other scalable options.
On the same note, I have also tried to reference lodash.underscore to no success and it gives same error.
I have hunch I am missing something here. Any help?

Related

what the difference in the export method of nodejs [duplicate]

I've found the following contract in a Node.js module:
module.exports = exports = nano = function database_module(cfg) {...}
I wonder what's the difference between module.exports and exports and why both are used here.
Even though question has been answered and accepted long ago, i just want to share my 2 cents:
You can imagine that at the very beginning of your file there is something like (just for explanation):
var module = new Module(...);
var exports = module.exports;
So whatever you do just keep in mind that module.exports and NOT exports will be returned from your module when you're requiring that module from somewhere else.
So when you do something like:
exports.a = function() {
console.log("a");
}
exports.b = function() {
console.log("b");
}
You are adding 2 functions a and b to the object to which module.exports points, so the typeof the returning result will be an object : { a: [Function], b: [Function] }
Of course, this is the same result you will get if you are using module.exports in this example instead of exports.
This is the case where you want your module.exports to behave like a container of exported values. Whereas, if you only want to export a constructor function then there is something you should know about using module.exports or exports;(Remember again that module.exports will be returned when you require something, not export).
module.exports = function Something() {
console.log('bla bla');
}
Now typeof returning result is 'function' and you can require it and immediately invoke like:
var x = require('./file1.js')(); because you overwrite the returning result to be a function.
However, using exports you can't use something like:
exports = function Something() {
console.log('bla bla');
}
var x = require('./file1.js')(); //Error: require is not a function
Because with exports, the reference doesn't point anymore to the object where module.exports points, so there is not a relationship between exports and module.exports anymore. In this case module.exports still points to the empty object {} which will be returned.
The accepted answer from another topic should also help:
Does JavaScript pass by reference?
Setting module.exports allows the database_module function to be called like a function when required. Simply setting exports wouldn't allow the function to be
exported because node exports the object module.exports references. The following code wouldn't allow the user to call the function.
module.js
The following won't work.
exports = nano = function database_module(cfg) {return;}
The following will work if module.exports is set.
module.exports = exports = nano = function database_module(cfg) {return;}
console
var func = require('./module.js');
// the following line will **work** with module.exports
func();
Basically node.js doesn't export the object that exports currently references, but exports the properties of what exports originally references. Although Node.js does export the object module.exports references, allowing you to call it like a function.
2nd least important reason
They set both module.exports and exports to ensure exports isn't referencing the prior exported object. By setting both you use exports as a shorthand and avoid potential bugs later on down the road.
Using exports.prop = true instead of module.exports.prop = true saves characters and avoids confusion.
Basically the answer lies in what really happens when a module is required via require statement. Assuming this is the first time the module is being required.
For example:
var x = require('file1.js');
contents of file1.js:
module.exports = '123';
When the above statement is executed, a Module object is created. Its constructor function is:
function Module(id, parent) {
this.id = id;
this.exports = {};
this.parent = parent;
if (parent && parent.children) {
parent.children.push(this);
}
this.filename = null;
this.loaded = false;
this.children = [];
}
As you see each module object has a property with name exports. This is what is eventually returned as part of require.
Next step of require is to wrap the contents of file1.js into an anonymous function like below:
(function (exports, require, module, __filename, __dirname) {
//contents from file1.js
module.exports = '123;
});
And this anonymous function is invoked the following way, module here refers to the Module Object created earlier.
(function (exports, require, module, __filename, __dirname) {
//contents from file1.js
module.exports = '123;
}) (module.exports,require, module, "path_to_file1.js","directory of the file1.js");
As we can see inside the function, exports formal argument refers to module.exports. In essence it's a convenience provided to the module programmer.
However this convenience need to be exercised with care. In any case if trying to assign a new object to exports ensure we do it this way.
exports = module.exports = {};
If we do it following way wrong way, module.exports will still be pointing to the object created as part of module instance.
exports = {};
As as result adding anything to the above exports object will have no effect to module.exports object and nothing will be exported or returned as part of require.
Initially,module.exports=exports , and the require function returns the object module.exports refers to.
if we add property to the object, say exports.a=1, then module.exports and exports still refer to the same object. So if we call require and assign the module to a variable, then the variable has a property a and its value is 1;
But if we override one of them, for example, exports=function(){}, then they are different now: exports refers to a new object and module.exports refer to the original object. And if we require the file, it will not return the new object, since module.exports is not refer to the new object.
For me, i will keep adding new property, or override both of them to a new object. Just override one is not right. And keep in mind that module.exports is the real boss.
exports and module.exports are the same unless you reassign exports within your module.
The easiest way to think about it, is to think that this line is implicitly at the top of every module.
var exports = module.exports = {};
If, within your module, you reassign exports, then you reassign it within your module and it no longer equals module.exports. This is why, if you want to export a function, you must do:
module.exports = function() { ... }
If you simply assigned your function() { ... } to exports, you would be reassigning exports to no longer point to module.exports.
If you don't want to refer to your function by module.exports every time, you can do:
module.exports = exports = function() { ... }
Notice that module.exports is the left most argument.
Attaching properties to exports is not the same since you are not reassigning it. That is why this works
exports.foo = function() { ... }
JavaScript passes objects by copy of a reference
It's a subtle difference to do with the way objects are passed by reference in JavaScript.
exports and module.exports both point to the same object. exports is a variable and module.exports is an attribute of the module object.
Say I write something like this:
exports = {a:1};
module.exports = {b:12};
exports and module.exports now point to different objects. Modifying exports no longer modifies module.exports.
When the import function inspects module.exports it gets {b:12}
I just make some test, it turns out that, inside nodejs's module code, it should something like this:
var module.exports = {};
var exports = module.exports;
so:
1:
exports = function(){}; // this will not work! as it make the exports to some other pointer
module.exports = function(){}; // it works! cause finally nodejs make the module.exports to export.
2:
exports.abc = function(){}; // works!
exports.efg = function(){}; // works!
3: but, while in this case
module.exports = function(){}; // from now on we have to using module.exports to attach more stuff to exports.
module.exports.a = 'value a'; // works
exports.b = 'value b'; // the b will nerver be seen cause of the first line of code we have do it before (or later)
To understand the differences, you have to first understand what Node.js does to every module during runtime. Node.js creates a wrapper function for every module:
(function(exports, require, module, __filename, __dirname) {
})()
Notice the first param exports is an empty object, and the third param module is an object with many properties, and one of the properties is named exports. This is what exports comes from and what module.exports comes from. The former one is a variable object, and the latter one is a property of module object.
Within the module, Node.js automatically does this thing at the beginning: module.exports = exports, and ultimately returns module.exports.
So you can see that if you reassign some value to exports, it won't have any effect to module.exports. (Simply because exports points to another new object, but module.exports still holds the old exports)
let exports = {};
const module = {};
module.exports = exports;
exports = { a: 1 }
console.log(module.exports) // {}
But if you updates properties of exports, it will surely have effect on module.exports. Because they both point to the same object.
let exports = {};
const module = {};
module.exports = exports;
exports.a = 1;
module.exports.b = 2;
console.log(module.exports) // { a: 1, b: 2 }
Also notice that if you reassign another value to module.exports, then it seems meaningless for exports updates. Every updates on exports is ignored because module.exports points to another object.
let exports = {};
const module = {};
module.exports = exports;
exports.a = 1;
module.exports = {
hello: () => console.log('hello')
}
console.log(module.exports) // { hello: () => console.log('hello')}
Here is a good description written about node modules in node.js in action book from Manning publication.
What ultimately gets exported in your application is module.exports. exports is set
up simply as a global reference to module.exports , which initially is defined as an
empty object that you can add properties to. So exports.myFunc is just shorthand
for module.exports.myFunc.
As a result, if exports is set to anything else, it breaks the reference between
module.exports and exports . Because module.exports is what really gets
exported, exports will no longer work as expected—it doesn’t reference module
.exports anymore. If you want to maintain that link, you can make module.exports
reference exports again as follows:
module.exports = exports = db;
I went through some tests and I think this may shed some light on the subject...
app.js:
var ...
, routes = require('./routes')
...;
...
console.log('#routes', routes);
...
versions of /routes/index.js:
exports = function fn(){}; // outputs "#routes {}"
exports.fn = function fn(){}; // outputs "#routes { fn: [Function: fn] }"
module.exports = function fn(){}; // outputs "#routes function fn(){}"
module.exports.fn = function fn(){}; // outputs "#routes { fn: [Function: fn] }"
I even added new files:
./routes/index.js:
module.exports = require('./not-index.js');
module.exports = require('./user.js');
./routes/not-index.js:
exports = function fn(){};
./routes/user.js:
exports = function user(){};
We get the output "#routes {}"
./routes/index.js:
module.exports.fn = require('./not-index.js');
module.exports.user = require('./user.js');
./routes/not-index.js:
exports = function fn(){};
./routes/user.js:
exports = function user(){};
We get the output "#routes { fn: {}, user: {} }"
./routes/index.js:
module.exports.fn = require('./not-index.js');
module.exports.user = require('./user.js');
./routes/not-index.js:
exports.fn = function fn(){};
./routes/user.js:
exports.user = function user(){};
We get the output "#routes { user: [Function: user] }"
If we change user.js to { ThisLoadedLast: [Function: ThisLoadedLast] }, we get the output "#routes { ThisLoadedLast: [Function: ThisLoadedLast] }".
But if we modify ./routes/index.js...
./routes/index.js:
module.exports.fn = require('./not-index.js');
module.exports.ThisLoadedLast = require('./user.js');
./routes/not-index.js:
exports.fn = function fn(){};
./routes/user.js:
exports.ThisLoadedLast = function ThisLoadedLast(){};
... we get "#routes { fn: { fn: [Function: fn] }, ThisLoadedLast: { ThisLoadedLast: [Function: ThisLoadedLast] } }"
So I would suggest always use module.exports in your module definitions.
I don't completely understand what's going on internally with Node, but please comment if you can make more sense of this as I'm sure it helps.
-- Happy coding
This shows how require() works in its simplest form, excerpted from Eloquent JavaScript
Problem
It is not possible for a module to directly export a value other than the exports object, such as a function. For example, a module might want to export only the constructor of the object type it defines. Right now, it cannot do that because require always uses the exports object it creates as the exported value.
Solution
Provide modules with another variable, module, which is an object that has a property exports. This property initially points at the empty object created by require but can be overwritten with another value in order to export something else.
function require(name) {
if (name in require.cache)
return require.cache[name];
var code = new Function("exports, module", readFile(name));
var exports = {}, module = {exports: exports};
code(exports, module);
require.cache[name] = module.exports;
return module.exports;
}
require.cache = Object.create(null);
Here is the result of
console.log("module:");
console.log(module);
console.log("exports:");
console.log(exports);
console.log("module.exports:");
console.log(module.exports);
Also:
if(module.exports === exports){
console.log("YES");
}else{
console.log("NO");
}
//YES
Note:
The CommonJS specification only allows the use of the exports variable to expose public members. Therefore, the named exports pattern is the only one that is really compatible with the CommonJS specification. The use of module.exports is an extension provided by Node.js to support a broader range of module definition patterns.
var a = {},md={};
//Firstly,the exports and module.exports point the same empty Object
exp = a;//exports =a;
md.exp = a;//module.exports = a;
exp.attr = "change";
console.log(md.exp);//{attr:"change"}
//If you point exp to other object instead of point it's property to other object. The md.exp will be empty Object {}
var a ={},md={};
exp =a;
md.exp =a;
exp = function(){ console.log('Do nothing...'); };
console.log(md.exp); //{}
From the docs
The exports variable is available within a module's file-level scope, and is assigned the value of module.exports before the module is evaluated.
It allows a shortcut, so that module.exports.f = ... can be written more succinctly as exports.f = .... However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports:
It is just a variable pointing to module.exports.
I found this link useful to answer the above question.
http://timnew.me/blog/2012/04/20/exports-vs-module-exports-in-node-js/
To add to the other posts The module system in node does
var exports = module.exports
before executing your code. So when you want to exports = foo , you probably want to do module.exports = exports = foo but using exports.foo = foo should be fine
"If you want the root of your module's export to be a function (such as a constructor) or if you want to export a complete object in one assignment instead of building it one property at a time, assign it to module.exports instead of exports." - http://nodejs.org/api/modules.html
Let's create one module with 2 ways:
One way
var aa = {
a: () => {return 'a'},
b: () => {return 'b'}
}
module.exports = aa;
Second way
exports.a = () => {return 'a';}
exports.b = () => {return 'b';}
And this is how require() will integrate module.
First way:
function require(){
module.exports = {};
var exports = module.exports;
var aa = {
a: () => {return 'a'},
b: () => {return 'b'}
}
module.exports = aa;
return module.exports;
}
Second way
function require(){
module.exports = {};
var exports = module.exports;
exports.a = () => {return 'a';}
exports.b = () => {return 'b';}
return module.exports;
}
module.exports and exports both point to the same object before the module is evaluated.
Any property you add to the module.exports object will be available when your module is used in another module using require statement. exports is a shortcut made available for the same thing. For instance:
module.exports.add = (a, b) => a+b
is equivalent to writing:
exports.add = (a, b) => a+b
So it is okay as long as you do not assign a new value to exports variable. When you do something like this:
exports = (a, b) => a+b
as you are assigning a new value to exports it no longer has reference to the exported object and thus will remain local to your module.
If you are planning to assign a new value to module.exports rather than adding new properties to the initial object made available, you should probably consider doing as given below:
module.exports = exports = (a, b) => a+b
Node.js website has a very good explanation of this.
1.exports -> use as singleton utility
2. module-exports -> use as logical objects such as service , model etc
why both are used here
I believe they just want to be clear that module.exports, exports, and nano point to the same function - allowing you to use either variable to call the function within the file. nano provides some context to what the function does.
exports won't be exported (only module.exports will), so why bother overwriting that as well?
The verbosity trade-off limits the risk of future bugs, such as using exports instead of module.exports within the file. It also provides clarification that module.exports and exports are in fact pointing to the same value.
module.exports vs exports
As long as you don't reassign module.exports or exports (and instead add values to the object they both refer to), you won't have any issues and can safely use exports to be more concise.
When assigning either to a non-object, they are now pointing to different places which can be confusing unless you intentionally want module.exports to be something specific (such as a function).
Setting exports to a non-object doesn't make much sense as you'll have to set module.exports = exports at the end to be able to use it in other files.
let module = { exports: {} };
let exports = module.exports;
exports.msg = 'hi';
console.log(module.exports === exports); // true
exports = 'yo';
console.log(module.exports === exports); // false
exports = module.exports;
console.log(module.exports === exports); // true
module.exports = 'hello';
console.log(module.exports === exports); // false
module.exports = exports;
console.log(module.exports === exports); // true
Why assign module.exports to a function?
More concise! Compare how much shorter the 2nd example is:
helloWorld1.js: module.exports.hello = () => console.log('hello world');
app1.js: let sayHello = require('./helloWorld1'); sayHello.hello; // hello world
helloWorld2.js: module.exports = () => console.log('hello world');
app2.js: let sayHello = require('./helloWorld2'); sayHello; // hello world
Each file you create is a module. module is an object. It has property called exports : {} which is empty object by default.
you can create functions/middlewares and add to this empty exports object such as exports.findById() => { ... } then require anywhere in your app and use...
controllers/user.js
exports.findById = () => {
// do something
}
require in routes.js to use:
const {findyId} = './controllers/user'
in node js module.js file is use to run the module.load system.every time when node execute a file it wrap your js file content as follow
'(function (exports, require, module, __filename, __dirname) {',+
//your js file content
'\n});'
because of this wrapping inside ur js source code you can access exports,require,module,etc..
this approach is used because there is no other way to get functionalities wrote in on js file to another.
then node execute this wrapped function using c++. at that moment exports object that passed into this function will be filled.
you can see inside this function parameters exports and module.
actually exports is a public member of module constructor function.
look at following code
copy this code into b.js
console.log("module is "+Object.prototype.toString.call(module));
console.log("object.keys "+Object.keys(module));
console.log(module.exports);
console.log(exports === module.exports);
console.log("exports is "+Object.prototype.toString.call(exports));
console.log('----------------------------------------------');
var foo = require('a.js');
console.log("object.keys of foo: "+Object.keys(foo));
console.log('name is '+ foo);
foo();
copy this code to a.js
exports.name = 'hello';
module.exports.name = 'hi';
module.exports.age = 23;
module.exports = function(){console.log('function to module exports')};
//exports = function(){console.log('function to export');}
now run using node
this is the output
module is [object Object]
object.keys id,exports,parent,filename,loaded,children,paths
{}
true
exports is [object Object]
object.keys of foo:
name is function (){console.log('function to module exports')}
function to module exports
now remove the commented line in a.js and comment the line above that line
and remove the last line of b.js and run.
in javascript world you cannot reassign object that passed as parameter but you can change function's public member when object of that function set as a parameter to another function
do remember
use module.exports on and only if you wants to get a function when you use require keyword .
in above example we var foo = require(a.js); you can see we can call foo as a function;
this is how node documentation explain it
"The exports object is created by the Module system. Sometimes this is not acceptable, many want their module to be an instance of some class. To do this assign the desired export object to module.exports."
Both module.exports and exports point to the same function database_module(cfg) {...}.
1| var a, b;
2| a = b = function() { console.log("Old"); };
3| b = function() { console.log("New"); };
4|
5| a(); // "Old"
6| b(); // "New"
You can change b on line 3 to a, the output is reverse. The conclusion is:
a and b are independent.
So module.exports = exports = nano = function database_module(cfg) {...} is equivalent to:
var f = function database_module(cfg) {...};
module.exports = f;
exports = f;
Assumed the above is module.js, which is required by foo.js. The benefits of module.exports = exports = nano = function database_module(cfg) {...} is clear now:
In foo.js, since module.exports is require('./module.js'):
var output = require('./modules.js')();
In moduls.js: You can use exports instead of module.exports.
So, you will be happy if both exports and module.exports pointing to the same thing.
exports: it's a reference to module.exports object
both exports and module.exports point to the same object
until we change the reference of exports object
Example:
if exports.a = 10 then module.exports.a = 10
if we reassign exports object explicitly inside the code like
exports = {} now its lost the reference to module.exports

Dynamic require in Nodejs

I'm requiring a library in NodeJS which has a self-invoking function, that results an error because it looks for an object which is not initialized at that moment .
I want to dynamically require this library when that object is initialized.
Is there any way to dynamically require/ load a library ?
This is the part of library required :
https://github.com/sakren/node-google-maps/blob/develop/lib/Google.js#L5
Actually I want to require when the window object is present (client-side rendering).
So something like this :
'use strict';
var React = require('react');
var Map = require('./map.jsx');
var Common = require('../common/common');
var MapStatic = require('./map-static.jsx');
exports.type = function() {
return 'map';
};
exports.jsx = function(data) {
if (Common.isServerSide()) {
return (<MapStatic data={data}/>);
} else {
return (
<Map data={data}/>
);
}
};
exports.transform = require('./map-transform.js');
The reason the code looks weired is that I'm using react.
In nodeJS require can be used anywhere at anytime whithout much limitations AFAIK.
Which error is thrown once you require at runtime ?
In your else branch.
Try the following.
requires = {}
function getter(key) {
if(!requires[key]){
requires[key] = require(key)
}
return requires[key]
}

Jasmine spies only detect calls on methods called on Node.js exports object

I'm trying to spy on dependencies in a Node.js module from within a Jasmine spec, and I'm encountering some weird behaviour.
Jasmine spies on a method that resides in an object exposed by the exports object in the module. When I call the spied-on method in the module using
exports.umap()
the spy detects it. But when I call it in the module using a variable name I assigned to the same method
var umap = exports.umap
umap()
the spy doesn't detect it.
This seems weird to me given that var umap refers to the same method as exports.umap. Anyone have any ideas why this is? Code below.
(The whole reason I'm doing this is that I want to stub my module's dependencies without the need to design the module as a class and use dependency injection.)
// mapper.js
exports.umap = require('underscore').map;
var umap = exports.umap;
function map () {
return exports.umap([1,2,3], function(el) {console.log(el);return el * 2});
// umap() goes unnoticed by the spy
// return umap([1,2,3], function(el) {console.log(el);return el * 2});
}
exports.map = map;
.
// mapper_spec.js
var mapper = require ('../../lib/mapper');
var map = mapper.map;
describe('mapper', function() {
describe('map', function() {
it('calls umap', function() {
var mapped;
spyOn(mapper, 'umap').and.callThrough();
mapped = mapper.map();
expect(mapper.umap).toHaveBeenCalled();
expect(mapped).toEqual([2,4,6]);
});
});
});
UPDATE
I'm still curious about this issue, however https://www.npmjs.org/package/proxyquire made my whole "spying-on-things-attached-to-export-object" strategy moot.

node js (with ejs view engine) give undefined variable on the view

I've been working on this for a few hours now but still can't get anywhere. I have a view that tries to create a geojson file on the fly and return it to the node view as a variable. The variable is not empty before it hits the res.render line but when it the view gets loaded, the result is always undefined.
app.get('mymap', function(req, res, next){
var featureCollection= {
type : 'FeatureCollection',
features : new Array()
};
Shapes.find({'id' : 778899}, function(err, data){
data.forEach(function(d){
collection.features.push(d);
});
res.render('mymap.ejs', { geojson: featureCollection});
});
});
this is where i call to see if there's something on the view
var mymap = '<%- geojson%>';
alert('Current values ' + mymap.type);
Not really sure what's wrong.. I even tried to just make up a variable with multiple properties, eg:
var test = { place: 'Here and There', size : 5555 }
res.render ('mymap.ejs', { geojson: test });
Still nothing happens.
Well, you had a typo in your code:
var mymap = '<%- geojson%>';
It should be:
var mymap = '<%= geojson %>';
More precisely, if you want to read a Javascript Object from server-side, I suggest to pass it as a JSON string:
var mymap = JSON.parse('<%= JSON.stringify(geojson) %>');

Configuring $.ajax with backbone on node for testing with vows

(Edited to greatly simplify)
On node I have the following server.js file.
var Backbone = require('backbone');
var Tweet = Backbone.Model.extend({});
var Tweets = Backbone.Collection.extend({
model : Tweet,
url: function () {
return 'http://search.twitter.com/search.json?q=backbone'
}
});
var myTweets = new Tweets();
myTweets.fetch();
When I run this, I get an error that says. "Cannot call method 'ajax' of undefined" (1359:14)
basically that is the result of $ being undefined. Why is it undefined? Well there are a number of intermediate steps but when the file is loaded, it is expecting "this" to be "window" in browser or "global" on server. executed on node "this" = {}.
So the question, "How do I set 'this' to global" inside the backbone.js file?
On Backbone >= 1.x, you can simply assign Backbone.$ rather than using Backbone.setDomLibrary.
Solution for Backbone < 0.9.9
The first issue you need to address is how you are running this on Node anyway. Nodejs is a server-side JS environment, but it does not include any logic for controlling a DOM. For that you need to load something like JSDom.
When you have some DOM environment set up, you can load jQuery and your code into it and it should work just like a browser.
To answer your question specifically though, loading jQuery into the global is a bit of an ugly way to do it. You should use Backbone's setDomLibrary function to set $ to what you want.
Try something like this:
if (typeof exports !== 'undefined') {
MyModels = exports;
Backbone.setDomLibrary(require('jquery'));
server = true;
} else {
MyModels = this.MyModels = {};
}
This will fail if you try to do any DOM functions though.

Resources