AngularJS에서 데이터 바인딩의 작동 원리

 

질문 : AngularJS에서 데이터 바인딩은 어떻게 작동합니까?

---

AngularJS 프레임 워크에서 데이터 바인딩은 어떻게 작동합니까?

나는 그들의 사이트 에서 기술적 세부 사항을 찾지 못했습니다. 데이터가 뷰에서 모델로 전파 될 때 작동 방식이 다소 명확합니다. 하지만 AngularJS는 setter와 getter없이 모델 속성의 변경 사항을 어떻게 추적합니까?

이 작업을 수행 할 수있는 JavaScript 감시자가 있다는 것을 알았습니다. 그러나 Internet Explorer 6 및 Internet Explorer 7 에서는 지원되지 않습니다. 그렇다면 AngularJS는 예를 들어 다음을 변경 하고이 변경 사항을 뷰에 반영했음을 어떻게 알 수 있습니까?

myobject.myproperty="new value";

답변

---

AngularJS는 값을 기억하고 이전 값과 비교합니다. 이것은 기본적인 더티 검사입니다. 값이 변경되면 변경 이벤트가 발생합니다.

AngularJS가 아닌 세계에서 AngularJS 세계로 전환 할 때 호출하는 $apply() $digest() 호출합니다. 다이제스트는 단순한 오래된 더티 검사입니다. 모든 브라우저에서 작동하며 완전히 예측 가능합니다.

더티 검사 (AngularJS)와 변경 리스너 ( KnockoutJS 및 Backbone.js )를 대조하기 위해 : 더티 검사는 간단하고 비효율적으로 보일 수 있지만 (나중에 설명하겠습니다) 항상 의미 상 올바른 것으로 밝혀졌습니다. 변경 리스너는 이상한 코너 케이스가 많고 의미 론적으로 더 정확하도록 종속성 추적과 같은 것이 필요합니다. KnockoutJS 종속성 추적은 AngularJS에없는 문제에 대한 영리한 기능입니다.

• 브라우저가 기본적으로 지원하지 않기 때문에 구문은 끔찍합니다. 예, 프록시가 있지만 모든 경우에 의미 상 정확하지 않으며 물론 이전 브라우저에는 프록시가 없습니다. 결론은 더티 검사를 통해 POJO 를 수행 할 수있는 반면 KnockoutJS 및 Backbone.js는 클래스에서 상속하고 접근자를 통해 데이터에 액세스하도록 강제합니다.
• 유착을 변경하십시오. 항목 배열이 있다고 가정합니다. 추가를 반복하면서 항목을 배열에 추가하고 싶다고 가정 해 보겠습니다. 추가 할 때마다 UI를 렌더링하는 변경 이벤트가 발생합니다. 이것은 성능에 매우 나쁩니다. 원하는 것은 UI를 마지막에 한 번만 업데이트하는 것입니다. 변경 이벤트가 너무 세분화되어 있습니다.
• 변경 리스너는 더 많은 변경 이벤트를 발생시키는 데이터를 추가로 변경할 수 있기 때문에 문제가되는 setter에서 즉시 실행됩니다. 스택에서 한 번에 여러 변경 이벤트가 발생할 수 있기 때문에 이것은 좋지 않습니다. 어떤 이유로 든 동기화를 유지해야하는 두 개의 어레이가 있다고 가정합니다. 둘 중 하나만 추가 할 수 있지만 추가 할 때마다 변경 이벤트가 발생하여 이제는 일관되지 않은 세계관이 있습니다. 이는 각 콜백이 독점적으로 실행되고 완료되기 때문에 JavaScript가 피하는 스레드 잠금과 매우 유사한 문제입니다. setter는 의도하지 않고 명확하지 않은 광범위한 결과를 가져올 수 있으므로 변경 이벤트가 이것을 깨뜨려 다시 스레드 문제를 발생시킵니다. 원하는 것은 리스너 실행을 지연시키고 한 번에 하나의 리스너 만 실행되도록 보장하는 것입니다. 따라서 모든 코드는 데이터를 자유롭게 변경할 수 있으며 그렇게하는 동안 다른 코드가 실행되지 않는다는 것을 알고 있습니다. .

따라서 더티 검사가 비효율적이므로 느리게 보일 수 있습니다. 이것은 우리가 단지 이론적 인 주장을하기보다는 실수를 볼 필요가있는 곳입니다. 그러나 먼저 몇 가지 제약을 정의합시다.

인간은 :

• 느림 — 50ms보다 빠른 것은 사람이 인식 할 수 없으므로 "즉시"로 간주 될 수 있습니다.
• 제한적 — 한 페이지에 약 2000 개 이상의 정보를 사람에게 보여줄 수 없습니다. 그 이상은 정말 나쁜 UI이며 인간은 어쨌든 이것을 처리 할 수 없습니다.

 

그래서 진짜 질문은 이것입니다 : 브라우저에서 50ms 안에 얼마나 많은 비교를 할 수 있습니까? 이것은 많은 요소가 작용함에 따라 대답하기 어려운 질문이지만 여기에 10,000 명의 감시자를 생성 하는 테스트 사례가 있습니다. http://jsperf.com/angularjs-digest/6 최신 브라우저에서는 6ms 미만이 소요됩니다. Internet Explorer 8 에서는 약 40ms가 걸립니다. 보시다시피 요즘은 느린 브라우저에서도 문제가되지 않습니다. 주의 사항이 있습니다. 비교는 시간 제한에 맞추기 위해 간단해야합니다 ... 불행히도 AngularJS에 느린 비교를 추가하는 것은 너무 쉽기 때문에 사용자가 무엇을 모르는 경우 느린 응용 프로그램을 쉽게 빌드 할 수 있습니다. 하고있다. 그러나 우리는 느린 비교 인 것을 보여줄 계측 모듈을 제공함으로써 답을 얻길 바랍니다.

비디오 게임과 GPU는 특히 일관성이 있기 때문에 더티 검사 방식을 사용하는 것으로 나타났습니다. 모니터 재생률 (일반적으로 50-60Hz 또는 매 16.6-20ms)을 초과하는 한, 그 이상의 성능은 낭비이므로 FPS를 높이는 것보다 더 많은 것을 그리는 것이 좋습니다.

출처 : https://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs