JavaScript 디자인 패턴 : 관찰자 패턴

JavaScript Observer Pattern의 핵심 사항

JavaScript의 옵저버 패턴을 사용하면 요소간에 일대일 데이터 바인딩이 가능하며, 이는 여러 요소를 동일한 데이터와 동기화하는 데 특히 유용합니다.

옵저버 패턴에는 세 가지 주요 방법이 포함되어 있습니다. (새로운 관찰 가능한 이벤트 추가), (바운드 데이터를 사용하여 모든 이벤트 제거).

클래스, 화살표 기능 및 상수와 같은 ES6 기능을 사용하면 관찰자 패턴을 효과적으로 구현할 수 있으므로 코드를 더 간단하고 재사용 할 수 있습니다.

옵저버 모드는 각 KeyStroke의 블로그 게시물의 단어 수 업데이트와 같은 JavaScript의 실제 문제를 해결하는 데 사용될 수 있으며 새로운 기능을 구축하기 위해 더욱 향상 될 수 있습니다.

subscribe JavaScript에는 문제가 종종 있습니다. 특정 이벤트에 대한 응답으로 페이지의 일부를 업데이트하고 해당 이벤트에서 제공 한 데이터를 사용하는 메소드가 필요합니다. 예를 들어, 사용자는 입력 한 다음 하나 이상의 구성 요소로 투사합니다. 이로 인해 코드에서 많은 푸시 및 당김 작업이 발생하여 모든 것을 동기화 할 수 있습니다. 관찰자 설계 패턴이 도움이 될 수있는 곳입니다. 요소간에 일대일 데이터 바인딩을 구현합니다. 이 단방향 데이터 바인딩은 이벤트 중심 일 수 있습니다. 이 패턴을 사용하면 재사용 가능한 코드를 구축하여 특정 요구 사항을 해결할 수 있습니다. 이 기사에서는 관찰자 디자인 패턴을 탐색하고 싶습니다. 클라이언트 스크립트에서 종종 발생하는 일반적인 문제를 해결하는 데 도움이됩니다. 그것은 일대일, 편도 및 이벤트 중심 바인딩입니다. 이 문제는 종종 동기화되어야하는 요소가 많을 때 발생합니다. 이 패턴을 설명하기 위해 ECMAScript 6을 사용합니다. 예, 클래스, 화살표 기능 및 상수가 있습니다. 익숙하지 않다면이 주제를 직접 탐색 할 수 있습니다. ES6에서 구문 설탕을 소개하는 부품 만 사용하므로 필요한 경우 ES5에서도 작동 할 수도 있습니다. TDD (Test Driven Development)를 사용 하여이 패턴을 처리하겠습니다. 이렇게하면 각 구성 요소가 어떻게 사용되는지 알 수 있습니다. ES6의 새로운 언어 기능은 코드를보다 간결하게 만듭니다. 그래서 시작합시다. unsubscribe broadcast 이벤트 옵저버

이 모드의 고급보기는 다음과 같습니다.

옵저버 모드에서 정교한 후에는 사용하는 단어 계산 기능을 추가합니다. 단어 수 성분은이 관찰자를 사용하고 모든 것을 함께 통합합니다.

를 초기화하려면 다음을 수행하십시오

빈 관찰 이벤트 목록으로 시작하면 각각의 새로운 인스턴스가 그렇게합니다. 이제부터

에서 디자인 패턴을 완성하기 위해 더 많은 방법을 추가합시다.

구독 메소드

새 이벤트를 추가하려면 다음을 수행하십시오 관찰 이벤트 목록을 가져 와서 새 항목을 배열로 푸시하십시오. 이벤트 목록은 콜백 함수 목록입니다. 순수한 JavaScript 에서이 방법을 테스트하는 한 가지 방법은 다음과 같습니다.

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

