jQuery, AMD 및 require.js를 사용한 이벤트 처리

Question

저는 AMD와 require.js에 매우 익숙하며 거의 하루 동안 약간의 문제로 어려움을 겪고 있습니다. 나는 여러 가지 방법을 시도했지만 정확한 방법/올바른 접근 방식이 무엇인지 모릅니다. 나는 모든 자바 스크립트 전문가로부터 약간의 피드백을 주셔서 감사하겠습니다.

입력/변경 내용을 수신 대기하는 텍스트 상자의 이벤트 처리기를 구현하려고합니다. 이벤트 처리기에서지도에 현재 표시된 마커를 업데이트하고 싶습니다. 그래서, 두 개의 모듈 정의 -지도를 표시하기위한 내 사용자 지정 코드를 포함 openlayers 한 오픈, 사용자 정의 모듈은 다음과 같은 업데이트 마커 등

:

define('mymodule', [ 'open-layers', 'jquery', 'openstreetmaps','t5/core/console' ], function(
    openLayers, $,openStreetMaps ,console) { 

    var init = function() { 

    } 
    var listenForChange = function(clientId) { 
     clientId = clientId; 
     var textBox = $(document.getElementById(clientId)); 
     console.debug(textBox); 

     $('#addressLineTwo').on('change paste keypress input', function() { 
      console.debug(textBox); 
      console.debug('OnChange'); 
      console.debug($(this)); 
      console.debug($(textBox).val()); 
      openstreetmaps.clearMarkersAndShowAddress(); 
     }); 
    } 
    return { 
     init: init, 
     listenForChange: listenForChange 
    }; 
}); 

문제는이 때 이벤트 처리기가 텍스트 필드의 입력 결과로 호출되면 "on"메서드의 처리기로 정의 된 함수의 변수 openstreetmaps은 undefined입니다. 나는이 문제를 얻을 수

그들은 유일한 방법은 다음과 같이 해당 행을 변경했다 :

또한

require(['openstreetmaps'], function(openstreetmaps) { openstreetmaps.clearMarkersAndShowAddress(newAddress);}); 

, 나는 모든 폐쇄 사이의 변수와 전달 데이터를 관리 어떻게 이러한 구조를 사용하는 경우? 내부 클로저가 외부 클로저 또는 함수에서 변수에 액세스 할 수없는 것처럼 보입니다.

귀하의 도움과 의견에 진심으로 감사드립니다.

Answer 1

다른 모듈의 변수는 이벤트 핸들러에서 액세스 할 수 있으므로 define 함수 매개 변수 openStreetMaps을 openstreetmaps으로 변경하기 만하면됩니다. 그래서 require 콜이 작동하는 이유입니다. 변수 이름 지정을 필요한 모듈과 일치시켜야합니다.

변수를 관리하려면 모듈에서 변수를 반환하여 모든 변수를 공개하면됩니다. 이러한 공용 변수는 모듈에서 정의 된 closure를 액세스 할 수 있습니다. 각 모듈은 한 번만 등록되므로 각 모듈에서 원하는 상태를 유지할 수 있습니다.