AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)

亚连

Jun 08, 2018 pm 05:57 PM

$watchangularjs

이 글은 주로 AngularJS 양방향 데이터 바인딩 원리의 $watch, $apply 및 $digest를 소개합니다. 관심 있는 친구들은

소개

를 참조할 수 있습니다. AngularJS의 새로운 기능입니다. AngularJS의 양방향 데이터 바인딩에 대해 이미 깊이 이해하고 있다면 소스 코드를 읽어보세요.

Background

AngularJS 개발자는 모두 양방향 데이터 바인딩이 어떻게 구현되는지 알고 싶어합니다. 데이터 바인딩과 관련된 용어는 $watch, $apply, $digest, dirty-checking 등이 있습니다. 어떻게 작동하나요? 처음부터 시작해 보겠습니다

AngularJS의 양방향 데이터 바인딩은 브라우저에 의해 강제됩니다

브라우저가 보기에는 아름답지만 실제로는 데이터 상호 작용 영역에서는 브라우저의 "비활성"으로 인해 결과적으로 브라우저 데이터 새로 고침이 문제가 됩니다. 특히, 브라우저는 사용자가 버튼을 클릭하거나 입력 상자에 무언가를 입력하는 등의 이벤트를 쉽게 수신할 수 있습니다. 이를 위해 브라우저는 이벤트 콜백 함수가 실행될 수 있도록 API도 제공합니다. 하지만 그 반대는 그리 간단하지 않습니다. 백그라운드의 데이터가 변경되면 브라우저에 알리고 새로 고쳐야 합니다. 브라우저는 이러한 데이터 상호 작용 메커니즘을 제공하지 않습니다. 내가 해야 하나? $scope를 통해 양방향 데이터 바인딩을 잘 구현한 AngularJS가 등장합니다. 그 뒤에 있는 원리는 $watch, $apply, $digest, dirty-checking

$watch queue($watch list)

Literally, watch입니다. 관찰한다는 뜻이다. 브라우저에 무언가를 바인딩할 때마다 $watch가 $watch 대기열에 삽입됩니다. $watch가 모니터링하는 모델의 변화를 감지할 수 있는 것이라고 상상해 보세요. 예를 들어 다음 코드가 있습니다.

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

첫 번째 입력 상자에 바인딩된 $scope.user가 있고 두 번째 입력 상자에 바인딩된 $scope.pass가 있습니다. $watch 목록에:

다음 코드로 Controllers.js 파일을 생성합니다:

app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.foo = "Foo";
 $scope.world = "World";
});

해당 html 파일인 index.html 코드는 다음과 같습니다:

Hello, {{ World }}

여기서 $scope에 추가하더라도 두 가지가 있습니다. , 그러나 UI에는 하나만 바인딩되어 있으므로 $watch는 하나만 생성됩니다. 다음 예를 살펴보세요.

controllers.js

app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.people = [...];
});

해당 html 파일 index.html

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

은 다음과 같고 여러 개의 $watch가 있습니다. 생성되었습니다. 사람마다 2명(이름 1명, 나이 1명)이 있고, ng-repeat는 루프이므로 총 10명(2*10)+1이므로 $watch가 21개 있다는 의미입니다. 따라서 브라우저에 바인딩된 모든 데이터는 $watch를 생성합니다. 네, $watch는 언제 생성되었나요? 먼저 AngularJS의 로딩 원리를 살펴보겠습니다.

AngularJS의 로딩 원리:

AngularJS 템플릿 로딩은 컴파일과 연결의 두 단계로 나누어집니다. 연결 단계에서 AngularJS 인터프리터는 각 지시문을 찾습니다. $watch가 필요합니다. 그런데 이 단계에서 $watch가 생성됩니다.

다음으로 $digest

$digest loop

다이제스트란 말 그대로 "소화"라는 뜻인데, 이 이름이 이상하게 더티 체킹(dirty-checking)과 관련이 있다는 걸 늘 느끼곤 합니다. 검사"이므로 번역하지 않는 것이 좋습니다. 원작자의 원래 의도는 절대 이것이 아닙니다. 이해할 수만 있을 뿐 말로 표현할 수는 없습니다!

$digest는 루프입니다. 루프에서 무엇을 하고 있나요? $digest는 $watch를 반복하고 있습니다. $digest는 $watch에 하나씩 묻습니다. "야, 관찰한 데이터가 변경되었나요?"

