자바스크립트 디자인 패턴:관찰자 패턴

자바스크립트에서 자주 발생하는 문제가 있습니다. 특정 이벤트에 대한 응답으로 페이지의 일부를 업데이트할 수 있는 방법이 필요합니다. 예를 들어,하나 또는 여러 구성 요소로 투영하는 사용자 입력을 예로 들어 보겠습니다. 이 동기화 모든 것을 유지하기 위해 코드에 푸시 앤 풀의 많은에 연결됩니다.

이것은 관찰자 디자인 패턴이 도움이 될 수있는 곳입니다—요소들 사이의 일대 다 데이터 바인딩을 가능하게합니다. 이 단방향 데이터 바인딩은 이벤트 구동 될 수 있습니다. 이 패턴을 사용하면 특정 요구 사항을 해결하는 재사용 가능한 코드를 작성할 수 있습니다.

이 기사에서는 관찰자 디자인 패턴을 살펴 보겠습니다. 그것은 당신이 클라이언트 측 스크립팅에서 볼 수있는 일반적인 문제를 해결하는 데 도움이됩니다. 이는 일대다,단방향 및 이벤트 기반 데이터 바인딩입니다. 그것은 당신이 동기화해야 많은 요소가있을 때 자주 오는 문제입니다.

패턴을 설명하기 위해 다음과 같이 설명하겠습니다. 예,클래스,화살표 함수 및 상수가 있습니다. 너가 이미 친밀하지 않으면 너의 자신에 이 화제를 탐구하게 자유롭게 느끼십시요. 나는 구문 설탕 만 소개하는 에스 6 의 일부를 사용할 것이므로 필요한 경우 에스 5 와 함께 휴대 할 수 있습니다.그리고 테스트 기반 개발을 사용하여 패턴을 작업 할 것입니다. 이 방법으로 각 구성 요소가 유용한 방법을 알 수 있습니다.

그래서,시작하자.

이벤트 관찰자

패턴의 상위 레벨 뷰는 다음과 같습니다:

EventObserver│ ├── subscribe: adds new observable events│ ├── unsubscribe: removes observable events|└── broadcast: executes all events with bound data

내가 관찰자 패턴을 구체화 한 후에 나는 그것을 사용하는 단어 수를 추가 할 것이다. 단어 개수 구성 요소는이 관찰자를 데려 와서 모두 함께 가져올 것입니다.

EventObserver초기화하려면:

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

관찰 된 이벤트의 빈 목록으로 시작하고 모든 새 인스턴스에 대해이 작업을 수행하십시오. 이제부터EventObserver안에 더 많은 메서드를 추가하여 디자인 패턴을 구체화해 보겠습니다.

구독 방법

새 이벤트 추가:

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

관찰 된 이벤트 목록을 잡고 배열에 새 항목을 밀어 넣습니다. 이벤트 목록은 콜백 함수 목록입니다.

이 방법을 일반 자바 스크립트로 테스트하는 한 가지 방법은 다음과 같습니다:

// Arrangeconst observer = new EventObserver();const fn = () => {};// Actobserver.subscribe(fn);// Assertassert.strictEqual(observer.observers.length, 1);

노드 어설 션을 사용하여 노드에서이 구성 요소를 테스트합니다. 동일한 주장이 너무 차이 주장으로 존재.

참고 관찰 된 이벤트 목록은 겸손한 콜백으로 구성됩니다. 그런 다음 목록의 길이를 확인하고 콜백이 목록에 있다고 주장합니다.

구독 취소 방법

이벤트 제거:

unsubscribe(fn) { this.observers = this.observers.filter((subscriber) => subscriber !== fn);}

콜백 함수와 일치하는 항목을 목록에서 필터링합니다. 일치하는 항목이 없으면 콜백이 목록에 남아 있게 됩니다. 필터는 새 목록을 반환하고 관찰자 목록을 다시 할당합니다.

이 좋은 방법을 테스트하려면 다음을 수행하십시오:

// Arrangeconst observer = new EventObserver();const fn = () => {};observer.subscribe(fn);// Actobserver.unsubscribe(fn);// Assertassert.strictEqual(observer.observers.length, 0);

콜백은 목록에 있는 함수와 일치해야 합니다. 일치하는 항목이 있는 경우 구독 취소 방법은 목록에서 제거합니다. 참고 테스트는 함수 참조를 사용하여 추가 및 제거합니다.

모든 이벤트를 호출하는 브로드캐스트 방법

:

broadcast(data) { this.observers.forEach((subscriber) => subscriber(data));}

이것은 관찰 된 이벤트 목록을 반복하고 모든 콜백을 실행합니다. 이렇게 하면 구독된 이벤트에 필요한 일대다 관계를 얻을 수 있습니다. 콜백 데이터를 바인딩하는data매개 변수를 전달합니다.

화살표 기능으로 코드를 더욱 효과적으로 만듭니다. 대부분의 작업을 수행하는(subscriber) => subscriber(data)함수에 유의하십시오. 이 한 줄짜리 화살표 함수는이 짧은 구문 구문의 이점을 얻습니다. 이 자바 스크립트 프로그래밍 언어의 명확한 개선이다.

이 브로드캐스트 방법을 테스트하려면:

// Arrangeconst observer = new EventObserver();let subscriberHasBeenCalled = false;const fn = (data) => subscriberHasBeenCalled = data;observer.subscribe(fn);// Actobserver.broadcast(true);// Assertassert(subscriberHasBeenCalled);

변수 값을 변경할 수 있도록const대신let을 사용하십시오. 이 변수를 변경 가능하게 만들어 콜백 내에서 값을 재 할당 할 수 있습니다. 코드에서let을 사용하면 동료 프로그래머에게 변수가 어느 시점에서 변경된다는 신호를 보냅니다. 이 자바 스크립트 코드에 가독성과 선명도를 추가합니다.

이 테스트는 관찰자가 내가 예상 한대로 작동하는지 확인하는 데 필요한 자신감을 제공합니다. 그것은 모든 일반 자바 스크립트에서 재사용 가능한 코드를 구축에 관한 것입니다. 일반 자바 스크립트에서 테스트 가능한 코드를 작성하는 이점이 있습니다. 모든 것을 테스트하고 코드 재사용에 좋은 것을 유지하십시오.

이것으로 우리는EventObserver을 구체화했습니다. 질문은 이것으로 무엇을 만들 수 있습니까?

행동 관찰자 패턴:블로그 단어 수 데모

데모를 들어,시간이 장소에 당신을 위해 단어 수를 유지하는 블로그 게시물을 넣어. 입력으로 입력하는 모든 키 입력은 관찰자 디자인 패턴에 의해 동기화됩니다. 모든 이벤트는 당신이 갈 필요가 어디에 업데이트를 발생 무료 텍스트 입력으로 생각하십시오.

무료 텍스트 입력에서 단어 수를 얻으려면 다음을 수행 할 수 있습니다:

const getWordCount = (text) => text ? text.trim().split(/\s+/).length : 0;

완료! 이 단순 해 보이는 순수 함수에서 많은 일이 일어나고 있으므로 겸손한 단위 테스트는 어떻습니까? 이 방법은 내가 할 의도 한 것이 분명합니다:

// Arrangeconst blogPost = 'This is a blog \n\n post with a word count. ';// Actconst count = getWordCount(blogPost);// Assertassert.strictEqual(count, 9);

blogPost내부의 다소 엉뚱한 입력 문자열에 유의하십시오. 이 기능은 가능한 한 많은 에지 케이스를 커버 할 계획입니다. 그것이 나에게 적당한 단어수를 줄 한 우리는 우측 방향안에,실제로,가고 있다.

참고로,이 타이타닉의 진정한 힘이다. 이 구현을 반복하고 가능한 한 많은 사용 사례를 다룰 수 있습니다. 단위 테스트는 내가 어떻게 행동 할 것으로 예상 하는지를 알려줍니다. 동작에 결함이 있으면 어떤 이유로 든 반복하고 조정할 수 있습니다. 테스트를 통해 다른 사람이 변경할 수있는 충분한 증거가 남아 있습니다.

이러한 재사용 가능한 구성 요소를 돔에 연결할 시간입니다. 이것은 당신이 일반 자바 스크립트를 휘두르고 브라우저에 바로 용접 할 수있는 부분입니다.

이 작업을 수행하는 방법은 다음과 같습니다.:

<textarea placeholder="Enter your blog post..." class="blogPost"></textarea>

이 자바 스크립트에 의해 따라:

const wordCountElement = document.createElement('p');wordCountElement.className = 'wordCount';wordCountElement.innerHTML = 'Word Count: <strong>0</strong>';document.body.appendChild(wordCountElement);const blogObserver = new EventObserver();blogObserver.subscribe((text) => { const blogCount = document.getElementById('blogWordCount'); blogCount.textContent = getWordCount(text);});const blogPost = document.getElementById('blogPost');blogPost.addEventListener('keyup', () => blogObserver.broadcast(blogPost.value));

재사용 가능한 모든 코드를 가져 와서 관찰자 디자인 패턴을 배치하십시오. 이 텍스트 영역의 변경 사항을 추적하고 바로 아래에 당신에게 단어 수를 줄 것이다. 이 새로운 요소를 추가하기 위해body.appendChild()을 사용하고 있습니다. 그런 다음 이벤트 청취자를 첨부하여 생활에 가져옵니다.

참고 화살표 기능을 사용하면 한 줄 이벤트를 연결할 수 있습니다. 사실,이 이벤트 기반 변경 사항을 모든 구독자에게 브로드캐스트합니다. () => blogObserver.broadcast()은 여기서 대부분의 작업을 수행합니다. 심지어 바로 콜백 함수에 텍스트 영역에 대한 최신 변경 사항에 전달합니다. 예,클라이언트 측 스크립팅은 매우 멋집니다.

어떤 데모는 터치 조정할 수있는 하나없이 완료되지 않습니다,아래 코드 펜입니다:

코드 펜에 펜 사이트 포인트(@사이트 포인트)에 의해 관찰자 패턴을 참조하십시오.

이제이 기능을 완료라고 부르지 않습니다. 그것은 관찰자 디자인 패턴의 출발점에 불과하다. 내 마음 속의 질문은,얼마나 멀리 갈 의향이 있습니까?

앞을 내다보기

이 아이디어를 더욱 발전시키는 것은 당신에게 달려 있습니다. 관찰자 디자인 패턴을 사용하여 새 기능을 빌드하는 방법에는 여러 가지가 있습니다.

당신은 데모를 향상시킬 수 있습니다:

  • 단락 수를 계산하는 또 다른 구성 요소
  • 입력한 텍스트의 미리보기를 보여주는 또 다른 구성 요소
  • 마크다운 지원으로 미리보기를 향상시킵니다(예:

). 위의 개선 사항은 프로그래밍 갈비에 도전 할 것입니다.

결론

관찰자 디자인 패턴은 자바 스크립트에서 실제 문제를 해결하는 데 도움이 될 수 있습니다. 이 같은 데이터와 동기화 된 요소의 무리를 유지하는 다년생 문제를 해결합니다. 브라우저가 특정 이벤트를 발생시키는 경우가 종종 있습니다. 나는 당신의 대부분은 지금까지 이러한 문제를 가로 질러왔다 및 도구 및 타사 종속성을 향해 실행 한 확신합니다.

이 디자인 패턴은 당신의 상상력이 기꺼이 갈 수있는 한 멀리 갈 수있게 해줍니다. 프로그래밍에서는 솔루션을 패턴으로 추상화하고 재사용 가능한 코드를 작성합니다. 이 당신을 데려 갈 것이다 얼마나 멀리에 제한이 없습니다.

나는 당신이 약간의 훈련과 노력으로,당신은 일반 자바 스크립트에서 할 수있는 방법을 많이 볼 수 있기를 바랍니다. 다시 사용할 수 있는 간결한 코드를 작성하는 데 도움이 됩니다.

이 기사는 줄리오 마이나 디에 의해 동료 검토되었다. 이 될 수있는 최고의 사이트 포인트 콘텐츠를 만들기위한 사이트 포인트의 피어 리뷰어의 모든 덕분에!

답글 남기기

이메일 주소는 공개되지 않습니다.