AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)
이 글은 주로 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('MainCtrl', function($scope) {
$scope.foo = "Foo";
$scope.world = "World";
});해당 html 파일인 index.html 코드는 다음과 같습니다:
Hello, {{ World }}여기서 $scope에 추가하더라도 두 가지가 있습니다. , 그러나 UI에는 하나만 바인딩되어 있으므로 $watch는 하나만 생성됩니다. 다음 예를 살펴보세요.
controllers.js
app.controller('MainCtrl', 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('MainCtrl', 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('demoApp',[]);
demoApp.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = -1;
$scope.$watch('name', 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 的原因吧。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
위 내용은 AngularJS 양방향 데이터 바인딩 원칙(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
Vue 컴포넌트 통신: 데이터 모니터링을 위해 $watch 사용
Jul 07, 2023 am 11:09 AM
Vue 컴포넌트 통신: 데이터 모니터링을 위해 $watch 사용 Vue 개발에서 컴포넌트 통신은 일반적인 요구 사항입니다. Vue는 구성 요소 간의 통신을 구현하는 다양한 방법을 제공합니다. 일반적인 방법 중 하나는 데이터 모니터링에 $watch를 사용하는 것입니다. 이 기사에서는 $watch의 사용법을 소개하고 해당 코드 예제를 제공합니다. Vue의 인스턴스 객체는 데이터 변경 사항을 모니터링하기 위한 $watch 메서드를 제공합니다. $watch는 모니터링할 데이터의 속성 이름과 콜백 함수라는 두 가지 매개 변수를 허용합니다. 데이터를 들을 때
PHP와 AngularJS를 사용하여 웹 애플리케이션 구축
May 27, 2023 pm 08:10 PM
인터넷의 지속적인 발전으로 인해 웹 애플리케이션은 기업 정보 구축의 중요한 부분이자 현대화 작업에 필요한 수단이 되었습니다. 웹 애플리케이션을 쉽게 개발, 유지 관리 및 확장하려면 개발자는 개발 요구 사항에 맞는 기술 프레임워크와 프로그래밍 언어를 선택해야 합니다. PHP와 AngularJS는 각각 서버측 및 클라이언트측 솔루션으로 널리 사용되는 두 가지 웹 개발 기술입니다. 이들을 결합하여 사용하면 웹 애플리케이션의 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. PHPPHP의 장점
Flask와 AngularJS를 사용하여 단일 페이지 웹 애플리케이션 구축
Jun 17, 2023 am 08:49 AM
웹 기술의 급속한 발전으로 단일 페이지 웹 애플리케이션(SinglePage Application, SPA)이 점점 더 인기 있는 웹 애플리케이션 모델이 되었습니다. 기존의 다중 페이지 웹 애플리케이션과 비교하여 SPA의 가장 큰 장점은 사용자 경험이 더 부드럽고 서버의 컴퓨팅 부담도 크게 줄어든다는 것입니다. 이번 글에서는 Flask와 AngularJS를 사용하여 간단한 SPA를 구축하는 방법을 소개하겠습니다. Flask는 경량 Py입니다.
프론트엔드 개발에 PHP와 AngularJS를 사용하는 방법
May 11, 2023 pm 05:18 PM
인터넷의 대중화와 발전으로 프론트엔드 개발이 점점 더 중요해지고 있습니다. 프론트엔드 개발자로서 우리는 다양한 개발 도구와 기술을 이해하고 숙달해야 합니다. 그중 PHP와 AngularJS는 매우 유용하고 인기 있는 두 가지 도구입니다. 이 글에서는 프론트엔드 개발을 위해 이 두 도구를 사용하는 방법을 설명하겠습니다. 1. PHP 소개 PHP는 널리 사용되는 오픈 소스 서버 측 스크립팅 언어로 웹 개발에 적합하며 웹 서버 및 다양한 운영 체제에서 실행될 수 있습니다. PHP의 장점은 단순성, 속도, 편리성입니다.
PHP 및 AngularJS를 사용하여 파일 관리를 용이하게 하는 온라인 파일 관리 플랫폼 개발
Jun 27, 2023 pm 01:34 PM
인터넷의 대중화로 인해 점점 더 많은 사람들이 네트워크를 사용하여 파일을 전송하고 공유하고 있습니다. 그러나 여러 가지 이유로 파일 관리에 FTP와 같은 전통적인 방법을 사용하는 것은 현대 사용자의 요구를 충족할 수 없습니다. 따라서 사용하기 쉽고 효율적이며 안전한 온라인 파일 관리 플랫폼을 구축하는 것이 추세가 되었습니다. 본 기사에서 소개하는 온라인 파일 관리 플랫폼은 PHP와 AngularJS를 기반으로 파일 업로드, 다운로드, 편집, 삭제 및 기타 작업을 쉽게 수행할 수 있으며 파일 공유, 검색,
AngularJS의 기본 소개
Apr 21, 2018 am 10:37 AM
이 글의 내용은 AngularJS의 기본 소개에 관한 것입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
