웹 프론트엔드 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&gt; , 그리고 그 사실을 알고는 기분 좋게 놀랐습니다. 아, 정말 업데이트됐네요. <code>$scope.$apply() ,然后就惊喜的发现。噢,真的更新了。

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

Error: $digest already in progress

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

一.$apply的作用

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

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

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

1.setTimeout

html:

&lt;p&gt;{{name}}&lt;/p&gt;
로그인 후 복사

js:

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

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

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

2.第三方插件

html:

&lt;p&gt;Date: &lt;input type=&quot;text&quot; id=&quot;datepicker&quot;&gt;&lt;/p&gt;
&lt;p&gt;
&lt;header&gt;所选日期&lt;/header&gt;
{{selectedDate}}
&lt;/p&gt;
로그인 후 복사

js:

$scope.selectedDate = &#39;&#39;;
$( function() {
 $( &quot;#datepicker&quot; ).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( &quot;$evalAsync&quot; );
   }
  );
로그인 후 복사
🎜🎜🎜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으로 문의하세요.

뜨거운 기사 태그

메모장++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

Ubuntu 24.04에 Angular를 설치하는 방법

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

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해

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

Golang의 gc 최적화 전략에 대한 토론

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

Laravel 성능 병목 현상 디코딩: 최적화 기술이 완전히 공개되었습니다!

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

C++ 프로그램 최적화: 시간 복잡도 감소 기술

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

심층 해석: Laravel이 달팽이처럼 느린 이유는 무엇입니까?

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

새 Win11 컴퓨터를 받은 후 설정을 최적화하고 성능을 향상시키는 방법은 무엇입니까?

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

Laravel 성능 병목 현상 공개: 최적화 솔루션 공개!

See all articles