I'm trying to organize my code using revealing module pattern but I got myComponent is not a function error. Hmm what's wrong?
var canva = new fabric.Canvas('canvas');
var myComponent = function(canva) {
var init = function() {
console.log('init');
};
return {
init:init
};
}(canvas);
myComponent(canva).init();
You use this syntax :
var myComponent = function(canva){
//function body
}(canvas);
However, you have to not call the function after decalring it , so , you have to use the following syntax instead :
var myComponent = function(canva){
//function body
}// remove : (canvas);
You can either initialize the function with canvas by default or provide it as a param, but not both.
var canva = new fabric.Canvas('canvas');
var myComponent = function(canva){
var init = function(){
console.log('init')
}
return{
init:init
}
}(canva);
myComponent.init();
(this variant is useful if your component's consumers/clients do not need to configure the used canvas/dependency)
or
var canva = new fabric.Canvas('canvas');
var myComponent = function(canva){
var init = function(){
console.log('init')
}
return{
init:init
}
};
myComponent(canva).init();
(this variant is useful if your component's consumers/clients need to provide their own parameterized/custom dependency to your component)
try :
var myComponent = function(canva){
var init = function(){
console.log('init')
}
return{
init:init
}
};
// and use it as
myComponent(null).init();
Long story short, it's a parser problem and you need to wrap self-invoking functions with parentheses (see code below)
When the parser encounters the function keyword in the global scope or inside a function, it treats it as a function declaration (statement), and not as a function expression, by default. If you don’t explicitly tell the parser to expect an expression, it sees what it thinks to be a function declaration without a name and throws a SyntaxError exception because function declarations require a name.
Credit for the exact wording above goes to: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
var myComponent = (function(canva) {
var init = function() {
console.log('init');
};
return {
init:init
};
})(canvas);
var canva = new fabric.Canvas('canvas');
myComponent.init();
Also, change myComponent(canva).init(); to myComponent.init();. myComponent is not a function.
function(canva){is an IIFE which returns an Object with a single property, init, which is a function ... note that this means myComponent is the object returned, not a function