JavaScript의 관찰자 디자인 모드

어떤 언어를 사용할 때, 우리는 몇 가지 중용 가능한 디자인 해결 방안을 사용하여 흔히 볼 수 있는 문제를 해결하는 경향이 있다.JavaScript에서도 정의된 양호한 모드를 혼합했습니다.
관찰자 모드가 그중의 하나다.
본고에서 우리는 자바스크립트의 관찰자 디자인 모델을 한층 더 이해하고 vanilla 자바스크립트로 작은 예시를 실현할 것이다.

무엇이 관찰자 디자인 모델입니까?

관찰자 모델은 구독 모델을 따른다.구독자(일반적으로 관찰자라고 부른다)는 게시자(일반적으로 테마라고 부른다)가 처리하는 이벤트나 조작을 구독하고 이벤트나 조작이 발생할 때 알림을 받는다.
수험자는 모든 관찰자에게 사건이나 동작의 발생을 방송한다.
관찰자가 피관찰자의 변경 통지를 더 이상 받지 않으려면 피관찰자의 구독을 취소하고 피관찰자가 구독자 목록에서 삭제한다.
관찰자 디자인 모델은 게시자/구독자 모델과 매우 비슷하지만 게시자/구독자 모델은 구독할 주제를 지정했다.
예를 들어 키보드 단축키를 검사할 때 구독자는 게시자/구독자 모델에서 들을 키 조합을 지정할 수 있다.

관찰자 모델의 실현

Observer 모드의 한 예로, 우리는 여러 요소가 화면의 마우스 위치를 감청하고 서로 다른 동작을 수행하는 간단한 상호작용을 실현할 것이다.
다음은 우리의 상호작용의 한 예이다.

우리가 이 상호작용을 실현하기 전에 마우스 위치가 바뀌었을 때 이 예에서 무슨 일이 일어났는지 분석해 봅시다.

마우스 위치가 바로 오른쪽 위 모서리의 텍스트 상자에서 업데이트됩니다.

1s 지연 후 동그라미는 마우스의 궤적을 따라간다.

위에서 설명한 바와 같이, 우리는 여러 개의 구성 요소가 같은 사물에 대한 정보를 필요로 하지만, 행위는 다르다는 것을 보았다.
위의 예에서, 우리는 수험자가 창의 마우스 이벤트를 감청하여 원하는 사람에게 전달할 것을 확정했다.위의 예에서 동그라미와 텍스트 상자는 관찰자이다.
그래서 지금부터 그것을 실시합시다.

첫걸음MousePositionObservable 클래스 구현

첫 번째 단계로 MousePositionObservable류를 계속 실현합시다.이 과목은 다음과 같은 일을 해야 한다.

관찰자의 리셋 목록을 보류한다.

방법을 공개하고 관찰자는 이 방법을 사용해서 변경 사항을 구독할 것이다.이 함수의 반환 값은 반드시 함수여야 하며, 호출할 때 이 함수는 subscribe 집합에서 callback 옮겨집니다.

수사subscriptions사건 및 모든 구독 리셋을 촉발합니다.

코드는 다음과 같습니다.

class MousePositionObservable {
  constructor() {
    this.subscriptions = [];
    window.addEventListener('mousemove',this.handleMouseMove);
  }
  handleMouseMove =  (e) => {
     this.subscriptions.forEach(sub => sub(e.clientX, e.clientY));
  }
  subscribe(callback) {
    this.subscriptions.push(callback);    

    return () => {
      this.subscriptions = this.subscriptions.filter(cb => cb !== callback);
    }
  }
}

두 번째 단계.HTML 요소 만들기

이제 mouseMove 및 circle에 HTML 요소를 만들고 스타일을 추가합니다.

<div class="container">
  <div class="circle" ></div>
  <div class="mouse-position">
  <h4>Mouse Position</h4>
  <div class="position"></div>
</div>
</div>

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #f3df49;
}
.circle {
  position: absolute;
  background-color: #238643;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  z-index: 2;
}

