JS - modular programming

Question

I want to write a program, that displays a rect, when the mouse clicks on the canvas element. I have certain modules, but somehow they seem not to be connected. I pasted the the code without a namespace in a JSFidlle:

fiddle

displaying module

(function(){
    display = (function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        return {            
            canvas: canvas,     
            context : context 
        }
    })();
})();

manager-module

(function(){
    manager = (function(){
        var canvas = display.canvas;    
        var context = display.context ;
        var rect = function(){
            ctx.fillRect(10,10,20,20);
        }
        return {
            rect: rect
        }
    })();
})();

main-module

(function(){
    canvas.addEventListener('mousedown', function(e) {
        manager.rect;
    }, 0);  
})();

goto-bus-stop · Accepted Answer · 2013-05-01 10:46:14Z

2

You forgot to call the manager.rect function. Add some () in main-module and you'll be fine.

Essentially what you're doing in manager-module is this:

manager.rect = function () { ctx.fillRect(10, 10, 20, 20); };

Now when you access manager.rect, it'll return the value function () { ... }, because that's the content of the .rect property.
You need to add parentheses (), to tell the JS engine that it should call the function, not just retrieve it.

edited May 1, 2013 at 10:46

answered May 1, 2013 at 10:33

goto-bus-stop

11.8k2 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

poppel Over a year ago

@Reanimation thank you for the fast answer, it works, but why do I need the (), I thought the function is in variable rect as a function?

goto-bus-stop Over a year ago

Because JavaScript uses () to call functions and property accesses are not function calls. I've edited in some small explanation.

Ally · Accepted Answer · 2013-05-01 10:34:36Z

0

They are all in their own anonymous function, so they are all in their own namespace. If you'd like each section to be able to communicate with each other put all the code in only one anonymous function.

answered May 1, 2013 at 10:34

Ally

4,9629 gold badges39 silver badges47 bronze badges

2 Comments

goto-bus-stop Over a year ago

They don't use the var keyword and will default to the global namespace. Ugly and unmaintainable, but it works.

Ally Over a year ago

New to me, you learn something everyday, will remove this answer soon then.

Collectives™ on Stack Overflow

JS - modular programming

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related