javascript - JS——模块化编程

Question

我想写一个程序，当鼠标点击 Canvas 元素时显示一个矩形。我有某些模块，但不知何故它们似乎没有连接。我在 JSFidlle 中粘贴了没有命名空间的代码:

fiddle

显示模块

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

管理模块

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

主模块

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

Answer 1

您忘记调用 manager.rect 函数。在主模块中添加一些 () 就可以了。

本质上，您在 ma​​nager-module 中所做的是这样的:

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

现在，当您访问 manager.rect 时，它将返回 value function () { ... }，因为那是.rect 属性的内容。
您需要添加括号 ()，以告诉 JS 引擎它应该调用该函数，而不仅仅是检索它。