개인적으로, 나는 당신이 가능한 한 구덩이에 떨어지지 않도록 angularjs의 작동 메커니즘을 잘 이해해야한다고 생각합니다. 이 기사에서는 온라인 정보와 내 이해를 바탕으로 AngularJS가 무엇을했는지에 대한 명확하고 자세한 분석을 할 것입니다.
먼저 Angular가 단계별로 수행 한 작업을 살펴 보겠습니다.
<! docType html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <png-init = "name = 'world'"> hello {{name}! </p> </body> </html>브라우저를 사용하여 index.html에 액세스 할 때 브라우저는 다음과 같은 작업을 수행합니다.
전체 프로세스는이 그림으로 표시 될 수 있습니다.
자, 위의 예를 통해 AngularJS가 페이지를 단계별로 어떻게 렌더링하는지 이해할 수 있습니다. 그렇다면 브라우저의 이벤트 루프와 어떻게 상호 작용합니까? 아니면 사용자와 어떻게 상호 작용합니까? 간단히 말하면 주로 세 단계로 나뉩니다.
1. 브라우저의 이벤트 루프는 사용자 상호 작용, 타이밍 이벤트 또는 네트워크 이벤트 (예 : 서버 응답 등)를 포함하여 이벤트가 트리거되기를 기다리고 있습니다.
2. 일단 이벤트가 트리거되면 JavaScript 컨텍스트에 들어가고 DOM은 일반적으로 콜백 함수를 통해 수정됩니다.
3. 콜백 함수가 실행 된 후 브라우저는 새로운 DOM에 따라 새 페이지를 렌더링합니다.
아래 그림과 같이, 상호 작용 프로세스는 주로 여러 주기로 구성됩니다.
AngularJS는 일반적인 JavaScript 워크 플로를 수정하고 자체 이벤트 처리 메커니즘을 제공합니다. 이것은 JavaScript 컨텍스트를 두 부분으로 분리합니다. 하나는 기본 JavaScript 컨텍스트이고 다른 하나는 AngularJS 컨텍스트입니다. AngularJS 컨텍스트에서만 작업하면 Angular Data-Binding, 예외 처리, 재산 관찰 및 기타 서비스를 즐길 수 있습니다. 그러나 Outsiders (예 : 기본 JavaScript 작업, 맞춤형 이벤트 콜백, 타사 라이브러리 등)에 대해 Angular는 무시되지 않습니다. AngularJS가 제공 한 $ apply () 함수를 사용하여 이러한 외부인을 angularjs 컨텍스트로 랩핑하여 Angular가 변경된 변경 사항을 감지 할 수 있습니다.
다음으로, 상호 작용 과정에서 이러한주기가 어떻게 작동하는지 살펴 보겠습니다.
1. 우선, 브라우저는 청취 상태에 있습니다. 이벤트가 트리거되면 이벤트 큐에 추가되며 이벤트 큐의 이벤트는 하나씩 실행됩니다.
2. 이벤트 큐의 이벤트가 $ apply ()로 래핑되면 AngularJS의 컨텍스트가 들어갑니다. 여기서 FN ()는 AngularJS의 맥락에서 실행하려는 기능입니다.
3. AngularJS는 fn () 함수를 실행합니다. 일반적 으로이 기능은 응용 프로그램의 일부 상태를 변경합니다.
4. 그러면 AngularJS는 두 개의 작은 루프로 구성된 $ 다이제스트 루프로 들어갑니다. 하나의 루프는 $ atalasync 큐를 처리하는 데 사용됩니다 (뷰를 렌더링하기 전에 처리 해야하는 일부 작업을 예약하는 데 사용됩니다. 하나의 루프는 $ 시계 목록을 처리하는 데 사용됩니다 (일부 표현식 모음. 일단 변경되면 $ Watch 함수가 호출됩니다). $ evalasync 큐가 비어 있고 $ watch 목록도 비어 있음을 알면 $ digest 루프는 계속 반복됩니다. 즉, 모델이 더 이상 변경되지 않습니다.
5. AngularJS의 $ 다이제스트 루프가 종료되면 전체 실행은 AngularJS 및 JavaScript의 컨텍스트를 남기고 데이터가 변경된 후 브라우저가 뷰를 다시 렌더링합니다.
다음으로 코드와 함께 분석하겠습니다.
<! docType html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <input ng-model = "name"> <p> hello {{name}! </p> </body> </html>이 코드와 이전 코드의 유일한 차이점은 사용자 입력을받는 입력이 있다는 것입니다. 브라우저를 사용 하여이 HTML 파일에 액세스 할 때 입력의 NG-Model 지시문은 키 다운 이벤트를 입력에 바인딩하고 이름 변수에 $ watch를 권장하여 변수 값 변경 알림을받습니다. 대화식 단계에서 다음과 같은 일련의 사건이 주로 발생합니다.
1. 사용자가 키보드에서 키를 누르면 (예 : a) 입력의 키 다운 이벤트가 트리거됩니다.
2. 입력에 대한 명령은 입력의 값 변경을 감지하고 AngularJS 컨텍스트에서 모델을 업데이트하기 위해 $ apply ( "name = 'a'")를 호출합니다.
3. Angularjs는 'A'를 지정합니다.
4. $ 다이제스트 루프가 시작되고 $ Watch List는 이름 값의 변경을 감지 한 다음 {{name}} 표현식에 알림을 제공하여 DOM을 업데이트합니다.
5. AngularJS의 맥락을 종료 한 다음 JavaScript의 맥락에서 키 다운 이벤트를 종료하십시오.
6. 브라우저는보기를 다시 렌더링합니다.
위는 AngularJS의 작동 원리에 대한 요약입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!