JavaScript 관찰자 패턴 정의 및 DOM 이벤트 인스턴스에 대한 자세한 설명

관찰자 패턴(게시-구독 패턴): 객체 간의 일대다 종속 관계를 정의합니다. 객체의 상태가 변경되면 이에 의존하는 모든 객체에 알림이 전송됩니다.

JavaScript에서는 일반적으로 이벤트 모델이 기존 관찰자 패턴을 대체하는 데 사용됩니다.
이점:

(1)은 비동기 프로그래밍에서 널리 사용될 수 있으며 콜백 함수 전달의 대안입니다.

(2)는 객체 간에 하드 코딩된 알림 메커니즘을 대체할 수 있습니다. 한 객체는 더 이상 다른 객체의 인터페이스를 명시적으로 호출할 필요가 없습니다. 두 개체는 쉽게 분리됩니다.

DOM 이벤트 – 관찰자 패턴의 전형적인 예

document.body에 대한 사용자의 클릭을 모니터링해야 하지만 사용자가 언제 클릭할지 예측할 방법이 없습니다.
그래서 document.body에서 click 이벤트를 구독합니다. body 노드가 클릭되면 body 노드가 구독자에게 이 메시지를 게시합니다!

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

특정 웹사이트에는 헤더, 탐색 탐색, 메시지 목록 및 기타 모듈이 있습니다. 이러한 모듈을 렌더링하려면 사용자 로그인 정보를 얻어야 합니다.
(1) 일반적인 작성 방법:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功，渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});

(2) 관찰자 패턴을 사용하면 분리가 쉽습니다!

위 내용은 JavaScript 관찰자 패턴 정의 및 DOM 이벤트 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!