Question

我有几个模块：“Shapes.js”是Shape对象的容器（模块“Shape.js”）“Mouse.js”，当用户按下左键单击鼠标和模块“Selection.js”时将计算坐标“需要进行计算并确定坐标是否属于形状。

// Mouse.js

define([], function() {
    function Mouse(element, e) {        
        var offsetX = 0, offsetY = 0;

        if (element.offsetParent !== undefined) {
            do {
                offsetX += element.offsetLeft; 
                offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
        }

        this.getMouseX = function() {
            return e.pageX - offsetX;
        }
        this.getMouseY = function() {
            return e.pageY - offsetY;
        }
    }
    return Mouse;
});

// Selection.js

define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {
    var selection;
    document.getElementById('canvas').addEventListener('mousedown', function(e) {
            selection = null;

            var mouse = new Mouse(document.getElementById('canvas'), e);
            var shapes = Shapes.getShapes();

            for(var i=0; i<shapes.length; i++) {
                if ((shapes[i].getX() <= mouse.getMouseX()) 
                    && (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX()) 
                    && (shapes[i].getY() <= mouse.getMouseY()) 
                    && (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {

                    selection = shapes[i];
                    break;
                }
            }
        });
    return selection;
});

为了保持这个小问题，我不会发布“形状”和“形状”模块，它们并不重要。

所以现在在“main.js”模块中，我希望在用户triger mousedown事件时总是引用所选元素（或null），但我无法得到它。甚至不知道从哪里开始。如果我只是在主模块中加载选择模块，我将始终得到undefined.Thanks提前。

（代码片段来自Simon Sarris帆布教程，只需稍加修改，只是尝试通过Require.js完成所有工作）

编辑：@ Katana314，你觉得这样吗？ // Selection.js（已编辑）

define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {

    var selection;

    return function(e) {
        selection = null;

        var mouse = new Mouse(document.getElementById('canvas'), e);
        var shapes = Shapes.getShapes();

        for(var i=0; i<shapes.length; i++) {
            if ((shapes[i].getX() <= mouse.getMouseX()) 
                && (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX()) 
                && (shapes[i].getY() <= mouse.getMouseY()) 
                && (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {

                selection = shapes[i];
                break;
            }
        }

        return selection;
    }
});

// Main.js

document.getElementById('canvas').addEventListener('mousedown', function(e) {
    console.log(Selection(e)); // Shape... :D
});

Answer 1

编辑：误读了一些内容，跳过了。原始回复如下： requirejs的部分要点是模块只能实例化一次。但这实际上与您当前的设置背道而驰。

运行“Mouse.js”'定义函数，将return ed结果（构造函数）存储为模块路径“Mouse”
运行“Selection.js”'定义函数，存储return ed结果（selection，尚未收到值）作为模块路径“选择”
任何需要“选择”的东西都会因此而“未定义”。

我认为你想要的目标是从Selection中返回某种不变的对象，甚至是一个函数。然后，无论需要什么，都可以这样做：

require('Selection', function(getSelection) {
  var currentElement = getSelection(); // and so on...
});

由于您的问题主要集中在RequireJS上，但我还没有真正分析其他错误代码的其他功能。

编辑：实际上，我可能误读了你的一小部分语法。看起来你已经在模块中返回了一个函数，而不是选择本身。手头的问题可能更多地与检查活动选择的代码有关。只是为了验证，您如何在其他代码中包含Selection，并且您是否尝试使用调试器逐步调试其内容？

Require.js，模块依赖项

1 个答案: