javascript - JS - 模块化编程

Question

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

小提琴

显示模块

(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 函数。在主模块中添加一些()，你会没事的。

本质上，您在manager-module中所做的是：

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

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

Answer 2

它们都在自己的匿名函数中，因此它们都在自己的命名空间中。如果您希望每个部分能够相互通信，请将所有代码放在一个匿名函数中。