JavaScript를 사용하여 간단한 PubSub 시스템 구축

최근 웹 푸시 서비스를 위해 구축한 프로젝트에서 시스템에서 정보를 가져오는 데 필요한 여러 구성 요소가 있었기 때문에 UI가 애플리케이션 수준 이벤트에 응답하도록 만들고 싶었습니다(가능하다면 의미상). 서로 의존하면서 각자의 "비즈니스 로직"을 독립적으로 관리할 수 있기를 바랍니다.

주변을 둘러보며 도움을 줄 수 있는 다양한 도구도 많이 찾아봤지만 저는 NIH 증후군이 심한 경우가 많아서 think people 기본 요소를 직접 빠르게 구현할 수 있기 때문에 이를 간단한 클라이언트 PubSub 서비스에 신속하게 연결하기로 결정했습니다. 작동이 훌륭하고 요구 사항도 충족되었습니다.

Customize DOM 이벤트를 사용해야 할지 고민 중이었습니다. 기존 DOM이 이미 개발자에게 제공하는 인프라를 활용하면 addEventListener 함수를 사용하여 이벤트를 게시하고 이벤트를 소비할 수 있습니다. 유일한 문제는 이벤트를 DOM 요소에 바인딩해야 한다는 것입니다. EventTarget을 상속하거나 혼합하는 모델이 없습니다.

/* When a user is added, do something useful (like update UI) */EventManager.subscribe('useradded', function(user) {
  console.log(user)
});/* The UI submits the data, lets publish the event. */form.onsubmit(function(e) {
  e.preventDefault();  // do something with user fields

  EventManager.publish('useradded', user);
})

이 모든 것은 새로운 것이 아닙니다. Redux와 다른 많은 시스템은 이미 대부분의 경우 이 작업을 수행하고 있으며 애플리케이션 상태를 관리할 책임이 있습니다. 내 생각에는 브라우저의 상태와는 다른 상태를 관리하기 위해 상태 모델이 필요하지 않다고 결정했습니다.

매우 간단한 구현이지만 추상화가 매우 중요합니다. 적어도 그것이 나에게는 작동하는 방식입니다.

아아아아

저의 단순한 PubSub 시스템에는 버그가 가득할 수도 있지만 저는 그것을 좋아합니다.