Require.js, 모듈 의존성

Question

모듈이 거의 없습니다. Shape 객체의 컨테이너 인 "Shapes.js"(모듈 "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)에 대한 참조가 필요하지만 가져올 수 없습니다. 어디서부터 시작해야할지 모릅니다. 내가 선택 모듈을 주 모듈에로드하면 나는 항상 정의되지 않을 것이다. 미리 감사드립니다. Katana314 @,이 같은 생각 않았다

편집을 (코드 조각은 Require.js을 통해 모든 일을하려고, 약간의 수정과 함께 시몬 Sarris 캔버스 튜토리얼입니다)?
// Selection.js (EDITED)

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의 요점은 모듈이 한 번만 인스턴스화된다는 것입니다. 이 설정은 현재 실제로 어떻게 실행되고 있는지를 보여주는 카운터입니다.

1. 실행 "Mouse.js"(selection 정의 기능, 저장 return 혼성 결과 "모듈로"마우스 "
2. 실행"Selection.js "로서 기능, 저장 return 혼성 결과 (생성자 함수)를 정의 ' , 값을받지 못했습니다)을 모듈 경로 "선택"으로 사용합니다.
3. "선택"을 필요로하는 모든 것은 결과적으로 '정의되지 않음'을 갖습니다.

여기서 원하는 목표는 선택의 일종의 불변의 객체 또는 함수를 반환하는 것입니다. 그리고, 이런 식으로 뭔가를 할 수 요구하고 어떤 :

귀하의 질문은 RequireJS에 집중했다

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

때문에, 정말하지만 다른 오류 코드의 다른 기능을 분석하지 않았습니다.

편집 : 사실, 구문의 일부분을 잘못 읽었을 수 있습니다. 이미 선택 항목이 아닌 모듈에서 함수를 반환하고있는 것처럼 보입니다. 현재 진행중인 문제는 활성 선택을 확인하는 코드와 관련이 있습니다. 확인하기 위해 다른 코드에서 Selection을 어떻게 포함하고 디버거로 내용을 단계별로 실행 해 보았습니까?