웹 프론트엔드 JS 튜토리얼 Angularjs의 $apply 및 최적화 사용 정보

Angularjs의 $apply 및 최적화 사용 정보

Jul 02, 2018 pm 01:59 PM
angular angularjs apply 최적화

이 글에서는 $apply에 대한 관련 정보와 Angularjs에서의 최적화된 사용법을 주로 소개하고 있으며, 필요한 친구들이 참고할 수 있도록 자세히 소개하고 있습니다

머리말

프론트엔드가 완전 초보인 저는 아직 Javascript에 대해 조금 알고 있습니다. Angle JS를 직접 시작하려면 많은 저항에 부딪힙니다. 하지만 우리가 열심히 노력한다면 반인간적인 디자인도 큰 문제가 되지 않을 것이라고 믿습니다.

오늘은 Angularjs의 작은 별 $apply에 대해 이야기해보겠습니다. 데이터가 업데이트되었지만 뷰 레이어가 응답하지 않으면 누군가가 적용을 사용하라고 말하는 것을 항상 들을 수 있습니다. 그런 다음 무지하게 할당 코드 끝에 $scope.$apply()를 추가합니다. .code> , 그리고 그 사실을 알고는 기분 좋게 놀랐습니다. 아, 정말 업데이트됐네요. <code>$scope.$apply() ,然后就惊喜的发现。噢,真的更新了。

然而,有些时候,编译器会无情的给你返回

Error: $digest already in progress

那么,导致这些现象的原因时什么的呢?$apply究竟干了啥?听我慢慢到来。

一.$apply的作用

$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。

上面是AngularJs权威教程中的一句话。什么意思呢?

首先,你要清楚,在原生js或者第三方框架下,修改model,是有可能不会触发视图更新的,比如setTimeout、jquery插件。为什么?因为他们脱离了Angularjs的上下文,Angularjs并不能监听到数据的改变。看例子。

1.setTimeout

html:

<p>{{name}}</p>
로그인 후 복사

js:

$scope.name="张三";
setTimeout(function(){
$scope.name = &#39;李四&#39;;
//$scope.$apply()
},500)
로그인 후 복사

首先,name等于张三,500ms后,我把他赋值为李四,但是,页面上并没有改变,依然是张三。

而,我们把$scope.$apply()放开,就正常了,张三成功变为李四。

2.第三方插件

html:

<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所选日期</header>
{{selectedDate}}
</p>
로그인 후 복사

js:

$scope.selectedDate = &#39;&#39;;
$( function() {
 $( "#datepicker" ).datepicker({
 onClose: function( selectedDate ) {
 $scope.selectedDate = selectedDate;
 // $scope.$apply();
 }
 });
} );
로그인 후 복사

这是jquery的datepicker插件,当我们选定日期后,下面的日期应该随之显现,而现在却没有。这种情况就必须依靠$apply(),才能更新视图。

以上两种情况,都因为不处于Angularjs上下文中,导致监听不到数据的变化。而$apply究竟干了什么,才导致数据更新正常了呢?

其实$apply相当于一个触发器,它的作用就是触发digest循环,从而更新视图。

在digest是Angularjs的核心,是它实现了神奇的数据绑定。凡是触发事件,必会触发digest循环,比如,我们数值的ng事件,click啊,change,实际上都是触发了digest循环。

所以,我们所做的事,其实就是手动触发了digest循环。关于digest循环,属于题外话,这里不做过多介绍,想深入了解的同学,可以看看书籍,或者百度。

二.更好地运用digest循环

在Angularjs中,除了$apply可以触发digest循环外,还有其他的方法,也可以触发此循环。而且$apply往往时最坏的选择。下面推荐一些更好的选择。

1.$digest

$scope.$digest()

그러나 때로는 컴파일러가 무자비하게 여러분에게 돌아올 것입니다.

Error: $digest 이미 진행 중

그렇다면 이러한 현상의 원인은 무엇일까요? $apply는 정확히 무엇을 하나요? 천천히 오는 내 말을 들어보세요.

1. $apply

