source

Angular's $watch를 컨트롤러에 사용하는 것은 반향기입니까?

ittop 2023. 3. 18. 09:21
반응형

Angular's $watch를 컨트롤러에 사용하는 것은 반향기입니까?

'적절한' 각도 있는 방법으로 일을 처리하려는 저의 끝없는 탐구에서 저는 컨트롤러가 각도 서비스를 통해 모델의 변화를 관찰하는 방법에 대해 많이 읽었습니다.

일부 사이트에서는 컨트롤러에서 $watch를 사용하는 것이 전적으로 잘못되었다고 말합니다.

컨트롤러에서 $watch를 사용하지 마십시오.테스트는 어렵고 거의 모든 경우에 전혀 필요하지 않습니다.대신 스코프의 메서드를 사용하여 워치가 변경되고 있는 값을 업데이트하십시오.

다른 사람들은 당신이 뒷정리를 하는 한 괜찮아 보입니다.

$watch 함수 자체는 호출 시 $watch를 바인딩 해제하는 함수를 반환합니다.따라서 $watch가 필요 없게 되면 $watch가 반환하는 함수를 호출하기만 하면 됩니다.

컨트롤러에서 $watch를 사용하는 것이 각진 서비스를 유지하는 모델의 변화를 알아차리는 좋은 방법이라는 SO 질문이나 다른 평판 있는 사이트도 있습니다.

조금 더 비중을 둘 수 있을 것 같은 https://github.com/angular/angular.js/wiki/Best-Practices 사이트에는 $120이라고 적혀 있습니다.$watch는 이벤트의 필요성을 대체해야 합니다.단, 100개 이상의 모델과 REST 엔드포인트를 처리하는 복잡한 SPA의 경우 $watch를 사용하면$broadcast/$emit시계를 많이 갖게 될 수도 있어요.한편, $watch를 사용하지 않으면 사소한 앱에 대해서는 이벤트 스파게티가 대량으로 발생합니다.

이것은 손해/불리 상황입니까?이벤트와 시계 사이의 잘못된 선택인가요?많은 상황에서 쌍방향 바인딩을 사용할 수 있다는 것을 알지만, 때로는 변화를 경청하는 방법만 필요합니다.

편집

Ilan Frumer의 코멘트에 의해, 컨트롤러에 $워치를 사용하는 것이 주관적으로 좋은지 나쁜지를 묻는 것이 아니라, 다음과 같이 질문합니다.

성능 병목현상이 가장 먼저 발생할 가능성이 높은 구현은 무엇입니까?함), ('브로드캐스트/발송$watch- 컨트롤러에 있습니다.★★★★★★★★★★★★★★★★★★★★★★★★★★

먼저 유지보수의 골칫거리가 ?$watch- ? - 이벤트 - 이벤트?는 무엇을 하고, 이벤트 감시자는 무엇을 들을지 합니다.$watch 값: " " )에 대해 합니다.MyDataService.getAccountNumber()는, 양쪽 모두, 자신의 $이외의 알 가 있습니다.

** 1년 후 편집 **

이 질문을 한 후 Angular는 많이 바뀌거나 개선되었지만, 여전히 +1을 받고 있기 때문에 Angular 팀의 코드를 보면 컨트롤러(또는 스코프가 파괴되는 방향)에 있는 워쳐에 관한 패턴을 볼 수 있다고 생각합니다.

$scope.$on('$destroy', $scope.$watch('scopeVariable', functionIWantToCall)); $watch 함수가 반환하는 것(워처 등록 해제를 위해 호출할 수 있는 함수)을 컨트롤러가 파괴되었을 때 이벤트핸들러에 전달합니다.그러면 워처가 자동으로 정리됩니다.

컨트롤러의 시계가 코드 냄새인지 아닌지를 불문하고, 그것을 사용한다면 앵글 팀이 이 패턴을 사용하는 것이 사용법에 대한 강력한 추천이 될 것이라고 생각합니다.

감사합니다!

저는 둘 다 사용하고 있습니다.솔직히 문제마다 다른 도구라고 생각하기 때문입니다.

제가 만든 어플리케이션의 예를 들어보겠습니다.웹 소켓 서버에서 동적 데이터 모델을 수신하는 복잡한 웹 소켓 서비스를 사용하고 있었습니다.서비스 자체는 모델이 어떻게 보이는지 신경 쓰지 않지만, 물론 컨트롤러는 신경 쓰지 않습니다.

하면, 「」가 됩니다.$watch를 알 수 객체에 , 언제 도착했는지를 등).Service.data.foo존재하게 됩니다.이 모델이 등장하자마자 이 모델에 바인드하여 쌍방향 데이터 바인드를 할 수 있게 되었습니다.이치노

한편, 클라이언트는 서버로부터 리터럴명령어를 수신하는 경우가 있기 때문에, 서비스는 특정 이벤트의 브로드캐스트도 담당했습니다.'$rootScope', '$rootScope', '$rootScope', '$rootScope', '$rootScope', '$rootScope', '$rootScope', '$rootScope', '$rootScope', 'cope', '$rootScope', an..on() was was was was was was was was was 。$rootScope★★★★★★★★★★★★★★★★★★module.run()서버로부터 이러한 명령어를 듣고, 다른 서비스로부터 필요한 정보를 수집하고, WebSocket 서비스를 호출하여, 요구에 따라 데이터를 송신합니다. 이것을 또, 작, 작을 ,$watch() 임의의 것입니다. 예를 들어, '어떠한 변수'라고 하는 metadataRequests요청을 받을 때마다 증가해야 합니다. a.broadcast변수처럼 영구 기억 속에 살지 않고도 같은 일을 할 수 있습니다.

'아주머니'를,$watch()(특히 전후 값을 알아야 할 경우) 특정 값이 변경되어 컨트롤러가 알아야 할 보다 높은 수준의 조건이 충족된 경우 이벤트를 사용합니다.

퍼포먼스에 대해서는 어떤 것이 먼저 병목현상이 될지는 말할 수 없지만, 이렇게 하면 각각의 특징이 가장 강한 장점을 살릴 수 있을 것 같습니다.를 들어, 「」를 사용하고 있는 는,$on()$watch()데이터의 변경을 검색하기 위해 변경 전후의 값에 액세스할 수 없으므로 수행하려는 작업이 제한될 수 있습니다.

바인딩은 "Data Binding"입니다.$watch ng-model를 사용할 수 있는 컨트롤러를 가지고 있습니다.input , , , , 입니다.formng-model값을 지정하여 변경에 대한 보기를 렌더링합니다.DOM dom dom dom dom dom dom dom dom dom dom

질적으,,, in,ng-model의 »$watch는 모델 내의 값과 내부적으로 가지고 있는 값을 비교합니다.사내에서 가지는 가치는, 지시(입력, 양식 등)를 서포트하는 것에 의해서 설정됩니다.

IMHO 각도 어플리케이션에서 반응해야 할 유일한 "이벤트"는 사용자 생성(DOM 이벤트)입니다. 및 DOM의 됩니다.ng-model. 또한 하며, 는 ..를 합니다.모델로의 링크. 또한 자연스럽게 비동기적 요소가 존재하며, 각도는$q120달러

퍼포먼스에 관해서는 각진 독서에 잘 나와 있습니다. ★★★★★★★★★★★★★★★★★★★★★★★★★★.$digest그러니까 빨리 해. ★★★$digest 스코프를 앵귤러하다, 비교가 이루어집니다. $루프에서는 않습니다.최적화되어 있기 때문에 그렇게 간단하지 않지만 모든 "각선 코드"가 $digest 루프에서 실행됩니다.이 ''을 수 .scope.$apply(...)그것은 그들이 변화한 어떤 가치의 시계들을 알아차리고 그들의 일을 하게 할 것이다.

그럼 원래 질문이요?안티 패턴인가요?사용법을 안다면 절대 안 돼그냥 ng-model로 할게요.단지 1.2.10회 이상의 뛰어난 인재들이 그 작업을 반복하고 있다고 해서...앱의 다른 모든 '반응성'은 $q, $timeout 등으로 처리할 수 있습니다.

나는 그들 모두가 적절한 장소를 가지고 있다고 생각하고, 나로서는 다른 사람들을 위해 하나를 사용하는 것을 멈추는 것을 말하기는 어려울 것이다.

데이터 바인딩은 항상 데이터 모델이 보기에서 변경된 내용과 동기화되도록 하기 위해 사용해야 합니다.우리 모두 그것에 동의할 수 있을 것 같아.

컨트롤러의 워치를 사용하여 데이터 변경에 따른 액션을 트리거하는 것이 도움이 된다고 생각합니다.복잡한 데이터 모델을 보고 청구서의 총계를 계산하는 것과 같습니다.아니면 모델을 보고 지저분하다고 느끼거나.

브로드캐스트/이밋/온을 사용하여 메시지를 보내거나 여러 레이어 떨어져 있는 스코프에서 다른 스코프로의 변경을 지시한 적이 있습니다.브로드캐스트이벤트가 컨트롤러에서 액션을 수행하기 위한 후크로 사용되는 커스텀 디렉티브를 작성했습니다.

언급URL : https://stackoverflow.com/questions/21442183/is-it-an-antipattern-to-use-angulars-watch-in-a-controller

반응형