이 순회는 소위 더티 체킹(dirty-checking)입니다. 이제 모든 $watch가 확인되었으므로 질문해야 합니다. $watch가 업데이트되었습니까? 적어도 하나가 업데이트된 경우 모든 $watches가 변경되지 않을 때까지 루프가 다시 트리거됩니다. 이렇게 하면 각 모델이 다시 변경되지 않습니다. 루프가 10회를 초과하면 무한 루프를 피하기 위해 예외가 발생한다는 점을 기억하세요. $digest 루프가 끝나면 그에 따라 DOM이 변경됩니다.

코드를 보세요. 예를 들면: Controllers.js

app.controller(&#39;MainCtrl&#39;, function() {
 $scope.name = "Foo";
 $scope.changeFoo = function() {
   $scope.name = "Bar";
 }
});

해당 HTML 파일인 index.html

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

여기에는 $watch가 하나만 있습니다. ng-click은 $watch를 생성하지 않기 때문입니다(함수는 변경되지 않습니다). ).

$digest의 실행 프로세스는 다음과 같습니다.

브라우저에서 버튼을 누릅니다.
브라우저는 이벤트를 수신하고 각도 컨텍스트로 들어갑니다.
$digest 루프가 실행되기 시작하여 각 $watch가 변경되는지 쿼리합니다.
$scope.name을 모니터링하는 $watch가 변경 사항을 보고하므로 또 다른 $digest 주기가 강제 실행됩니다.
새로운 $digest 루프는 변경 사항을 감지하지 못합니다. 이때 브라우저는 제어권을 되찾고 $scope.name의 새 값에 해당하는 DOM을 업데이트합니다.

여기에서 우리는 AngularJS의 명백한 단점을 볼 수 있습니다. 각도 컨텍스트에 들어가는 모든 이벤트는 $digest 루프를 실행합니다. 문자만 입력하더라도 $digest는 전체 페이지의 모든 $watch를 순회합니다.

$신청신청

Angular context 是整个Angular的上下文，也可以把它理解为Angular容器，那么，是谁来决定哪些事件可以进入 Angular Context，哪些事件又不能进入呢？其控制器在 $apply手上。

如果当事件触发时，调用$apply，它会进入angular context，如果没有调用就不会进入。你可能会问：刚才的例子并没有调用$apply，这是怎么回事呢？原来，是Angular背后替你做了。当点击带有ng-click的元素时，事件就会被封装到一个$apply调用中。如果有一个ng-model="foo"的输入框，当输入一个字母 f 时，事件就会这样调用，$apply("foo = 'f';")。

$apply的应用场景

$apply是$scope的一个函数，调用它会强制一次$digest循环。如果当前正在执行$apply循环，则会抛出一个异常。

如果浏览器上数据没有及时刷新，可以通过调用$scope.$apply() 方法，强行刷新一遍。

通过 $watch 监控自己的$scope

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
 <title>test</title>
 <!-- Vendor libraries -->
  <script src="lib/jquery-v1.11.1.js"></script>
  <script src="lib/angular-v1.2.22.js"></script>
  <script src="lib/angular-route-v1.2.22.js"></script>
</head>
<body> 
 <p ng-controller="MainCtrl" >
  <input ng-model="name" />
  Name updated: {{updated}} times.
 </p> 
 <script >
  var demoApp = angular.module(&#39;demoApp&#39;,[]); 
  demoApp.controller(&#39;MainCtrl&#39;, function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch(&#39;name&#39;, function() {
  $scope.updated++;
 });
});
 </script>
 </body>
</html>

代码说明：

当controller 执行到 $watch时，它会立即调用一次，所以把updated的值设为 -1 。上输入框中输入字符发生变化时，你会看到 updated 的值随之变化，而且能显示变化的次数。

$watch 检测到的数据变化

小结

我们对 AngularJS的双向数据绑定有了一个初步的认识，对于AngularJS来说，表面上看操作DOM很简单，其实背后有 $watch、$digest 、 $apply 三者在默默地起着作用。这个遍历检查数据是否发生变化的过程，称之为：dirty-checking。当你了解了这个过程后，你会对它嗤之以鼻，感觉这种方法好low 哦。确实，如果一个DOM中有 2000- 3000个 watch，页面的渲染速度将会大打折扣。

这个渲染的性能问题怎么解决呢？随着ECMAScript6的到来，Angular 2 通过Object.observe 极大地改善$digest循环的速度。或许，这就是为什么 Angular 团队迫不及待地推出 Angular 2 的原因吧。

上面是我整理给大家的，希望今后会对大家有帮助。

在vue-cli中如何配置babel配置文件

使用node.js实现抖音自动抢红包功能

使用webpack打包处理bundle.js文件过大的问题

위 내용은 AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles