Using Module pattern - javascript

I'm trying to use Module pattern where I'm getting the error "Cannot read property of undefined". This is because when I'm calling the module method with the module name, it is not able to get the module name and is getting it as undefined. Below is the code:
var myModule = (function(){
var myMethod;
myMethod = function() {
alert("callable");
};
return {
anotherMethod: function(){
myMethod();
}
};
}());
And below is how I'm calling the module method:
myModule.anotherMethod();
Please suggest if I'm missing anything.
Cheers,
AW

Based on this code working fine in a JSFiddle and the error, I believe you may not be properly including the file the JavaScript code is in before attempting to execute it. Here is some more information about the JavaScript module pattern.
<script>
var myModule =
(function(){
var myMethod;
myMethod = function() {
alert("callable");
};
return{
anotherMethod: function(){
myMethod();
}
};
}()
);
myModule.anotherMethod();
</script>
works perfectly fine and alerts "callable".

Related

Backbone.Marionette.Controller throws "Uncaught TypeError: r.apply is not a function"

I want to run my Backbone.Marionette application, but when I try to do it, it breaks in this line of my code (controller.js):
var appController = new MyController();
Where MyController looks like:
var MyController = new Backbone.Marionette.Controller.extend({
showItems: function(options) {
this.collection = new MyCollection();
var self = this;
this.collection.fetch({
success: function(options) {
console.log("SUCCESS");
var myView = new MyCollectionView({
collection: self.collection
});
options.region.show(myView);
},
error: function(options) {
console.log("FAILED");
}
});
}
});
and it shows the following error message:
Uncaught TypeError: r.apply is not a function
If I see the details of this error, it breaks in the else of this code from backbone-min.js (line 1884).
// The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent constructor.
if (protoProps && _.has(protoProps, 'constructor')) {
child = protoProps.constructor;
} else {
child = function(){ return parent.apply(this, arguments); };
}
And then, looking at this, you can see that the error starts in my code, as I show in the following image.
I tried to change the line of my code to this:
var appController = MyController();
and it shows the same error, but the difference now is that it only breaks in the backbone.js code (same line), which is really weird.
Thanks Emile, I followed your instructions but now throws the
following error in the backbone.marionette.js code:
backbone.marionette.js:19
Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
The error is easy to spot since it points to the following line in the Marionette code:
Radio = 'default' in Radio ? Radio['default'] : Radio;
Which means Radio is undefined.
From Marionette download page:
Backbone.Radio is required for Marionette.
Take time to read the documentation on how to get started for each lib you want to use. It will really save you time.
remove the new key word from the modal, use the new only when you instantiate the modal
var MyController = Backbone.Marionette.Controller.extend({
var appController = new MyController();

How to write a function to disable console.log and can be required in other react file?

Below is my static.js file:
var Helper = {
console.log: function(){
},
Login: function(){
var name;
var password;
//rest of the code
}
}
module.exports = Helper;
And below is my test.js file:
var Helper = require('./static.js');
console.log("Test");
And I got some error from this line console.log: function(){} in static.js file.
What I want is nothing will show on terminal even I console.log('Test') because I write function(){} for console.log.
Is anything I did wrong?
Just overwrite console.log function in your script:
console.log = function() {};
Overwrite other log function too:
window.console.log = window.console.debug = window.console.info = window.console.error = function () {
return false;
}
I just figured out how to fix this problem.
I rewrite the function like below..
DisableConsole: function(DEBUG){
if(!DEBUG){
if(!window.console) window.console = {};
var methods = ["log", "debug", "warn", "info"];
for(var i=0;i<methods.length;i++){
console[methods[i]] = function(){};
}
}
}
and require this static.js file in my top component which mean every component under this main component will also include this static.js.
and call this function in the very beginning.
AppHelpers.DisableConsole(false);
You have this error because you're trying to create an object with a key console.log, but it is a syntax violation when using object literal syntax, because . dot is a special symbol.
Even if it worked, you wouldn't achieve what you want, since console.log is a global function and you are working with just a custom created object.
What you actually want to do is to silence the global function like this console.log = function() {};. Beware, however, that you won't be able to restore the old behaviour if you didn't save the original function: var oldConsoleLog = console.log.
There is also a module for it.

ReferenceError: ProductStore is not defined

I'm trying to migrate some old javascript / backbone code over to our new system and I'm running into the following error.
ReferenceError: ProductStore is not defined
ProductStore.Options = {},
ReferenceError: ProductStore is not defined
ProductStore.type= "board";
My JS file looks like this.
ProductStore.Options= {},
function() {
"use strict", ProductStore.Options.Product = Backbone.Model.extend({
//do something
})
}(),
function() {
"use strict", ProductStore.Options.ProductView = Backbone.View.extend({
//do something
})
}()
There is no other js files, so I'm wondering what I'm doing wrong?
Error says it all, you can't say:
ProductStore.options = {}
unless you have already declared ProductStore (and defined it to be an object).
e.g.
var ProductStore = {};
You have to create a ProductStore JS object first:
var ProductStore = {};
You have to change your , with ;
var ProductStore = {};
Not sure but best practice is to declare object is to make it fail safe. Someone told me the same in one of my project.
var ProductStore = ProductStore || {};

How to unit test the following function in jasmine?

I have a following code:
angular
.module('testApp')
.factory('testDataService', function ($http) {
function testDataService(){
var self = this;
self.test = function(){
//do something
}
self.test1 = function(){
// do something
}
}
return new testDataService();
When I try to write a test case like
beforeEach(function(){
new testDataService();
});
It gives some error like:
> TypeError: '[object Object]' is not a constructor (evaluating 'new testDataService()')
There are numerous functions such as "test", "test1", etc.. inside testDataService. I am not able to test the remaining functions because the scope of the outer function is unreachable. I am not able to get the instance because of "var self=this"
Please help.
There is no need of new operator to create Object.
Please check this one
describe("\n\Testing factory", function () {
var factTestDataService;
beforeEach(inject(function (testDataService) {
factTestDataService= testDataService;
}))
it("factTestDataService test to defined",function(){
expect(factTestDataService.test()).toBeDefined()
})
it("factTestDataService test1 to defined",function(){
expect(factTestDataService.test1()).toBeDefined()
})
it("factTestDataService to defined",function(){
expect(factTestDataService).toBeDefined()
})
});
You need to inject testDataService factory and store it in local var.
Then you can use this one to access the method defined in that factory as you do in angular and can check with different Jasmine test method.
Your factory already returns a new instance of testDataService. There's no need for calling new. When you try to call new on an instance it throws the error you see.

Unexpected assertion error of Sinon

I'm quite new in usage of Sinon.
Suppose we have module ( named myModule.js ) definition :
//myModule.js
var _f2 = function() {
console.log('_f2 enter');
return {prop1:'var1'};
};
var f1 = function(){
var myVar1 = _f2();
console.log('_f2 called');
};
module.exports._f2 = _f2;
module.exports.f1 = f1;
And here is test for the module
var sinon = require('sinon');
var myModule = require('./myModule');
describe('test my module',function(){
var f2Spy ;
beforeEach(function(){
f2Spy = sinon.spy(myModule,'_f2');
});
afterEach(function(){
myModule._f2.restore();
});
it('call _f2',function(done){
myModule.f1();
sinon.assert.called(f2Spy);
done();
})
});
When running this test , I got assert error that _f2 was not called:
AssertError: expected _f2 to have been called at least once but was never called
But from log messages I can see that _f2 was called.
The question is : what cause to the error ? Thanks in advance
If you modify your module this way, then the test will pass:
var f1 = function(){
var myVar1 = exports._f2();
console.log('_f2 called');
};
(By the way, using exports in my code above is equivalent to using module.exports given the code you've shown.)
The problem with your original code is that there is no way for other regular JavaScript code to intercept direct calls to _f2 that are made inside your module. Sinon is regular JavaScript code, so it cannot intercept direct calls to _f2. If you make your call through the exports table, then there is an opportunity for Sinon to patch this table to intercept the call.

Categories

Resources