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

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

亚连

풀어 주다： 2018-06-08 17:57:10

원래의

2559명이 탐색했습니다.

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!