Angularjs에서 $ 시계를 마스터 링합니다

코어 포인트

angularjs의 함수는 가변 값 또는 표현의 변화를 관찰하기위한 강력한 도구입니다. 변경이 감지되면 모니터링 된 변수가 변경 될 때마다 실행되는 콜백 함수를 트리거합니다.

• 비교를 위해 JavaScript의 평등 연산자 (===)를 사용하십시오. 새 값이 이전 값과 다르면 콜백 함수가 트리거됩니다. 그러나 기본적으로 기본적으로 참조 평등에 대한 점검 만 확인해야합니다. 즉, 콜백 함수는 새 값이 모니터링 된 변수에 할당 될 때만 트리거됩니다. $watch AngularJS는 또한 각각 동일한 콜백 함수를 갖는 여러 모니터 또는 모니터링 어레이 또는 객체를 설정하기위한 편리한 단축키로서 및 도 제공합니다. 그러나 이러한 방법은 얕은 모니터링 만 수행하고 참조 변경에만 반응합니다.
• , 특히 여러 변수에서 $watch를 사용하면 각 요약주기에 대해 모든 모니터링 변수의 변경 사항을 점검해야하므로 성능에 영향을 줄 수 있습니다. 개발자는 상황에 따라 또는 $watch를 사용하는 것을 고려하거나 성능을 향상시키기 위해 모니터링 변수 수를 제한해야합니다.
• 이 기사는 Mark Brown이 검토했습니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다! AngularJS는 세 가지 다른 "Watch"방법을 통해 Publish-Subscribe 모드를 사용할 수있는 다양한 옵션을 제공합니다. 각 방법은 동작을 수정하기 위해 선택적 매개 변수를 사용합니다. $watchGroup $watchCollection에 대한 공식 문서는 철저하지 않습니다. 결국, 이것은 전체적으로 Angularjs v1을 귀찮게하는 문제입니다. 진행 방법을 설명하는 온라인 리소스조차도 기껏해야 조각화됩니다.
따라서 궁극적으로 개발자가 특정 상황에 대한 올바른 접근법을 선택하기가 어렵습니다. 이것은 AngularJS의 초보자에게 특히 그렇습니다! 결과는 놀랍거나 예측할 수 없을 수 있으며, 필연적으로 오류로 이어집니다.
• 이 기사에서는 AngularJS 개념에 익숙하다고 가정합니다. 검토가 필요하다고 생각되면 $watch, 바인딩 및 및 $watchGroup에 대해 읽어야 할 수도 있습니다. $watchCollection
이해를 확인하십시오 예를 들어, 배열의 첫 번째 요소를 모니터링하는 가장 좋은 방법은 무엇입니까? 우리가 범위에 배열을 선언한다고 가정합니다
배열에 요소를 추가 할 때
• 콜백 함수를 트리거합니까? $scope.$watch('letters', function () {...}); 우리가 첫 번째 요소를 변경하면 발사됩니까?
• 는 어디에 있습니까? 같은 방식으로 작동합니까, 아니면 더 나은가요?
위의 배열 요소는 원래 값입니다. 첫 번째 요소를 동일한 값으로 바꾸면 어떻게됩니까?
• 이제 배열에 객체가 포함되어 있다고 가정합니다. 어떻게됩니까? $scope.$watch('letters[0]', function () {...});
,
• 와 의 차이점은 무엇입니까?
• 이 모든 질문에 혼란 스러우면 계속 읽으십시오. 저의 목표는 몇 가지 예를 가지고 가능한 한 명확하게 설명함으로써 과정을 안내하는 것입니다.
• $watch $watchCollection $watchGroup
부터 시작하겠습니다. 다음은 모든 시계 기능의 핵심입니다.
사용

angular의 장점은 동일한 메커니즘을 명시 적으로 사용하여 컨트롤러의 데이터 변경으로 트리거 된 복잡한 작업을 수행 할 수 있다는 것입니다. 예를 들어, 다음에 응답하여 변경할 수있는 특정 데이터에 대한 모니터를 설정할 수 있습니다.

타임 아웃 ui

복잡한 비동기 계산은 웹 워커 에 의해 수행됩니다 ajax 호출 $scope.$watch 원인에 관계없이 데이터 변경을 처리하기 위해 하나의 리스너 만 설정할 수 있습니다. 그러나 이렇게하려면

직접 전화해야합니다.

$scope.$watch 실용적 작동 $watch 의 코드를 봅시다.

