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 = '李四';
//$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 = '';
$( 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 = '李四';
},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 중국어 웹사이트의 기타 관련 기사를 참조하세요!