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)
$scope.$apply()
를 릴리즈하면 Zhang San이 Li Si로 성공적으로 변경됩니다. 🎜🎜🎜2. 타사 플러그인🎜🎜🎜html:🎜🎜🎜$scope.$evalAsync( function( $scope ) { console.log( "$evalAsync" ); } );
$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 중국어 홈페이지를 주목해주세요! 🎜🎜관련 추천: 🎜
위 내용은 Angularjs의 $apply 및 최적화 사용 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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