.mouse-position {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 200px;
  height: 100px;
  background-color: black;
  border-radius: 4px;
  padding: 4px 16px;
  color: white;
}

.mouse-position h4 {
  color: white;
  margin: 10px 0;
}

세 번째.관찰자 추가

마지막 단계는 textMessageBox류를 만드는 실례를 만들고 관찰자를 추가하는 것이다.
이를 위해, 우리는 클래스 실례에서 MousePositionObservable 방법을 호출하여 리셋을 전달할 것이다.
코드는 다음과 같습니다.

const mousePositionObservable = new MousePositionObservable();

mousePositionObservable.subscribe((x, y) => {
  const circle = document.querySelector('.circle');
   window.setTimeout(() => {
     circle.style.transform = `translate(${x}px, ${y}px)`;
   }, 1000);
});

// Update the mouse positon container to show the mouse position values
mousePositionObservable.subscribe((x, y) => {
  const board = document.querySelector('.mouse-position .position');
  board.innerHTML = `
    <div>
       <div>ClientX: ${x}</div>
       <div>ClientY: ${y}</div>
    </div>
  `
})

우리는 subscribe 실례에 두 개의 구독을 추가했다. 마우스 값을 감청해야 하는 요소마다 구독을 하나씩 추가했다.MousePositionObservable 요소의 구독 리셋은 DOM 요소의 인용을 가져오고 circle 속성을 업데이트합니다.transform 속성은 가능한 경우 하드웨어 가속을 사용하기 때문에 요소에서도 애니메이션이나 과도를 사용하면'상'과'좌'위치transform에서 성능의 장점을 볼 수 있다.translate() 요소의 구독 리셋은 textbox 속성을 사용하여 HTML 내용을 업데이트합니다.

Note: When you want to unsubscribe the listener, all you have to do is to store the returned value from the subscribe function call and invoke it like a function

이것이 바로 우리가 시범을 보이는데 필요한 모든 내용이다.
다음 코드 펜에서 작업 예를 볼 수 있습니다.

관찰자 디자인 모델의 장단점

관찰자 디자인 모델은 우리에게 다음과 같은 장점을 제공했다.

이벤트에 대해 여러 작업을 수행하려면 매우 유용합니다.

이것은 관련 대상 간의 일치성을 유지하는 분리 기능을 제공한다.

이런 모델의 단점은 그것의 장점에서 비롯된다.

관찰자의 디자인 모델은 느슨하게 결합된 코드를 초래하기 때문에 응용 프로그램의 다른 부분의 정상적인 작업을 보장하기 어렵다.예를 들어 테마에 추가된 구독은 잘못된 코드를 포함할 수 있지만 게시자는 이를 알 수 없습니다.

실제 환경의 애플리케이션

웹 개발을 진행할 때 우리는 innerHTML와 Redux가 모두 Observer 디자인 모델을 바탕으로 하는 실현 예시를 보았다.
Redux에서는 주체가 되는 Redux 상태에 관찰자를 추가할 수 있는 React Context 방법이 있습니다.레드ux 앱스토어를 구독하는 모든 사람은 앱스토어에 변경 사항이 발생할 때 알림을 받을 수 있습니다.
이와 유사하게 subscribe의 값이 업데이트될 때마다 ContextProvider 갈고리나 useContext를 통해 상하문을 구독하는 모든 구성 요소는 업데이트된 상하문 값으로 다시 나타난다.

결론

본 논문에서, 우리는 Observer 디자인 모델과 응용 프로그램에서 그것을 어떻게 사용하는지 소개했다.우리는 또한 이런 모델을 바탕으로 시범을 실현했고 이런 방법에 따라 상호작용을 하는 장점과 단점을 이해했다.
읽어주셔서 감사합니다.
만약 이 글이 유용하고 정보가 풍부하다고 생각한다면, 그것을 좋아하는 것을 잊지 말고, 당신의 친구와 동료와 공유하세요.
어떤 건의가 있으면 언제든지 논평을 해 주십시오.
저를 따라 더 많은 웹 개발 내용을 알아보세요.