$apply() 함수의 역할은 Angular 프레임워크 외부에서 Angular 컨텍스트 내부의 표현식을 실행할 수 있습니다.

위는 권위 있는 AngularJs 튜토리얼의 문장입니다. 그것은 무엇을 의미합니까?

우선, 기본 js 또는 setTimeout 및 jquery 플러그인과 같은 타사 프레임워크에서 모델을 수정하면 보기 업데이트가 트리거되지 않을 수 있다는 점을 알아야 합니다. 왜? Angularjs의 컨텍스트를 벗어나기 때문에 Angularjs는 데이터 변경 사항을 모니터링할 수 없습니다. 예시를 참조하세요.

1.setTimeout

html:

$digest already in progress
로그인 후 복사

js:

$timeout(function(){
$scope.name = &#39;李四&#39;;
},500)
로그인 후 복사

🎜 우선 이름은 Zhang San과 동일합니다. 500ms 후에 그를 Li Si에 할당했습니다. 페이지가 변경되지 않았습니다. 여전히 Zhang San입니다. 🎜🎜🎜그러나 $scope.$apply()를 릴리즈하면 Zhang San이 Li Si로 성공적으로 변경됩니다. 🎜🎜🎜2. 타사 플러그인🎜🎜🎜html:🎜🎜🎜
$scope.$evalAsync(
   function( $scope ) {
   console.log( "$evalAsync" );
   }
  );
로그인 후 복사
🎜🎜🎜js:🎜🎜🎜rrreee🎜🎜🎜이것은 jquery의 날짜 선택기 플러그인입니다. , 하지만 지금은 아닙니다. 이 경우 뷰를 업데이트하려면 $apply()를 사용해야 합니다. 🎜🎜위의 두 경우 모두 Angularjs 컨텍스트가 아니기 때문에 데이터 변경 사항을 모니터링할 수 없습니다. 그리고 데이터가 정상적으로 업데이트되도록 하기 위해 $apply가 정확히 무엇을 했나요? 🎜🎜🎜사실 $apply는 트리거와 동일합니다. 해당 기능은 다이제스트 루프를 트리거하여 뷰를 업데이트하는 것입니다. 🎜🎜🎜 다이제스트는 Angularjs의 핵심이며 마법 같은 데이터 바인딩을 구현합니다. 트리거되는 모든 이벤트는 확실히 다이제스트 주기를 트리거합니다. 예를 들어 숫자 ng 이벤트, 클릭 및 변경은 실제로 다이제스트 주기를 트리거합니다. 🎜🎜그래서 우리가 한 일은 실제로 다이제스트 주기를 수동으로 트리거하는 것이었습니다. 다이제스트 사이클에 대해서는 여기서 자세히 소개하지 않겠습니다. 더 알고 싶은 학생들은 책이나 바이두를 읽어보세요. 🎜🎜🎜🎜2. 다이제스트 루프의 더 나은 사용🎜🎜🎜🎜Angularjs에는 다이제스트 루프를 트리거할 수 있는 $apply 외에도 이 루프를 트리거할 수 있는 다른 메서드가 있습니다. 그리고 $apply는 종종 최악의 선택입니다. 아래에는 더 나은 옵션이 권장됩니다. 🎜🎜🎜1.$digest🎜🎜🎜$scope.$digest()는 상위 범위에 대해 현재 범위와 하위 범위의 값만 업데이트하므로 $apply보다 빠릅니다. 시간에 관계없이. 그리고 $apply는 상위 범위도 평가해야 하므로 성능이 크게 소모됩니다. 🎜🎜🎜2.$timeout🎜🎜🎜setTimeout을 대체하려면 $timeout을 사용하세요. $timeout은 Angularjs에 내장된 서비스로, 물론 Angularjs 환경에 더 적합합니다. 암시적으로 다이제스트 루프를 트리거하고, 이전 다이제스트 루프가 완료된 후 다음 순간에 다이제스트 루프를 트리거하므로 위에서 언급한 🎜🎜🎜rrreee🎜🎜🎜이 발생하지 않습니다. setTime 코드를 $timeout🎜🎜🎜rrreee🎜🎜🎜에 넣으면 정상적으로 작동합니다. 귀찮은 적용이 없습니다! 🎜🎜🎜3.$evalAsync🎜🎜🎜이 방법이 가장 권장됩니다. 현재 실행 중인 다이제스트 사이클이 있는 경우 다이제스트 사이클을 발생시킨 작업을 실행을 위해 현재 다이제스트 사이클에 넣습니다. $timeout은 다이제스트 사이클을 다시 실행하기 전에 현재 다이제스트 사이클이 완료될 때까지 기다리는 것입니다. 따라서 evalAsync는 더 빠르게 실행되고 더 나은 성능을 제공합니다. $timeout이라고 부를 수 있습니다. 즉, 🎜🎜🎜rrreee🎜🎜🎜오늘 제가 하고 싶은 말은 이것이 전부입니다. Angularjs에는 여전히 많은 비밀과 더 나은 사용 방법이 숨겨져 있으므로 이를 깊이 연구하고 더 나은 기사를 공유할 수 있기를 바랍니다. 🎜🎜🎜다음은 실행 가능한 코드입니다. 탐색할 수 있습니다. https://codepen.io/hanwolfxue/pen/yEZbYQ🎜🎜위는 이 기사의 전체 내용입니다. 연구에 도움이 되기를 바랍니다. 관련 내용 더보기 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 추천: 🎜

