이벤트 버스를 사용한 웹 구성 요소 통신

웹 구성 요소만 사용하여 단일 페이지 응용 프로그램을 구성한다고 가정합니다.여러 페이지가 있고, 루트가 설정되어 있으며, 일반적인 이벤트나 조작을 처리할 수 있어야 합니다.
이 때, 당신도 잠재적인 해결 방안을 고려하기 시작합니다. 아마도 응용 프로그램에 상태 관리를 추가할 때가 되었을 것입니다.지금은 맞춤형 솔루션을 구축하기에 좋은 시기입니까?이런 상황에서 디자인 모델을 사용하는 것은 어떻습니까?
이 문제들의 답안은 현재 장면의 복잡성, 개발자의 경험이나 팀의 의견에 달려 있다.분명해, 절대적인 답은 없어!
본고에서 우리는 사용자 정의 이벤트 버스를 사용하여 구성 요소 간의 통신을 실현하는 방법을 소개할 것이다.

이벤트 버스는 무엇입니까?

이벤트 버스 이념은 일반적으로 Publish-subscribe pattern와 관련이 있다.

Publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called 'subscribers', but instead, categorize published messages into classes without knowledge of subscribers

다시 말하면 이벤트 버스는 프로그램의 어느 곳에서든 접근할 수 있도록 메시지나 이벤트를 전송하는 전역적인 방식으로 볼 수 있다.

웹 구성 요소 통신

LitElement를 통해 웹 구성 요소를 사용할 때, 보통 그들 사이에서 메시지를 보내는 이벤트를 터치합니다.표준 이벤트나 사용자 정의 이벤트를 사용할 수 있습니다.

사용new Event('event') 표준 이벤트 트리거

사용 new CustomEvent('event', {...options}) 사용자 정의 이벤트 트리거

실제 예로, 우리는 이때 두 개의 구성 요소가 있다고 가정한다. 첫 번째 구성 요소는 부모 구성 요소로 명명할 수 있고, 두 번째 구성 요소는 하위 구성 요소로 명명할 수 있다.

서브어셈블리

하위 구성 요소는 사용자 정의 단추로만 정의됩니다.

import { LitElement, html, property, customElement, css } from 'lit-element';

export interface MyButtonEvent {
  label: string;
  date: string;
}

@customElement('my-button')
class MyButton extends LitElement {
  @property({ type: String }) label: string = 'Hello LitElement';

  constructor() {
    super();
  }

  render() {
    return html`
      <span @click=${this.handleClick}>
        ${this.label}
      </span>
    `;
  }

  private handleClick(e: MouseEvent) {
    this.dispatchEvent(new Event("myClick"));
  }
}

위 코드 세그먼트는 다음을 수행합니다.

사용자 정의 이벤트를 통해 전달할 데이터를 위한 모델을 만듭니다.이 모델은 MyButtonEvent라는 인터페이스로 정의되었다.

다음, LitElement decorators의 도움말 아래 TypeScript 클래스를 사용하여 구성 요소 만들기

@customElementdecorator는 구성 요소의 이름을 사용할 수 있도록 허용합니다: my-button.그것은 학급 차원에 적용된다.

