이벤트

Question

에 자바 스크립트의 창 디스패처를 이해하는 나는 다음과 같은 코드가 있습니다. 운영자의 개념을 이해할 수 없습니다. 이벤트 리스너는 어떻게 문자열을 듣고 함수를 실행할 수 있습니까?

Answer 1

나는 그것을 설명하려고 노력할 것이다. 나는 그것의 간결한 희망, 그리고 당신이 필요로하는 것입니다. 처음에는 네이티브 메소드 인 "CustomEvent"를 설명 할 것이지만, 궁극적으로 이해하고자하는 것은 아닙니다. 아래에 새로운 클래스 또는 함수 (동일)를 만들 수 있지만, 설명을 위해 간단한 객체 만 사용하도록하겠습니다.

var EventOne = "Event_Created"; var myFunction = function() {// codes}; var dispatcher = window.dispatcher; dispatcher.on (EventOne, myFunction());

매우 제한적이거나 축소 된 버전을 알려 드리겠습니다. 이것은 결코 생산 준비가되어 있지는 않지만 설명을 위해 사용하겠습니다.

-> 동작을 포함 할 전역 개체를 만들 수 있습니다.

var dispatcher = {} || window.dispatcher 

-> ".on"메소드를 만들 수 있습니다. 이렇게하면 "협회"또는 "키 : 액션"쌍이 생성됩니다. 귀하의 예제에서 당신은 "EventOne, myFunction()"

var dispatcher = { 
     actions: {}, 
     on: function(key, action) { 
     // you could add your new actions to an array, 
     // lets just overwrite for simplicity sake 
     this.actions[key] = action 
     } 
} 

-> 지금까지 단순합니다. 우리는 키와 액션을 취하는 ".on"메소드를 가진 "디스패처"객체를 가지고 있으며, 그 연관을 액션 obj에 적용합니다.

-> "이벤트"를 무료로 호출 할 수 있도록 ".trigger"메소드를 추가하십시오. . 그래서, 우리는 단지 그들을 해고 ... this.actionskey

var dispatcher = { 
     actions: {}, 
     on: function(key, action) { 
     // you could add your new actions to an array, 
     // lets just overwrite for simplicity sake 
     this.actions[key] = action 
     }, 
    trigger: function(key) { 
     if(this.actions[key]) { 
      this.actions[key]() 
     } 
    } 
} 

람,이 방법을 호출 할 때이 기능이 있기 때문에 단지 우리가 전달하는 키의 값/액션을 요청 것을 볼 수 있습니다 - - 내 코드를 모방 다른 훨씬 더 강력한 솔루션을 ->이

function testit() { 
    console.log("TEST IT FUNCTION CALLED") 
} 

function testit2() { 
    console.log("CALLING TESTIT2 FUNCTION NOW") 
} 

dispatcher.on('test1', function() { 
    setTimeout(function() { 
     testit() 
    }, 2000) 
}) 

dispatcher.on('test2', testit2) 

그럼, 당신이 당신의 영업 이익에 표시되는 것은 아마 제가 위에서했던 하나를 모방하거나 말할 수 일부 패턴 테스트 할 수 있습니다. 기본적으로 ".on"메서드를 통해 함수 인 이벤트/이벤트에 키를 할당합니다. 나중에 문자열을 전달하여 .trigger를 호출 한 다음 해당 객체를 참조하여 해당 "문자열"... ala, 키를 사용하여 "actions"를 설정합니다.

그래서 위의 코드를 그대로 사용하면 다음과 같이 보입니다.

var EventOne = "Event_Created"; 
var myFunction = function(){ console.log("MyFunction Called")}; 
var dispatcher = window.dispatcher; 
dispatcher.on(EventOne, myFunction());