Angular4의 내장 명령의 기본 사용법 정보

AngularJs에서 브라우저 캐시를 지우는 방법

위 내용은 Angularjs의 $apply 및 최적화 사용 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Ubuntu 24.04에 Angular를 설치하는 방법 Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Angular.js는 동적 애플리케이션을 만들기 위해 자유롭게 액세스할 수 있는 JavaScript 플랫폼입니다. HTML 구문을 템플릿 언어로 확장하여 애플리케이션의 다양한 측면을 빠르고 명확하게 표현할 수 있습니다. Angular.js는 코드를 작성, 업데이트 및 테스트하는 데 도움이 되는 다양한 도구를 제공합니다. 또한 라우팅 및 양식 관리와 같은 많은 기능을 제공합니다. 이 가이드에서는 Ubuntu24에 Angular를 설치하는 방법에 대해 설명합니다. 먼저 Node.js를 설치해야 합니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 ChromeV8 엔진 기반의 JavaScript 실행 환경입니다. Ub에 있으려면

새 Win11 컴퓨터를 받은 후 설정을 최적화하고 성능을 향상시키는 방법은 무엇입니까? 새 Win11 컴퓨터를 받은 후 설정을 최적화하고 성능을 향상시키는 방법은 무엇입니까? Mar 03, 2024 pm 09:01 PM

새 컴퓨터를 받은 후 성능을 어떻게 설정하고 최적화합니까? 사용자는 개인 정보 보호 및 보안을 직접 열고 일반(광고 ID, 로컬 콘텐츠, 응용 프로그램 실행, 권장 사항 설정, 생산 도구)을 클릭하거나 로컬 그룹 정책을 직접 열 수 있습니다. 새 Win11 컴퓨터를 받은 후 설정을 최적화하고 성능을 향상시키는 방법을 사용자에게 자세히 소개하겠습니다. 하나: 1. [Win+i] 키 조합을 눌러 설정을 연 다음 왼쪽의 [개인정보 및 보안]을 클릭하고 오른쪽의 Windows 권한 아래 일반(광고 ID, 로컬 콘텐츠, 앱 실행, 설정 제안, 생산성)을 클릭하세요. 방법 2.

심층 해석: Laravel이 달팽이처럼 느린 이유는 무엇입니까? 심층 해석: Laravel이 달팽이처럼 느린 이유는 무엇입니까? Mar 07, 2024 am 09:54 AM