(static styles 속성은 태그를 사용한 템플릿 문자(css)

로 구성 요소의 스타일을 정의합니다.

decorator, 읽을 수 있는 방식으로 속성을 설명할 수 있습니다.

(@property 방법은 템플릿 텍스트 (render 를 통해 HTML 내용을 되돌려줍니다.이 함수는 html 속성이 변경될 때 호출됩니다.

지금 label 방법을 주의하세요.템플릿에 render() 귀속시키는 것을 사용합니다.클릭 사건 자체를 성명으로 포착할 수 있습니다.

모 어셈블리

모 어셈블리는 사용자 정의 버튼 렌더링을 담당하기 때문에 컨테이너로 사용됩니다.다음은 템플릿에서 서브어셈블리를 사용하는 방법입니다.

<my-button label="Show Alert"> </my-button>

그러나 현실 장면에서 하위 사건@click이 촉발되면 우리는 그것을 처리해야 한다.

// my-container.ts

import { LitElement, html, customElement, css } from "lit-element";
import "./my-button";

@customElement("my-container")
class MyContainer extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  constructor() {
    super();
  }

  render() {
    return html`
      <my-button @myClick=${this.handleClick} label="Hello LitElement">
      </my-button>
    `;
  }

  private handleClick(e: Event) {
    console.log("MyContainer, myClick", e);
  }
}

이벤트 버스를 사용하기 전에 앞의 코드 세션에 대한 간략한 설명을 보십시오.

(myClick 함수는 템플릿 텍스트를 정의하고 render 요소my-button를 사용합니다. 이것은 HTML 어휘표의 일부분과 같습니다.

(<my-button></my-button> 속성 설정 함수 인용, 성명성 문법으로 이벤트 처리.

속성 설정 버튼에 표시되는 텍스트입니다.버튼은 변경될 때마다 다시 표시됩니다.

(@myClick 함수 수신label 대상 및 더 많은 정보.브라우저의 콘솔을 열어 원하는 대로 값을 확인할 수 있습니다.

이벤트와 함께 데이터를 보내야 하는 경우handleClick 방법을 업데이트할 수 있습니다.

  private handleClick(e: CustomEvent<MyButtonEvent>) {
    const detail: MyButtonEvent = e.detail;
    // Process the 'detail' object here
  }

이벤트 버스 통신

이 예에서, 우리는 부모 구성 요소가 이벤트 버스 대상을 통해 사용하는 모든 이벤트의 '루트' 를 충당할 것이라고 가정할 수 있다.
그리고 구조 함수 방법에 Event 이벤트를 등록합시다.응용 프로그램의 다른 위치에서 경보 메시지를 보여주는 것이 목적이다.

// my-container.ts

class MyContainer extends LitElement {

  private alertRegistry: Registry;

  constructor() {
    super();

    this.alertRegistry = EventBus.getInstance().register(
      'alert',
      (message: string) => {
        AlertManager.showAlert(message);
      }
    );
  }
}

이벤트를 등록한 후 handleClick 대상을 나중에 로그아웃할 수 있습니다.
준비 다 됐어!
다음 단계로, 단추를 눌렀을 때마다 alert 이벤트를 보냅니다.이 작업은 Registry 기능에서 수행할 수 있습니다.

  // my-container.ts
  private handleClick(e: CustomEvent<MyButtonEvent>) {
    const detail: MyButtonEvent = e.detail;
    EventBus.getInstance().dispatch('alert', `Alert at ${detail.date}`);
  }

현재 이벤트 버스는 예상대로 작동합니다.다른 구성 요소에서 다른 이벤트를 등록하거나 할당할 수 있습니다.이러한 이벤트의 통신 채널은 이벤트 버스이기 때문에 어떤 방식으로도 연결할 필요가 없다.

이벤트 버스에서 로그아웃

프로그램에 잠재되어 있는 메모리 유출을 피하기 위해 등록된 다양한 이벤트를 추적하는 것은 매우 중요하다.
이 예에서는 처음으로 경고 메시지를 표시하도록 설정합니다.경고 표시 버튼의 다른 클릭은 이벤트 버스를 통해 아무런 효과나 스케줄링 작업이 수행되지 않습니다.
부모 구성 요소를 업데이트합시다.

// my-container.ts

  private handleClick(e: CustomEvent<MyButtonEvent>) {
    const detail: MyButtonEvent = e.detail;

    EventBus.getInstance().dispatch('alert', `Alert at ${detail.date}`);
    this.alertRegistry.unregister();
  }

alert 방법의 마지막 줄은 이벤트 버스에서 프로세스를 취소할 수 있도록 합니다.따라서 handleClick 이벤트에 대한 다른 호출은 무시됩니다.

현장 프레젠테이션

이 코드 한번 해볼래요?내장형 Stackblitz 편집기만 열면 됩니다.

결론

본고에서 나는 두 가지 구성 요소 간에 데이터를 통신하고 전달하는 방법을 묘사했다.

구성 요소가 관련되어 있다면 분명히 소통하는 가장 좋은 방법은 간단하거나 사용자 정의 이벤트를 통해 소통하는 것이다.

전체 응용 프로그램에서 이벤트를 보낼 계획이라면 구성 요소든 모듈이든 이벤트 버스가 적합할 수 있습니다.사건을 공공 통로로 보내는 방식인데 누가 마지막으로 메시지를 처리할지 모른다는 얘기다.

문제가 있으면 언제든지 연락 주세요.계속해서 저GitHub를 주목해 주시고 제 일에 대한 더 많은 정보를 얻으세요.이 블로그에 더 많은 Lit에 관한 글을 발표할 준비를 하세요.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소,GraphQL,Node,Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 방문thisdotlabs.com하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co를 참조하십시오.