노드 어제를 사용하여 노드 에서이 구성 요소를 테스트합니다. Chai 주장에도 동일한 주장도 존재합니다. 관찰 이벤트 목록은 간단한 콜백으로 구성됩니다. 그런 다음 목록의 길이를 확인하고 콜백이 목록에 있다고 주장합니다.

구독 취소 메소드

이벤트를 제거하려면 다음을 수행하십시오 목록에서 콜백 함수와 일치하는 모든 것을 필터링합니다. 일치가 없으면 콜백이 목록에 남아 있습니다. 필터는 새 목록을 반환하고 관찰자 목록을 재 할당합니다. 이 좋은 방법을 테스트하려면 다음을 수행하십시오 콜백은 목록의 동일한 함수와 일치해야합니다. 일치가 존재하면

메소드가 목록에서 제거됩니다. 테스트는 기능 참조를 사용하여 추가 및 제거합니다.

방송 방법

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

모든 이벤트를 호출하려면 다음을 수행하십시오

이것은 관찰 이벤트 목록을 반복하고 모든 콜백을 실행합니다. 이를 통해 이벤트를 구독하는 데 필요한 일대일 관계를 얻을 수 있습니다. 매개 변수를 전달하여 콜백 데이터 바인딩을 만듭니다. ES6은 화살표 기능을 사용하여 코드를보다 효율적으로 만듭니다.

함수는 대부분의 작업을 수행합니다. 이 단일 라인 화살표 기능은이 짧은 ES6 구문의 이점이 있습니다. 이것은 JavaScript 프로그래밍 언어의 크게 개선 된 것입니다. 이

subscribe(fn) {
  this.observers.push(fn);
}

메소드를 테스트하려면 :

unsubscribe 변수 값을 변경할 수 있도록 대신

를 사용하십시오. 이로 인해 변수는 변수를 변동성있게 만들어 콜백에서 그 값을 재 할당 할 수 있습니다. 코드에서

를 사용하여 다른 프로그래머에게 변수가 어느 시점에서 변경되고 있음을 알리십시오. 이것은 JavaScript 코드의 가독성과 명확성을 증가시킵니다. 이 테스트는 관찰자가 예상대로 작동하는지 확인하기에 충분한 확신을줍니다. TDD를 사용하면 순수한 자바 스크립트로 재사용 가능한 코드를 구축하는 것입니다. 순수한 JavaScript에서 테스트 가능한 코드를 작성하면 많은 이점이 있습니다. 모든 것을 테스트하고 코드 재사용에 유익한 것을 유지하십시오. 이를 통해 우리는 그것을 완성했습니다. 문제는, 무엇을 만들 수 있습니까? 옵저버 모드의 실제 적용 : 블로그 워드 카운트 데모

데모의 경우 이제 단어 계산을 유지하는 블로그 게시물을 만들 시간입니다. 입력하는 각 키 스트로크는 관찰자 설계 패턴으로 동기화됩니다. 각 이벤트가 필요한 위치로 업데이트를 트리거하는 자유 텍스트 입력으로 생각하십시오. 무료 텍스트 입력에서 단어 수를 얻으려면 다음을 수행 할 수 있습니다.

완료! 이 단순한 순수한 기능에는 많은 내용이 있으므로 간단한 단위 테스트는 어떻습니까? 이런 식으로, 나의 의도는 분명하다 :

// Arrange
const observer = new EventObserver();
const fn = () => {};

// Act
observer.subscribe(fn);

// Assert
assert.strictEqual(observer.observers.length, 1);

<code>EventObserver
│ 
├── subscribe: 添加新的可观察事件
│ 
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>