Laravel은 널리 사용되는 PHP 개발 프레임워크이지만 달팽이처럼 느리다는 비판을 받기도 합니다. Laravel의 만족스럽지 못한 속도의 정확한 원인은 무엇입니까? 이 기사에서는 Laravel이 달팽이처럼 느린 이유를 여러 측면에서 심층적으로 설명하고 이를 특정 코드 예제와 결합하여 독자가 이 문제를 더 깊이 이해할 수 있도록 돕습니다. 1. ORM 쿼리 성능 문제 Laravel에서 ORM(Object Relational Mapping)은 매우 강력한 기능입니다.

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 프레임워크의 구성 요소에 대한 기본 표시 동작은 블록 수준 요소에 대한 것이 아닙니다. 이 디자인 선택은 구성 요소 스타일의 캡슐화를 촉진하고 개발자가 각 구성 요소가 표시되는 방법을 의식적으로 정의하도록 장려합니다. CSS 속성 표시를 명시적으로 설정하면 Angular 구성 요소의 표시를 완전히 제어하여 원하는 레이아웃과 응답성을 얻을 수 있습니다.

Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다! Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다! Mar 06, 2024 pm 02:33 PM

Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다! 인기 있는 PHP 프레임워크인 Laravel은 개발자에게 풍부한 기능과 편리한 개발 경험을 제공합니다. 그러나 프로젝트 규모가 커지고 방문 횟수가 늘어나면서 성능 병목 현상에 직면할 수도 있습니다. 이 기사에서는 개발자가 잠재적인 성능 문제를 발견하고 해결하는 데 도움이 되는 Laravel 성능 최적화 기술을 탐구합니다. 1. Eloquent 지연 로딩을 사용한 데이터베이스 쿼리 최적화 Eloquent를 사용하여 데이터베이스를 쿼리할 때 다음을 피하세요.

C++ 프로그램 최적화: 시간 복잡도 감소 기술 C++ 프로그램 최적화: 시간 복잡도 감소 기술 Jun 01, 2024 am 11:19 AM

시간 복잡도는 입력 크기를 기준으로 알고리즘의 실행 시간을 측정합니다. C++ 프로그램의 시간 복잡성을 줄이는 팁에는 데이터 저장 및 관리를 최적화하기 위한 적절한 컨테이너(예: 벡터, 목록) 선택이 포함됩니다. Quick Sort와 같은 효율적인 알고리즘을 활용하여 계산 시간을 단축합니다. 여러 작업을 제거하여 이중 계산을 줄입니다. 불필요한 계산을 피하려면 조건부 분기를 사용하세요. 이진 검색과 같은 더 빠른 알고리즘을 사용하여 선형 검색을 최적화합니다.

Golang의 gc 최적화 전략에 대한 토론 Golang의 gc 최적화 전략에 대한 토론 Mar 06, 2024 pm 02:39 PM

Golang의 가비지 수집(GC)은 항상 개발자들 사이에서 뜨거운 주제였습니다. 빠른 프로그래밍 언어인 Golang에 내장된 가비지 컬렉터는 메모리를 매우 잘 관리할 수 있지만, 프로그램의 크기가 커질수록 일부 성능 문제가 발생하는 경우가 있습니다. 이 기사에서는 Golang의 GC 최적화 전략을 살펴보고 몇 가지 구체적인 코드 예제를 제공합니다. Golang의 가비지 수집 Golang의 가비지 수집기는 동시 마크 스윕(concurrentmark-s)을 기반으로 합니다.

Laravel 성능 병목 현상 공개: 최적화 솔루션 공개! Laravel 성능 병목 현상 공개: 최적화 솔루션 공개! Mar 07, 2024 pm 01:30 PM

Laravel 성능 병목 현상 공개: 최적화 솔루션 공개! 인터넷 기술이 발전함에 따라 웹사이트와 애플리케이션의 성능 최적화가 점점 더 중요해지고 있습니다. 널리 사용되는 PHP 프레임워크인 Laravel은 개발 프로세스 중에 성능 병목 현상에 직면할 수 있습니다. 이 문서에서는 Laravel 애플리케이션이 직면할 수 있는 성능 문제를 살펴보고 개발자가 이러한 문제를 더 잘 해결할 수 있도록 몇 가지 최적화 솔루션과 특정 코드 예제를 제공합니다. 1. 데이터베이스 쿼리 최적화 데이터베이스 쿼리는 웹 애플리케이션의 일반적인 성능 병목 현상 중 하나입니다. 존재하다

See all articles