각도 변경 감지에서 비동기 이벤트 구독에 대한 간략한 분석

이전 기사에서는 변경 감지가 정확히 무엇인지 소개하고, 변경 감지를 더 잘 이해하기 위해 기본 JS 예제를 사용했으며, 변경 감지가 트리거되는 시나리오를 소개했습니다. 이전 기사에서는 작업 시 일반적인 5가지 시나리오를 요약했지만 먼저 이에 대해 생각해 볼 필요가 있습니다. Angular의 변경 감지는 모든 비동기 이벤트를 지원합니까? 지원된다면 나열될 수 있나요? 일부가 지원되지 않으면 어떤 것이 지원되지 않습니까? 이러한 문제는 후속 기사에서 자세히 설명됩니다. [추천 관련 튜토리얼: "angular Tutorial"]

비동기 이벤트를 구독하는 방법

비동기 작업이 발생하는 한 Angular는 변경 감지를 수행합니다. 그렇다면 Angular는 어떻게 비동기 이벤트를 구독(인식)할까요? 즉, Angular는 비동기 이벤트가 언제 실행되는지 어떻게 알 수 있습니까? 먼저 zone.js에 대해 알아봅시다.

zone.js

zone.js는 브라우저에서 비동기 작업을 캡슐화하고 가로채기 위한 zone이라는 메커니즘을 제공하며 비동기 수명 주기 후크 및 통합된 비동기 오류 처리 메커니즘도 제공합니다.

zone.js는 setTimeout 및 HTMLElement.prototype.onclick과 같은 브라우저의 일반적인 메서드와 요소를 가로채기 위해 패치되었습니다. Angular가 시작되면 zone.js를 사용하여 여러 브라우저 API를 패치하여 비동기 이벤트를 캡처하고 이벤트 캡처 후 변경 감지를 호출합니다.

package.json다음 예:

{
  "dependencies": {  
     ...
    "zone.js": "~0.10.2"
  }
}

zone.js를 간략하게 살펴볼 수 있습니다.

예를 들어 Vue2의 데이터 응답성에서는 Object.defineProperty를 사용하여 데이터 변경을 가로채는 것을 모두 알고 있지만 객체의 속성 변경만 모니터링할 수 있다는 문제가 많이 있습니다. 어레이 변경에 대해 사용자가 할 수 있는 작업은 없습니다. 배열 프로토타입에는 배열을 변경할 수 있는 7가지 메서드가 있습니다. Vue는 이러한 메서드를 어떻게 구현해야 합니까? 푸시 메서드를 예로 들면, 원래 푸시 메서드를 덮어쓰고 새 푸시 메서드를 구현해야 합니다. 새 푸시 메서드는 원래 푸시 메서드의 기능을 유지하고 종속성에 업데이트를 알려야 합니다.

zone.js의 구현은 이 아이디어와 동일합니다. setTimeout의 패치 프로세스를 시뮬레이션하기 위해 단순화된 코드를 살펴보겠습니다.

function setTimeoutPatch() {
  // 存储原始的setTimeout
  var originSetTimeout = window['setTimeout'];
  // 对浏览器原生方法的包裹封装
  window.setTimeout = function () {
      return global['zone']['setTimeout'].apply(global.zone, arguments);
  };
  // 创建包裹方法，提供给上面重写后的setTimeout使用
  Zone.prototype['setTimeout'] = function (fn, delay) {
    // 先调用原始方法
   originSetTimeout.apply(window, arguments);
   // 执行完原始方法后就可以做其他拦截后需要进行的操作了
   ...
  };
}

zone.js의 기본 원리를 이해하고 있습니까?

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 각도 변경 감지에서 비동기 이벤트 구독에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!