의 약간 이상한 입력 문자열에 주목하십시오. 내 목표는이 기능이 가능한 한 많은 모서리 케이스를 커버하는 것입니다. 그것이 올바른 단어 수를주는 한, 우리는 올바른 방향으로갑니다. 그건 그렇고, 이것은 TDD의 진정한 힘입니다. 이 구현은 반복 될 수 있으며 가능한 많은 사용 사례를 다룰 수 있습니다. 단위 테스트는 내가 어떻게 행동 할 것으로 기대하는지 알려줍니다. 행동에 결함이 있으면 어떤 이유로 든 반복하고 조정하기 쉽습니다. 테스트를 통해 다른 사람들이 변경할 수있는 충분한 증거를 남겨 두십시오. 이 재사용 가능한 구성 요소를 DOM에 연결해야합니다. 이것은 당신이 순수한 JavaScript를 가져 와서 브라우저에 납땜하는 부분입니다. 한 가지 방법은 페이지에서 다음 HTML을 사용하는 것입니다. blogPost 그런 다음 다음 JavaScript가 있습니다

모든 재사용 가능한 코드를 가져 와서 옵저버 설계 모드를 설정하십시오. 이것은 텍스트 영역의 변경 사항을 추적하고 아래로 단어 수를 제공합니다. 이 새로운 요소를 추가하기 위해 DOM API에서 를 사용하고 있습니다. 그런 다음 이벤트 청취자가 첨부되어 생명을 불어 넣습니다. 화살표 기능을 사용하면 한 줄의 이벤트를 연결할 수 있습니다. 실제로,이를 사용하여 모든 가입자에 대한 이벤트 중심 변경을 방송 할 수 있습니다. 대부분의 작업은 여기에서 이루어졌습니다. 텍스트 영역의 최신 변경 사항을 콜백 함수로 직접 전달합니다. 예, 클라이언트 스크립트는 꽤 시원합니다. 터치하고 조정할 수있는 데모 중 어느 것도 완전하지 않습니다. 여기 코드 펜이 있습니다. 이제, 나는이 기능을 전체 기능이라고 부르지 않을 것입니다. 그러나 이것은 관찰자의 디자인 패턴의 출발점 일뿐입니다. 내 마음 속의 질문은, 얼마나 멀리 갈 것인가?

class EventObserver {
  constructor() {
    this.observers = [];
  }
}

앞으로 기대

subscribe(fn) {
  this.observers.push(fn);
}

당신은이 아이디어를 더 발전시킬 수 있습니다. 옵저버 디자인 패턴을 사용하여 많은 새로운 기능을 구축 할 수 있습니다. 다음 방법을 사용하여 데모를 향상시킬 수 있습니다.

다른 구성 요소는 단락의 수 를 계산합니다 다른 구성 요소는 입력 텍스트의 미리보기를 표시합니다. 마크 다운 지원으로 향상된 미리보기 (예 : body.appendChild() 이것들은 당신이 파낼 수있는 몇 가지 아이디어 일뿐입니다. 위의 개선 사항은 프로그래밍 기능에 도전 할 것입니다. () => blogObserver.broadcast() 결론

옵저버 설계 패턴은 JavaScript의 실제 문제를 해결하는 데 도움이 될 수 있습니다. 이것은 많은 요소를 동일한 데이터와 동기화하는 장기적인 문제를 해결합니다. 일반적으로 브라우저가 특정 이벤트를 트리거 할 때. 나는 대부분의 사람들이 지금이 문제를 겪었고 도구와 타사 종속성으로 바뀌 었다고 생각합니다. 이 디자인 패턴을 사용하면 가능한 한 멀리 갈 수 있습니다. 프로그래밍에서 솔루션을 패턴으로 추상화하고 재사용 가능한 코드를 작성합니다. 이것이 당신에게 가져올 이점은 끝이 없습니다. 약간의 훈련과 노력으로 순수한 JavaScript에서 얼마나 많은 일을 할 수 있는지 알 수 있기를 바랍니다. ES6과 같은 언어의 새로운 기능은 간결하고 재사용 가능한 코드를 작성하는 데 도움이 될 수 있습니다.

(JavaScript Observer 패턴의 FAQ는 여기에 포함되어야하지만 공간 제한으로 인해 생략되었습니다.)

위 내용은 JavaScript 디자인 패턴 : 관찰자 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!