AngleJS_AngularJS의 $apply() 메소드에 대한 자세한 설명

프론트엔드가 완전 초보자인 저는 아직 Javascript에 대해 아는 바가 거의 없습니다. Angle JS를 직접 시작하려면 많은 저항에 부딪히게 됩니다. 하지만 우리가 열심히 노력한다면 반인간적인 디자인도 큰 문제가 되지 않을 것이라고 믿습니다.

좋아요, 더 이상 말도 안되는 소리는 하지 마세요. Angle JS가 무엇인지 이해하기 위해 Scope부터 시작했습니다. 그렇다면 범위란 무엇입니까? 공식 문서에서 한 구절 빌리기:

코드 복사 코드는 다음과 같습니다.

"범위는 애플리케이션 모델을 참조하는 개체입니다. 표현식의 실행 컨텍스트입니다. 범위는 애플리케이션의 DOM 구조를 모방하는 계층 구조로 배열됩니다. 범위는 표현식을 관찰하고 이벤트를 전파할 수 있습니다."

이 글을 읽고 나면 다른 프로그래밍 언어와 유사하게 Scope가 표현식 실행을 위한 컨텍스트를 제공하는 데이터 모델의 범위와 같다고 생각합니다.

스코프의 특징

다음으로 Scope에는 어떤 기능이 있는지 살펴볼까요?

Scope는 모델 변경 사항을 모니터링하는 $watch 메서드를 제공합니다.
Scope는 모델 변경 사항을 전파하기 위한 $apply 메서드를 제공합니다.
범위를 상속하여 다양한 애플리케이션 구성 요소와 속성 액세스 권한을 격리할 수 있습니다.
범위는 표현식 평가를 위한 컨텍스트를 제공합니다.

이 네 가지 기능에 대해서는 이전에 ActionScript, C, Java를 공부했기 때문에 첫 번째, 세 번째, 네 번째 사항은 이해하기 어렵지 않지만 두 번째 사항은 약간 불분명하게 느껴집니다. 답변을 구하는 원칙에 따라 그래도 구글을 통해 몇 가지를 찾아냈습니다. 숙련된 베테랑이라면 벽돌을 탭하세요!

원본 자바스크립트

우선 언뜻 보면,scope.apply()는 바인딩을 업데이트하는 일반적인 방법인 것 같습니다. 하지만 좀 더 생각해 보세요. 왜 필요한가요? 보통 언제 사용되나요? 이 두 가지 문제를 이해하려면 Javascript부터 시작해야 합니다. Javascript 코드에서는 특정 순서로 실행됩니다. 실행할 코드 조각의 차례가 되면 브라우저는 현재 조각만 실행하고 다른 작업은 수행하지 않습니다. 그래서 때로는 잘 만들어지지 않은 일부 웹 페이지가 무언가를 클릭한 후에 멈추는 경우가 있습니다. Javascript가 작동하는 방식이 이러한 현상의 원인 중 하나입니다! 아래에는 이를 느낄 수 있는 코드가 있습니다.

코드 복사 코드는 다음과 같습니다.

var 버튼 = document.getElementById('clickMe');
기능버튼클릭 () {
Alert('버튼을 클릭했습니다');
}
button.addEventListener('click',buttonClicked);
함수 타이머Complete () {
Alert('타이머 완료');
}
setTimeout(timerComplete, 5000);

Javascript 코드를 로드할 때 먼저 "clickMe"라는 ID를 가진 버튼을 찾은 다음 리스너를 추가하고 시간 제한을 설정하세요. 5초 정도 기다리면 대화 상자가 나타납니다. 페이지를 새로 고치고 즉시 clickMe 버튼을 클릭하면 대화 상자가 나타납니다. 확인을 클릭하지 않으면 timeComplete 함수가 실행될 기회가 없습니다.

바인딩 업데이트 방법

좋아요, 겉으로는 관련없어 보이는 몇 가지 이야기를 마치고 다시 주제로 돌아가겠습니다. 데이터가 변경되고 페이지를 업데이트해야 하는 시기를 Angle JS는 어떻게 알 수 있나요? 코드는 데이터가 수정된 시기를 알아야 하지만 현재는 객체의 데이터가 변경되었음을 직접 알릴 수 있는 방법이 없습니다(ECMAScript 5가 이 문제를 해결하려고 시도하고 있지만 아직 실험 단계에 있습니다). 현재 더욱 주류를 이루는 전략에는 다음 두 가지 솔루션이 포함됩니다. 하나는 속성을 통해 직접 지정하는 대신, 객체의 메소드를 호출해야만 모든 데이터를 설정할 수 있도록 특수한 객체를 사용하는 것입니다. 이러한 방식으로 모든 수정 사항이 기록될 수 있으며 페이지를 업데이트해야 하는 시기를 알 수 있습니다. 이것의 단점은 특별한 객체를 상속받아야 한다는 것이다. 할당은 object.key=value 대신 object.set('key', 'value')를 통해서만 수행할 수 있습니다. EmberJS 및 KnockoutJS와 같은 프레임워크에서는 이 작업을 수행합니다(비록 노출된 적은 없지만 당황스럽습니다). 다른 하나는Angular JS에서 채택한 방법으로, 각 Javascript 코드 실행 시퀀스가 ​​실행된 후 데이터 변경이 있는지 확인합니다. 이는 비효율적이며 성능에 심각한 영향을 미칠 수도 있습니다. 그러나 Angle JS는 이 문제를 해결하기 위해 몇 가지 영리한 방법을 사용합니다(아직 연구되지 않았으며 명확하지도 않습니다). 이것의 장점은 어떤 객체든 마음대로 사용할 수 있고 할당 방법에 제한이 없으며 데이터의 변경 사항도 감지할 수 있다는 것입니다.
Angle JS가 채택한 이 솔루션의 경우 우리가 관심을 갖는 것은 데이터가 변경되는 시기이며, 여기서scope.apply()가 유용합니다. 바인딩된 데이터가 변경되었는지 확인하는 것은 실제로scope.digest()에 의해 수행되지만 이 메서드를 직접 호출하는 경우는 거의 없지만,scope.apply() 메서드를 호출합니다. 범위.다이제스트() 메서드. scope.apply() 메서드는 함수나 표현식을 가져와 실행한 다음 마지막으로scope.digest() 메서드를 호출하여 바인딩이나 감시자를 업데이트합니다.

$apply()를 사용해야 하는 경우

여전히 같은 질문입니다. 언제 apply() 메소드를 호출해야 합니까? 실제로 상황은 매우 드뭅니다. ng-click, 컨트롤러 초기화, http 콜백 함수 등과 같은 거의 모든 코드가scope.apply()로 래핑됩니다. 이러한 경우에는 직접 호출할 필요가 없습니다. 실제로 직접 호출할 수 없습니다. 그렇지 않으면 apply() 메서드 내에서 apply() 메서드를 호출하면 오류가 발생합니다. 새로운 실행 시퀀스에서 코드를 실행해야 하는 경우, 그리고 이 새로운 실행 시퀀스가 ​​Angle JS 라이브러리 메서드에 의해 생성되지 않는 경우에만 이 시점에서 코드의 범위를 사용해야 합니다. apply()가 래핑되었습니다. 예를 들어 설명해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

{{message}}

코드 복사 코드는 다음과 같습니다.

functionCtrl($scope) {
$scope.message ="업데이트를 위해 2000ms를 기다리는 중"
setTimeout(함수 () {
​ ​$scope.message="시간 초과가 호출되었습니다!";
// AngularJS는 $scope
업데이트를 인식하지 못합니다. }, 2000)
}

위 코드가 실행되면 다음 페이지가 표시됩니다. 업데이트를 위해 2000ms를 기다리는 중입니다. 분명히 데이터 업데이트는 각도 JS에서 발견되지 않습니다.
다음으로 Javascript 코드를 약간 수정하고 이를scope.apply()로 래핑합니다.

코드 복사 코드는 다음과 같습니다.

functionCtrl($scope) {
$scope.message ="업데이트를 위해 2000ms를 기다리는 중"
setTimeout(함수 () {
​ ​$scope.$apply(함수 () {
​ ​$scope.message="시간 초과가 호출되었습니다!";
});
}, 2000)
}

이번 차이점은 페이지에 먼저 Waiting 2000ms for update가 표시된다는 것입니다. 2초를 기다린 후 내용은 Timeout Called!로 변경됩니다. 분명히 데이터 업데이트는 각도 JS에 의해 확인됩니다.
참고: 이 작업을 수행해서는 안 되며, Angle JS에서 제공하는 시간 초과 메서드를 사용하면 Apply 메서드로 자동으로 래핑됩니다.

과학은 양날의 검
마지막으로,scope.apply() 및scope.apply(function) 메소드를 다시 살펴보겠습니다! Angle JS가 우리를 위해 많은 일을 해줬지만, 우리는 또한 몇 가지 기회를 잃었습니다. 아래 의사 코드를 보면 한 눈에 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수$적용(expr) {
시도해보세요 {
​​return$eval(expr);
} catch(e) {
​​$ExceptionHandler(e);
} 드디어 {
​​$root.$digest();
}
}

모든 예외를 포착하고 다시 발생시키지 않습니다. 마지막으로 $digest() 메소드가 호출됩니다.

요약하자면

$apply() 메서드는 DOM 이벤트, setTimeout, XHR 또는 기타 타사 라이브러리와 같은 각도 프레임워크 외부에서 각도 JS 표현식을 실행할 수 있습니다. 이것은 단지 시작일 뿐입니다. 물은 아직 매우 깊습니다. 모두가 함께 깊은 다이빙을 할 수 있습니다!