이것은 서명입니다 : .

세부적으로, 네 가지 매개 변수 : $watch

모니터링 된 표현. 함수 또는 문자열 일 수 있으며 모든 다이제스트주기에서 평가됩니다.

여기서 주목하는 핵심 측면은 표현식이 함수로 평가되면 함수가 edempotent 여야한다는 것입니다. 다시 말해, 동일한 입력 세트의 경우 항상 동일한 출력을 반환해야합니다. 그렇지 않은 경우, Angular는 모니터링 된 데이터가 변경되었다고 가정합니다. 이는 차이를 계속 감지하고 다이제스트 사이클의 각 반복에서 리스너를 호출한다는 것을 의미합니다.
모니터가 처음 설정 될 때 발사되는 콜백 함수, 그리고 요약주기 동안
이 값이 참이면 모니터가 깊이 비교를 수행합니다. 그렇지 않으면 얕은 비교, 즉 비교 참조 만 수행합니다.
3. 배열을 예로 들어 보자 >
필드의 재 할당 만 리스너를 호출하게한다는 것을 의미합니다.
우리는 또한“깊은”의 깊이를 확인해야합니다. 나중에 이것에 대해 논의 할 것입니다.
• 통과하면 모니터링 표현식을 무시합니다. 이 매개 변수는

  에 대한 일반적인 호출로 사용되지 않습니다. prettyPrintExpression 조심 : 자신을 볼 수 있듯이, 네 번째 매개 변수가 우연히 전달 될 때 예기치 않은 결과는 예상치 못한 결과를 얻습니다. $watch()

  이제 우리는 소개의 몇 가지 질문에 답할 것입니다. 이 섹션의 예를 확인하십시오 : 코드 펜 예

  자유롭게 자신을 익히십시오. 행동 차이를 직접 비교할 수 있습니다.
모니터링 어레이 따라서 변경을 수행하려면 범위의 배열을 모니터링해야하지만 "변경"은 무엇을 의미합니까? 컨트롤러가 다음과 같이 보인다고 가정합니다

한 가지 옵션은 다음과 같은 호출을 사용하는 것입니다.

위의 콜백에서 와

는 자기 설명 의미를 가지며 사이클이 호출 될 때마다 업데이트됩니다. 의 의미는 또한 현재 범위에 대한 참조를 가지고 있기 때문에 직관적입니다. 그러나 열쇠는 :이 청취자는 언제 호출 될 것인가? 실제로, 어떤 일이 발생하지 않고 배열의 요소를 추가, 삭제, 교체 할 수 있습니다. 기본적으로 는

참조 평등

만 원한다고 가정하기 때문에 콜백 함수는 새 값을 에 할당 할 때만 트리거되기 때문입니다.

배열의 모든 요소에 대한 변경 사항에 대한 조치를 취해야하는 경우

를 세 번째 매개 변수로

로 전달해야합니다 (즉, 위에서 설명한

매개 변수의 값으로).

감시 객체 객체의 경우 상황이 변경되지 않습니다. 가 false 인 경우 해당 스코프 변수에 대한 재 할당을 모니터링하고, 사실이라면 객체의 요소가 변경 될 때마다 콜백 함수가 트리거됩니다.

모니터링 배열의 첫 번째 요소 는 를 사용하여 배열을 모니터링함으로써 콜백 함수가 트리거 될 때마다

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

및

가 전체 배열의 기존 및 새로운 값이 될 것임을 주목할 가치가 있습니다. 따라서 실제로 변화가 무엇인지 이해하려면 서로 비교해야합니다.

배열의 첫 번째 요소 (또는 네 번째 요소-동일한 원리)에 대한 변경에만 관심이 있다고 가정합니다. Angular는 우수하기 때문에이를 수행 할 수 있습니다. 첫 번째 인수로

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

로 전달 된 표현에서 자연스럽게 표현할 수 있습니다.

배열에 2 개의 요소 만 있으면 어떻게됩니까? 문제 없습니다. 네 번째 요소를 추가하지 않으면 콜백 기능이 발사되지 않습니다. OK, 기술적으로 모니터를 설정하면 네 번째 요소를 추가 할 때만 발사됩니다. newValue를 기록하면

는 두 경우 모두 정의되지 않음을 알 수 있습니다. 이를 기존 요소를 모니터링 할 때 발생하는 일과 비교하십시오. 설정시 계속 oldValue가 있습니다. 따라서 oldValue == undefined를 처리 할 수 ​​없습니다! $watch 지금 더 흥미로운 질문 : 여기에서

