AngularJS 더티 검사 메커니즘과 $timeout의 놀라운 사용

이 글에서는 주로 AngularJSdirty check 메커니즘에 대한 자세한 설명과 $timeout의 놀라운 사용법을 소개합니다. "Dirty check"는 Angular의 핵심 메커니즘 중 하나이며 양방향 바인딩 및 MVVM 모드를 구현하는 데 중요한 기반입니다. . 관심이 있으시면

||브라우저 이벤트 루프와 Angular의 MVW

에 대해 알아보세요. "Dirty check"는 Angular의 핵심 메커니즘 중 하나이며 양방향 바인딩을 구현하는 데 중요한 기반입니다. MVVM 모드.

Angular는 양방향 바인딩을 일련의 watch expressions으로 변환한 다음 이러한 watch 표현식의 결과가 변경되었는지 재귀적으로 확인합니다. 그렇다면 해당 watcher 함수를 실행합니다. 모델 값이 더 이상 변경되지 않으면 더 이상 감시자 기능이 트리거되지 않으며 전체 다이제스트 주기가 종료됩니다.

프로그래밍 사고방식을 바꾸지 않고도 동일한 언어, 동일한 이벤트 모델을 사용하여 NodeJS 프로그램을 빠르게 개발할 수 있기 때문에 NodeJS가 빠르게 인기를 얻었고 JavaScript 풀스택도 점점 더 인기를 얻고 있습니다.

Angular가 MV* 프레임워크라는 말을 자주 듣습니다. 이는 Angular가 브라우저의 이벤트 모델을 확장하고 자체 컨텍스트를 설정하기 때문입니다.

||Angular

watch 표현식의 $watch 함수는 매우 유연합니다. 함수, $scope의 속성 이름 또는 string 형식의 표현식일 수 있습니다. $scope의 속성 이름이나 표현식은 결국 $parse 서비스에 의해 해당 함수로 구문 분석되어 속성 값을 얻습니다.

모든 감시자 기능은 나중에 $digest에서 사용할 수 있도록 unshift 기능을 통해 스코프의 헤드에 삽입됩니다.$$watchers 배열.

마지막으로 $watch 함수는 등록되지 않은 함수를 반환합니다. 일단 호출하면 방금 등록된 감시자를 제거할 수 있습니다.

Angular는 === 비교를 사용하는 것이 더 빠르기 때문에 기본적으로 심층 비교를 위해 angle.equals() 함수를 사용하지 않는다는 점에 유의해야 합니다. 따라서 배열이나 객체를 비교할 때 참조를 확인합니다. 이로 인해 내용이 완전히 동일한 두 표현이 다른 것으로 판단됩니다. 심층적인 비교가 필요한 경우 $watch('someExp', function(){...}, true)와 같이 세 번째 선택적 매개변수인 objectEquality를 명시적으로 true로 설정해야 합니다.

Angular는 배열이나 속성 그룹을 모니터링하기 위한 $watchGroup 및 $watchCollection 메서드도 제공합니다.

||Angular의 $digest 함수

앞서 Angular가 브라우저의 이벤트 루프를 확장한다고 언급했습니다. 무슨 일이 일어나고 있나요?

View에서 이벤트 명령으로 전달된 이벤트를 수락하면 해당 이벤트에 응답하기 위해 Angular 컨텍스트로 전환되고 $digest 루프가 트리거됩니다.

$digest 루프는 실제로 두 개의 while 루프로 구성됩니다. $evalAsync를 처리하는 비동기 작업 대기열과 $watch를 처리하는 감시자 대기열이 있습니다.

$digest 루프가 발생하면 현재 $scope 및 모든 하위 $scope에 등록된 모든 감시자 기능을 순회합니다.

모든 감시자 기능을 순회하는 것을 더티 검사 라운드라고 합니다. 더티 검사 라운드를 수행한 후 감시자가 모니터링하는 값이 변경된 경우 모든 감시자 기능이 모니터링 중인 값이 더 이상 변경되지 않았다고 보고할 때까지 또 다른 더티 검사가 수행됩니다.

$digest 루프가 끝나면 모델 변경 결과가 DOM에 업데이트됩니다. 이를 통해 여러 업데이트를 병합할 수 있으며 빈번한 DOM 속성을 방지할 수 있습니다.

$digest 루프가 끝나기 전에 더티 검사가 10회 이상 초과되면 더티 검사가 무한 반복되는 것을 방지하기 위해 예외가 발생한다는 점에 유의해야 합니다.

언제 이 Angular 컨텍스트에 들어가 "더티 체크 메커니즘"을 트리거합니까? 이 질문은 매우 중요하면서도 고민이 되는 부분입니다.

Angular 컨텍스트에 들어가는 모든 이벤트는 $digest 루프를 실행합니다. ngModel이 모니터링하는 양식 대화형 제어의 경우 문자가 입력될 때마다 $watcher 함수를 확인하는 루프가 트리거되어 뷰가 적시에 업데이트될 수 있습니다. Angular 1.3 이후에는 구성에 ngModelOptions를 사용하여 기본 트리거 방법을 수정할 수 있습니다.

||$apply

$digest in Angular는 내부 함수로 일반 애플리케이션 코드에서 직접 호출하면 안 됩니다. 적극적으로 트리거하려면 Angular의 "더티 검사 메커니즘"을 트리거하는 공통 공용 인터페이스인scope.$apply 함수를 호출해야 합니다.

Angular는 자신이 알고 있는 동작 트리거 방법만 관리할 수 있지만 모든 Angular 작업 시나리오를 다룰 수는 없다는 점에 유의해야 합니다. 이것이 타사 jQuery 플러그인을 캡슐화할 때 뷰를 자동으로 업데이트할 수 없지만 $scope.$apply를 수동으로 호출해야 하는 이유입니다.

jquery 플러그인을 통합할 때 다이제스트 진행 중 오류가 가끔 발생합니다. 버그를 제거한 후에도 여전히 해결되지 않으면 $timeout을 사용하여 해결하는 것을 고려할 수 있습니다.

$timeout

의 놀라운 활용

인터페이스에 바인딩된 변수가 지연된 작업에서 수정되면 window.setTimeout은 UI 인터페이스를 업데이트하기 위해 "더티 검사"를 트리거하지 않습니다. $scope.$apply를 추가하면 문제가 해결될 것이라고 생각할 수도 있습니다. 예, 이렇게 하면 UI 인터페이스 업데이트 문제가 해결될 수 있지만 또 다른 문제가 발생할 수 있습니다.

오류: $digest가 이미 진행 중입니다.

무슨 일이 일어나고 있나요? 아, Angular는 내부적으로 "더티 검사"를 수행하고 있습니다. 똑똑한 프로그래머는 이 문제를 해결하기 위해 다음과 같은 코드를 교묘하게 작성했습니다.

function safeApply(scope, fn){ 
  (scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn); 
}

코드에서 적용 기능을 실행하기 전에 먼저 Angular가 내부적으로 "더티 검사"를 수행하는지 확인합니다. 따라서 $apply 없이 함수를 직접 실행합니다. 그렇지 않으면 더티 검사가 활성화되지 않은 경우 $apply가 함수를 실행합니다. 하하, "완벽한" 솔루션이지 않나요?

작가는 위의 완벽이라는 단어 주위에 따옴표를 추가했다는 점에 유의하세요. Angular에는 기본 javascript window.setTimeout을 래핑하는 Angular에 의해 구현되는 $timeout 서비스가 내장되어 있습니다.

$timeout에는 멋진 용도가 많이 있지만 $timeout을 사용하여 적용 기능을 구현하는 것이 첫 번째 솔루션이 되어서는 안 됩니다. Angular에 내장된 명령어를 사용하는 것입니다.

위 내용은 이 글의 전체 내용입니다. 여러분의 학습에 도움이 되기를 바랍니다.

위 내용은 AngularJS 더티 검사 메커니즘과 $timeout의 놀라운 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!