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으로 문의하세요.

관련 기사

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP

Vue组件通信：使用$watch进行数据监听Jul 07, 2023 am 11:09 AM

Vue组件通信：使用$watch进行数据监听在Vue开发中，组件通信是常见的需求。Vue提供了多种方式来实现组件之间的通信，其中一种常用的方式是使用$watch进行数据监听。本文将介绍$watch的用法，并给出相应的代码示例。Vue的实例对象提供了$watch方法，用于监听数据的变化。$watch接受两个参数：要监听的数据的属性名，以及回调函数。当监听的数据

使用PHP和AngularJS开发一个在线文件管理平台，方便文件管理Jun 27, 2023 pm 01:34 PM

随着互联网的普及，越来越多的人在使用网络进行文件传输和共享。然而，由于各种原因，使用传统的FTP等方式进行文件管理无法满足现代用户的需求。因此，建立一个易用、高效、安全的在线文件管理平台已成为了一种趋势。本文介绍的在线文件管理平台，基于PHP和AngularJS，能够方便地进行文件上传、下载、编辑、删除等操作，并且提供了一系列强大的功能，例如文件共享、搜索、

如何使用PHP和AngularJS进行前端开发May 11, 2023 pm 05:18 PM

随着互联网的普及和发展，前端开发已变得越来越重要。作为前端开发人员，我们需要了解并掌握各种开发工具和技术。其中，PHP和AngularJS是两种非常有用和流行的工具。在本文中，我们将介绍如何使用这两种工具进行前端开发。一、PHP介绍PHP是一种流行的开源服务器端脚本语言，它适用于Web开发，可以在Web服务器和各种操作系统上运行。PHP的优点是简单、快速、便

如何在PHP编程中使用AngularJS？Jun 12, 2023 am 09:40 AM

随着Web应用程序的普及，前端框架AngularJS变得越来越受欢迎。AngularJS是一个由Google开发的JavaScript框架，它可以帮助你构建具有动态Web应用程序功能的Web应用程序。另一方面，对于后端编程，PHP是非常受欢迎的编程语言。如果您正在使用PHP进行服务器端编程，那么结合AngularJS使用PHP将可以为您的网站带来更多的动态效

使用Flask和AngularJS构建单页Web应用程序Jun 17, 2023 am 08:49 AM

随着Web技术的飞速发展，单页Web应用程序（SinglePageApplication,SPA）已经成为一种越来越流行的Web应用程序模型。相比于传统的多页Web应用程序，SPA的最大优势在于用户感受更加流畅，同时服务器端的计算压力也大幅减少。在本文中，我们将介绍如何使用Flask和AngularJS构建一个简单的SPA。Flask是一款轻量级的Py

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.