JavaScript 디자인 패턴 : 관찰자 패턴
- 尊渡假赌尊渡假赌尊渡假赌원래의
- 2025-02-16 11:00:151015검색
JavaScript의
subscribe
unsubscribe
broadcast 이벤트 옵저버 구독 메소드
구독 취소 메소드
방송 방법
를 사용하여 다른 프로그래머에게 변수가 어느 시점에서 변경되고 있음을 알리십시오. 이것은 JavaScript 코드의 가독성과 명확성을 증가시킵니다. 이 테스트는 관찰자가 예상대로 작동하는지 확인하기에 충분한 확신을줍니다. TDD를 사용하면 순수한 자바 스크립트로 재사용 가능한 코드를 구축하는 것입니다. 순수한 JavaScript에서 테스트 가능한 코드를 작성하면 많은 이점이 있습니다. 모든 것을 테스트하고 코드 재사용에 유익한 것을 유지하십시오. 이를 통해 우리는 그것을 완성했습니다. 문제는, 무엇을 만들 수 있습니까?
옵저버 모드의 실제 적용 : 블로그 워드 카운트 데모
의 약간 이상한 입력 문자열에 주목하십시오. 내 목표는이 기능이 가능한 한 많은 모서리 케이스를 커버하는 것입니다. 그것이 올바른 단어 수를주는 한, 우리는 올바른 방향으로갑니다. 그건 그렇고, 이것은 TDD의 진정한 힘입니다. 이 구현은 반복 될 수 있으며 가능한 많은 사용 사례를 다룰 수 있습니다. 단위 테스트는 내가 어떻게 행동 할 것으로 기대하는지 알려줍니다. 행동에 결함이 있으면 어떤 이유로 든 반복하고 조정하기 쉽습니다. 테스트를 통해 다른 사람들이 변경할 수있는 충분한 증거를 남겨 두십시오. 이 재사용 가능한 구성 요소를 DOM에 연결해야합니다. 이것은 당신이 순수한 JavaScript를 가져 와서 브라우저에 납땜하는 부분입니다. 한 가지 방법은 페이지에서 다음 HTML을 사용하는 것입니다.
앞으로 기대
(JavaScript Observer 패턴의 FAQ는 여기에 포함되어야하지만 공간 제한으로 인해 생략되었습니다.)<code>EventObserver
│
├── subscribe: 添加新的可观察事件
│
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>
<code class="language-javascript">class EventObserver {
constructor() {
this.observers = [];
}
}</code>
<code class="language-javascript">subscribe(fn) {
this.observers.push(fn);
}</code> 메소드를 테스트하려면 :
unsubscribe 변수 값을 변경할 수 있도록 대신 <code class="language-javascript">// Arrange
const observer = new EventObserver();
const fn = () => {};
// Act
observer.subscribe(fn);
// Assert
assert.strictEqual(observer.observers.length, 1);</code>
<code>EventObserver
│
├── subscribe: 添加新的可观察事件
│
├── unsubscribe: 移除可观察事件
│
└── broadcast: 使用绑定数据执行所有事件</code>
blogPost
<code class="language-javascript">class EventObserver {
constructor() {
this.observers = [];
}
}</code>
<code class="language-javascript">subscribe(fn) {
this.observers.push(fn);
}</code>
body.appendChild()
() => blogObserver.broadcast()
결론
위 내용은 JavaScript 디자인 패턴 : 관찰자 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!