를 통과해야합니까?

짧은 대답 : 죄송합니다. 짧은 대답이 없습니다. objectEquality === true 그것은 실제로 : 에 달려 있습니다

이 예에서는 원래 값을 연구하고 있기 때문에 깊이 비교가 필요하지 않으므로

를 생략 할 수 있습니다.

그러나 우리가 매트릭스가 있다고 가정하고 첫 번째 행을 모니터링하려고합니다. 그런 다음

와 같은 과제가 변경되면 경고를받을 수 있습니다.

모니터링 객체의 필드 아마도 배열에서 요소를 모니터링하는 것보다 더 유용 할 수 있습니다. 객체의 필드를 모니터링 할 수 있습니다. 그러나 그것은 놀라운 일이 아닙니다. 결국, JavaScript의 배열 는
• 객체입니다. objectEquality
깊이는 얼마나 깊습니까?
• 이 시점에서 우리는 또한 마지막이지만 중요한 세부 사항을 명확히해야합니다. 각 필드가 비-프리맨티 값 인 복잡한 중첩 객체를 모니터링 해야하는 경우 어떻게됩니까? 예를 들어 트리 나 그래프 또는 JSON 데이터 만 있습니다. $scope.board = [[1, 2, 3], [4, 5, 6]] 확인하자! $scope.board[0][1] = 7 우선, 우리는 모니터링 할 물체가 필요합니다.
전체 객체에 대한 모니터를 설정하겠습니다.이 경우
가

로 설정되어야한다고 생각합니다.

<:> 질문은 다음과 같습니다. 와 같은 과제가 발생하면 각도가 우리에게 알려주기에 충분히 친절할까요? <:> 대답은 다음과 같습니다. 예, 운 좋게도 (이전 Codepen 데모 참조). 기타 방법

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

정말 다른 접근법입니까? 대답은 아니오입니다.
는 동일한 콜백 함수를 사용하여 여러 모니터를 설정하고 배열을 전달할 수있는 편리한 단축키입니다.

각 통과 된 표현식은 표준 메소드를 사용하여 모니터링됩니다.

는 , 및 를 사용하여 변경된 값과 동일한 값을 유지 한 값을 포함하여 표현식 값 목록을 저장한다는 점에 주목할 가치가 있습니다. 첫 번째 매개 변수의 순서는 배열에서 전달되는 순서가 동일합니다.

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

이 방법에 대한 문서를 확인한 경우 아래의

데모를 사용하면 일부 미묘함에 놀랄 수 있습니다. 예를 들어, $watchGroup()는 적어도 어느 정도까지도 리스너를 호출하게합니다. 이것은 표현식 목록을 unshift로 전달할 때 가 실행 콜백 함수를 초래하는 표현식을 트리거하기 때문입니다. $watchGroup 코드 펜 예 또한 의 모든 하위 필드에 대한 변경 사항은 업데이트를 생성하지 않습니다. 업데이트는 새 값이 B 필드 자체에 할당 된 경우에만 생성됩니다.

이것은 배열이나 객체를 모니터링하기위한 또 다른 편리한 바로 가기입니다. 어레이의 경우 요소가 교체, 삭제 또는 추가 될 때 리스너가 호출됩니다. 객체의 경우 속성이 변경 될 때. 다시 말하지만 는 를 허용하지 않으므로 요소/필드 만 얕게 모니터링하고 하위 필드의 변화에 ​​반응하지 않습니다. 코드 펜 예

결론

$scope.obj.b 이 예제 가이 각도 특징의 힘을 발견하고 올바른 옵션을 사용하는 것이 얼마나 중요한지 이해하는 데 도움이되기를 바랍니다.

Codepen을 자유롭게 복사하고 다른 상황에서 이러한 방법을 사용하고 의견 섹션에서 피드백을 남기는 것을 잊지 마십시오!

이 기사에서 논의한 몇 가지 개념을 더 깊이 살펴보고 싶다면 다음을 읽을 수있는 몇 가지 제안이 있습니다. $scope.$watchCollection Angularjs Scope angular 's

및

를 이해하십시오 JavaScript 이벤트 처리 $watchCollection()의 신흥 패턴 angularjs scope의 프로토 타입 상속 objectEquality 의 문서

Angularjs에서 faqs (faq)

AngularJS의 주요 목적은 무엇입니까?

