Question

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

显示模块

(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时，它会返回值 function () { ... }，因为这是.rect属性的内容。
你需要添加括号()，告诉JS引擎它应该调用该函数，而不仅仅是检索它。

Answer 2

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

JS - 模块化编程

2 个答案: