이벤트 중심 프로그래밍 - node.js, Java

Question

저는 Java에서 왔지만 요즘 일부 Node.js를 수행하고 있으며 Node의 EventEmitter 모듈을보고 있습니다.

내가 이해할 수없는 것은 이벤트 중심 프로그래밍과 '일반'프로그래밍 간의 근본적인 차이점입니다.

여기 "이벤트 중심"프로그래밍에 대한 내 아이디어를 보여주는 몇 가지 의사 코드가 있습니다.

EventEmitter ee = new EventEmitter(); 
Function f = new SpecialFunction(); 

ee.on('grovel',f); 

ee.emit('grovel'); //calls function 'f' 

EventEmitter 객체 (이 경우 '아첨')에서 이벤트의 문자열 표시간에 해시 관계에 대응하는 기능을 만드는 일듯한에만 동작. 그것이 그 것처럼 보입니다. 마술은별로 없습니다.

그러나 내 질문은 - 이벤트 구동 프로그래밍이 마우스 클릭이나 타이핑과 같은 저수준 이벤트에서 어떻게 실제로 작동합니까? 즉, 프로그램에서 클릭을 가져 와서 'grovel'과 같은 문자열로 바꾸는 방법은 무엇입니까?

Answer 1

오케이. 나는 이것에 달려들 것이다.

이벤트 이미 터를 사용하는 몇 가지 주된 이유가 있습니다.

주된 이유 중 하나는 JavaScript가 태어난 브라우저가 때로는 강요한다는 것입니다. jQuery 또는 다른 프레임 워크/라이브러리를 사용하여 이벤트를 HTML에 직접 연결하는지 여부와 관계없이 기본 코드는 기본적으로 기본적으로 동일합니다. (음 ... 기본적으로 ...)

먼저

<div onclick="myFunc(this)">Click me</div> 

을 ...하거나 DOM에 의해 JS에서 똑같은 일을 할 수 있습니다 : 당신이 언급 한 같은 키보드 또는 마우스 이벤트에 반응, 당신은 하드 이와 같은 이벤트 핸들러 (콜백)에 직접 결합 수 참조 :

document.getElementById('my_element').onclick = function (evt) { 
    alert('You clicked me'); 
}; 

이것은 우리가 유선 p 클릭 핸들러. 이 패턴의 한 가지 치명적인 단점은 하나의 콜백 만 각 DOM 이벤트에 첨부 할 수 있다는 것입니다. 동일한 이벤트에 반응하는 두 번째 콜백을 원할 경우 기존 클릭 핸들러에 결합하거나 두 함수 호출 작업을 처리하는 위임 함수를 작성해야합니다. 또한, 이벤트 이미 터는 이벤트 수신기에 단단히 결합되어 종료되며 이는 일반적으로 나쁜 것입니다.

응용 프로그램이 복잡 해짐에 따라 대신 이벤트 리스너를 사용하는 것이 더 중요합니다. 브라우저 공급 업체 (결국)이 작업을 수행하는 하나의 방법에 정착 :

// Build the handler 
var myHandler = function (evt) { 
    alert('You clicked me too'); 
    window.myHandlerRef = this; // Watch out! See below. 
}; 

// Bind the handler to the DOM event 
document.getElementById('my_element').addEventListener('click', myHandler); 

이 패턴의 장점은 하나의 DOM 이벤트에 여러 핸들러를 첨부하거나 여러 가지 DOM 이벤트에서 하나의 이벤트 핸들러를 호출 할 수 있다는 것입니다 . 단점은 누출되지 않도록 조심해야한다는 것입니다. 작성 방법에 따라 이벤트 처리 클로저 (위의 myHandler과 같은)는 첨부 된 DOM 요소가 손상되고 GC 된 후에도 계속 존재할 수 있습니다. 즉, 항상 removeEventListener('click', myHandler)을 수행하는 것이 좋습니다. (일부 라이브러리에는 동일한 작업을 수행하는 off() 메서드가 있습니다).

이 패턴은 물론 키보드 이벤트를 위해 잘 작동합니다

var giveUserAHeadache = function (evt) { 
    alert('Annoying, isn\'t it?'); 
}; 

document.addEventListener('keypress', giveUserAHeadache); 

좋아요.그래서 네이티브 브라우저 이벤트를 처리하는 방법입니다. 그러나 개발자는 자신의 코드에서이 이벤트 위임 패턴을 사용하기를 원합니다. 이렇게하려는 이유는 가능한 한 코드를 분리 할 수 ​​있기 때문입니다.

예를 들어, UI에서 사용자의 브라우저가 오프라인이 될 때마다 이벤트가 생성 될 수 있습니다 (예 : navigator.onLine). 어쩌면 온라인 상태를 표시하기 위해 페이지 헤더에 녹색/빨간색 램프가있을 수 있으며, 오프라인 일 때 모든 제출 버튼을 비활성화 할 수 있으며 페이지 바닥 글에 경고 메시지를 표시 할 수도 있습니다. 이벤트 리스너/이미 터를 사용하면이 모든 것을 완전히 분리 된 모듈로 작성할 수 있으며 여전히 잠금 단계로 작업 할 수 있습니다. 그리고 UI를 리팩토링해야하는 경우 하나의 구성 요소 (예 : 램프)를 제거하고 다른 모듈의 논리를 망칠 염려없이 다른 것으로 교체 할 수 있습니다.

다른 예로 노드 응용 프로그램에서 데이터베이스 코드가 특정 컨트롤러에 오류 조건을 내고 오류를 기록하고 전자 메일을 보낼 수도 있습니다. 이러한 종류의 것들이 반복적으로 추가 될 수 있음을 알 수 있습니다. 이벤트 리스너를 사용하면 이러한 일을 쉽게 수행 할 수 있습니다.

직접 작성할 수도 있고 특정 환경에서 사용할 수있는 패턴을 사용할 수도 있습니다. jQuery, Angular, Ember 및 Node에는 모두 특별한 방법이 있지만 사용자가 직접 만들 수도 있습니다. 따라서 내가 시도해 보는 것이 좋습니다.

이들은 모두 동일한 기본 아이디어의 변형이며 정확한 정의 또는 가장 정확한 구현에 많은 흐림이 있습니다 (실제로는 일부가 다를 경우 질문 할 수도 있음). 그러나 여기 주범 : 당신이 찾고있는 일이 클라이언트 측을있는 동안 당신이 언급 한

1. Observer
2. Pub-Sub
3. Mediator