angularjs의 함수는 주로 변수 또는 표현식의 값의 변화를 관찰하는 데 사용됩니다. 변수 또는 표현식의 값의 변화를 모니터링하는 것은 AngularJS 범위의 물체의 일부입니다. 변경 사항이 감지되면

함수는 모니터링 된 변수가 변경 될 때마다 실행되는 콜백 함수를 트리거합니다.
angularjs에서 어떻게 작동합니까?
angularjs의 함수는 모니터링 된 변수 또는 표현식의 기존 값과 새로운 값을 비교하여 작동합니다. 비교를 위해 JavaScript의 평등 연산자 (===)를 사용합니다. 새 값이 기존 값과 다르면 함수가 콜백 함수를 트리거합니다.

angularjs에서

를 어떻게 사용합니까?
1. angularjs에서
를 사용하려면 스코프 객체에서
2. 메소드를 호출하고 두 개의 매개 변수를 전달해야합니다. 변수 또는 표현식의 이름을 모니터링하고 변수가 모니터링 될 때 발생합니다. 변경할 때 실행될 기능. 예는 다음과 같습니다.

   app.controller('watchDemoCtrl', ['$scope', function($scope){
       $scope.letters = ['A','B','C'];
   }]);

   Angularjs에서

   와 $watch의 차이점은 무엇입니까? $apply Angularjs에서 의 함수는 변수 또는 표현의 변화를 관찰하는 데 사용되는 반면,

   함수는 angularjs 다이제스트 기간을 수동으로 시작하는 데 사용되며, 이는 모니터링 된 변수의 변경 사항을 확인하고보기를 업데이트합니다. 따라서. 함수는 일반적으로 DOM 이벤트 핸들러 또는

   함수와 같은 AngularJS 컨텍스트 외부에서 모델을 변경할 때 일반적으로 사용됩니다. $watch 를 사용하여 Angularjs에서 여러 변수를 모니터링 할 수 있습니까? $apply 예, $apply를 사용하여 AngularJS에서 여러 변수를 모니터링 할 수 있습니다. 변수 이름을 setTimeout 함수로 전달하여이를 수행 할 수 있습니다. 그러나 여러 변수를 모니터링하면 각 다이제스트주기에서 모든 모니터링 된 변수의 변경 사항을 확인해야하기 때문에 여러 변수를 모니터링하면 성능에 영향을 줄 수 있습니다.

   angularjs에서 변수 모니터링 변수 모니터링을 어떻게 중지합니까?

   angularjs에서 $watch 함수를 호출하면 로그 아웃 함수를 반환합니다. 이 기능을 호출하여 변수 모니터링을 중지 할 수 있습니다. 예는 다음과 같습니다.

   angularjs의 $watch 란 무엇입니까? $watch $watch angularjs의 함수는 표현 세트를 모니터링하는 데 사용됩니다. 함수와 같이 작동하지만 다중 모니터링 된 표현식이 변경 되더라도 다이어트주기 당 한 번만 콜백 함수를 트리거합니다. 이것은 여러 표현식을 모니터링 할 때 성능을 향상시킬 수 있습니다.

   angularjs의 $watch 란 무엇입니까?

   angularjs의 함수는 배열의 객체 또는 요소의 속성을 모니터링하는 데 사용됩니다. 속성이나 요소가 변경되는 한 콜백 기능을 트리거하지만 $watch와 달리 객체 나 배열을 깊이 모니터링하지 않아 성능을 향상시킬 수 있습니다.

   angularjs 지시문에서

   $scope.$watch('letters', function (newValue, oldValue, scope) {
       // 对 $scope.letters 执行任何操作
   });

   를 사용할 수 있습니까?

   예, angularjs 지시문에서 $watchGroup를 사용할 수 있습니다. 실제로 지시문에서

   를 사용하여 지시문의 속성 또는 범위 변수에 응답하는 것이 일반적입니다.

   AngularJS의 성능 고려 사항은 를 사용하는 것은 무엇입니까? $watchGroup Angularjs에서 를 사용하면 특히 많은 변수 나 표현을 모니터링 할 때 성능에 영향을 줄 수 있습니다. 이는 함수가 각 다이제스트주기에서 모든 모니터링 변수의 변경 사항을 확인해야하기 때문입니다. 성능을 향상 시키려면 상황에 따라 또는 $watch 사용을 고려하거나 모니터링 된 변수 수를 제한하십시오.

위 내용은 Angularjs에서 $ 시계를 마스터 링합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!