일반적으로 NG에서 지침을 사용하면 대부분의 사용이 사용되는 링크 기능이 링크 속성입니다. 다음 기사는 Compli, Pre-Link 및 Post-Link의 사용법과 차이점을 알려줍니다.
AngularJS의 지침은 매우 마법이므로 매우 의미 있고 재사용 가능한 구성 요소를 만들 수 있으며 웹 구성 요소의 개척자로 이해할 수 있습니다.
인터넷에는 이미 지침을 사용하는 방법을 소개하는 많은 기사와 관련 책이 있습니다. 비교하면 사전 링크와 사후 링크는 물론 컴파일과 링크의 차이를 거의 소개하지 않습니다.
대부분의 튜토리얼은 단순히 Compile이 NG 내부에서 사용될 것이라고 말하며 링크 속성 만 사용하는 것이 좋습니다. 이는 대부분의 지침에서 발생합니다.
이러한 기능 간의 차이를 올바르게 이해하면 NG의 내부 실행 메커니즘에 대한 이해가 향상되고 더 나은 사용자 정의 지침을 개발하는 데 도움이되기 때문에 이것은 매우 불행한 일입니다.
그러니 다음 내용을 단계별로 확인하여 이러한 기능이 무엇인지, 언제 사용 해야하는지 이해하십시오.
이 기사에서는 지시 사항에 대한 이해가 있다고 가정합니다. 그렇지 않다면이 기사를 읽는 것이 좋습니다.
NG에서 지침을 처리하는 방법
분석을 시작하기 전에 NG-Chinese가 지시를 처리하는 방법을 살펴 보겠습니다.
브라우저가 페이지를 렌더링하면 본질적으로 HTML 아이덴티티를 읽은 다음 DOM 노드를 작성하고 DOM 트리가 생성 된 후 이벤트를 방송합니다.
스크립트 태그를 사용하여 페이지에 NG 애플리케이션 코드를로드하면 NG는 위의 DOM 완료 이벤트를 리터닝하고 NG-APP 속성이있는 요소를 찾습니다.
이러한 요소를 찾은 후 NG는이 요소의 시작점으로 DOM을 처리하기 시작하므로 NG-APP이 HTML 요소에 추가되면 NG는 HTML 요소로 DOM을 처리하기 시작합니다.
이 출발점에서 시작하여 NG는 모든 자식 요소를 재귀 적으로 검색하기 시작하여 응용 프로그램에 정의 된 지침 규칙을 준수합니다.
NG의 지침을 다루는 방법은 실제로 정의하는 객체 속성에 따라 다릅니다. 컴파일 또는 링크 함수를 정의하거나 링크 대신 사전 링크 및 포스트 링크 함수를 사용할 수 있습니다.
그렇다면이 기능의 차이점은 무엇입니까? 왜 그것을 사용합니까? 그리고 언제?
이 질문들과 함께, 단계별로 나를 따르십시오.
코드 조각
이 기능의 차이점을 설명하기 위해 아래의 간단하고 이해하기 쉬운 예제를 사용하겠습니다.
1. 궁금한 점이 있으면 주저하지 말고 아래에 의견을 추가하십시오.
다음 HTML 태그 코드를 확인하십시오
코드 사본은 다음과 같습니다.
<레벨-온>
<Level-two>
<Level-Three>
안녕하세요
</Level-Three>
</level-two>
</Level-One>
그런 다음 JS 코드가 있습니다
코드 사본은 다음과 같습니다.
var app = angular.module ( '플 랭커', []);
createiprection (name) {
return function () {
반품 {
제한 : 'e',
컴파일 : 기능 (Telem, Tattrs) {
console.log (name + ': compile');
반품 {
pre : 함수 (스코프, ielem, iattrs) {
Console.log (이름 + ': pre 링크');
},
게시물 : 함수 (스코프, ielem, iattrs) {
Console.log (이름 + ': Post Link');
}
}
}
}
}
}
app.directive ( 'levelone', createciption ( 'levelone'));
app.directive ( 'leveltwo', createipleation ( 'leveltwo'));
app.directive ( '레벨 3', createiprection ( 'levelthree'));
결과는 매우 간단합니다. NG가 세 가지 중첩 지침을 처리하고 각 명령어에는 고유 한 고유 한, 사전 링크 및 포스트 링크 기능이 있습니다. 각 함수는 콘솔에 라인을 인쇄하여 자체를 식별합니다.
이 예제는 지침을 처리 할 때 NG의 내부 프로세스를 간단히 이해할 수 있습니다.
코드 출력
아래는 콘솔에서 출력 결과의 스크린 샷입니다.
이 예제를 직접 시도하려면이 PLNKR을 클릭 한 다음 콘솔에서 결과를보십시오.
분석 코드
가장 먼저 주목해야 할 것은 이러한 기능의 호출 순서입니다.
코드 사본은 다음과 같습니다.
// 컴파일 단계
// levelOne : 컴파일 함수가 호출됩니다
// leveltwo : 컴파일 함수가 호출됩니다
// 레벨 3 : 컴파일 함수가 호출됩니다
// 사전 링크 단계
// levelOne : 사전 링크 함수가 호출됩니다
// leveltwo : 사전 링크 함수가 호출됩니다
// 레벨 3 : 사전 링크 함수가 호출됩니다
// 링크 후 단계 (반대 순서를 알아 차리기)
// Levelthree : Post Link 함수가 호출됩니다
// leveltwo : Post Link 함수가 호출됩니다
// LevelOne : Post Link 함수가 호출됩니다
이 예제는 NG가 링크 전에 모든 지침을 컴파일 한 다음 링크가 사전 링크 및 포스트 링크 단계로 나뉩니다.
Compile 및 Pre-Link의 실행 순서는 순차적으로 실행되지만 링크 이후는 정확히 반대입니다.
위의 내용은 다른 단계를 명확하게 식별했지만 컴파일과 프리 링크의 차이점은 무엇입니까? 둘 다 동일한 실행 순서에 있으므로 왜 우리는 두 가지 다른 기능으로 나누어야합니까?
돔
더 깊이 파기 위해 각 함수의 매개 변수 목록에 요소 변수를 인쇄하는 위의 코드를 간단히 수정하겠습니다.
코드 사본은 다음과 같습니다.
var app = angular.module ( '플 랭커', []);
createiprection (name) {
return function () {
반품 {
제한 : 'e',
컴파일 : 기능 (Telem, Tattrs) {
console.log (name + ': compile =>' + telem.html ());
반품 {
pre : 함수 (스코프, ielem, iattrs) {
console.log (name + ': pre link =>' + ielem.html ());
},
게시물 : 함수 (스코프, ielem, iattrs) {
console.log (이름 + ': post link =>' + ielem.html ());
}
}
}
}
}
}
app.directive ( 'levelone', createciption ( 'levelone'));
app.directive ( 'leveltwo', createipleation ( 'leveltwo'));
app.directive ( '레벨 3', createiprection ( 'levelthree'));
원래 HTML 태그의 출력을 제외하고 Console.log의 출력에주의하십시오. 기본적으로 다른 변경 사항은 없습니다.
이것은 이러한 기능의 맥락에 대한 우리의 이해를 심화시켜야합니다.
코드를 다시 실행하여 볼 수 있습니다
산출
아래는 콘솔에서 출력 결과의 스크린 샷입니다.
효과를 보려면 여전히 직접 실행하려면이 PLNKR을 클릭 한 다음 콘솔에서 출력 결과를 볼 수 있습니다.
관찰하다
DOM 결과의 출력은 몇 가지 흥미로운 것들을 노출시킬 수 있습니다. DOM 컨텐츠는 두 기능에서 컴파일하고 사전 링크에서 다릅니다.
그래서 무슨 일이 있었나요?
엮다
우리는 NG가 DOM 빌드가 완료되었음을 발견하면 DOM 처리를 시작한다는 것을 이미 알고 있습니다.
따라서 NG가 DOM을 가로 지르면 레벨 1 요소를 만나고 일부 필요한 기능을 실행해야한다는 정의에서 알게됩니다.
컴파일 함수는 레벨 1 명령어의 명령어 객체에 정의되므로 요소 객체를 매개 변수로 전달합니다.
자세히 살펴보면 브라우저 가이 요소 객체를 생성 할 때 여전히 가장 독창적 인 HTML 태그임을 알 수 있습니다.
1. NG에서 원래 DOM은 일반적으로 템플릿 요소를 식별하는 데 사용되므로 컴파일 함수 매개 변수를 정의 할 때 텔렘 이름을 사용 했으며이 변수는 템플릿 요소를 가리 킵니다.
LevelOne 명령에서 컴파일 함수가 실행되면 NG는 DOM 노드를 심도있게 재귀 적으로 통과 한 다음 Level-TWO 및 Level-3에서 이러한 작업을 반복합니다.
링크 후
프리 링크 함수에 들어가기 전에 링크 후 함수를 살펴 보겠습니다.
2. 명령어를 정의 할 때 하나의 링크 함수 만 사용하는 경우 NG는이 기능을 포스트 링크로 취급하므로 먼저이 기능을 논의해야합니다.
NG가 모든 DOM을 통과하고 모든 컴파일 함수를 실행 한 후, 관련된 포스트 링크 함수는 역으로 호출됩니다.
DOM은 이제 링크 후 기능을 역전시키고 실행하기 시작합니다. 따라서이 리버스 콜은 이전에는 조금 이상하게 보였지만 실제로 그렇게하는 것은 의미가 있습니다.
하위 검사를 포함하는 포스트 링크 명령을 실행할 때 리버스 포스트 링크 규칙은 하위 검사의 링크가 실행되도록 보장 할 수 있습니다.
따라서 레벨 1 명령어의 링크 포스트 링크 기능을 실행할 때 레벨 2 및 레벨 3의 링크가 실제로 실행되었는지 확인할 수 있습니다.
그렇기 때문에 사람들이 링크 이후가 비즈니스 로직을 작성하는 가장 안전하거나 기본적 인 장소라고 생각하는 이유입니다.
그러나 왜 여기서 요소가 컴파일의 요소와 다른가?
NG가 명령어의 컴파일 함수를 호출하면 템플릿 요소의 요소 인스턴스 객체가 생성되고 범위 객체가 제공됩니다. 이 범위는 새로운 인스턴스 일 수도 있고 이미 존재할 수도 있고, 하위 범위 일 수도 있고, 독립적 인 범위 일 수 있습니다. 이것들은 모두 명령 정의 객체의 범위 속성 값에 따라 다릅니다.
따라서 연결이 발생하면이 인스턴스 요소 및 스코프 객체를 이미 사용할 수 있으며 Post-Link 함수의 매개 변수 목록으로 NG에 의해 매개 변수로 전달됩니다.
1. 개인적으로 항상 ielem 이름을 사용하여 링크 함수의 매개 변수를 정의하고 요소 인스턴스를 가리 킵니다.
따라서 Post-Link (pre-link) 함수의 요소 매개 변수 객체는 템플릿 요소 대신 요소 인스턴스입니다.
따라서 위의 예의 출력은 다릅니다
사전 링크
포스트 링크 함수를 작성할 때 링크 포스트 링크 기능을 실행할 때 모든 자식 지침의 포스트 링크 기능이 실행되었는지 확인할 수 있습니다.
대부분의 경우 더 잘할 수 있으므로 일반적으로 사용 코드를 작성하는 데 사용합니다.
그러나 NG는 추가 후크 메커니즘, 즉 프리 링크 기능을 제공하여 모든 하위 검사의 후 링크 기능을 실행하기 전에 다른 코드를 실행할 수 있습니다.
이 문장은 반복적으로 고려할 가치가 있습니다
사전 링크 함수는 요소 인스턴스에서 및 하위 검사 후 링크가 실행되기 전에 실행되도록 할 수 있습니다.
따라서 포스트 링크 함수를 반전시키는 것이 합리적이며 원래 순서로 사전 링크 함수를 실행합니다.
이는 또한 사전 링크 함수가 모든 하위 검사의 프리 링크 함수 전에 실행되므로 완전한 이유는 다음과 같습니다.
요소의 사전 링크 함수는 모든 하위 검사의 사후 링크 및 사전 링크가 실행되기 전에 실행되도록 보장 할 수 있습니다. 아래 그림을 참조하십시오.
검토
위의 원래 출력을 되돌아 보면 진행중인 작업을 명확하게 인식 할 수 있습니다.
코드 사본은 다음과 같습니다.
// 여기서 요소는 여전히 원래 템플릿 요소입니다.
// 컴파일 단계
// levelOne : 컴파일 함수는 원래 dom에서 호출됩니다
// leveltwo : 컴파일 함수는 원래 dom에서 호출됩니다
// 레벨 3 : 컴파일 함수는 원래 dom에서 호출됩니다
// 여기에서 요소는 인스턴스화되었고
// 스코프에 묶여 있습니다
// (예 : ng-repeat는 여러 인스턴스가 있습니다)
// 사전 링크 단계
// levelOne : 사전 링크 함수가 요소 인스턴스에서 호출됩니다.
// leveltwo : 사전 링크 함수가 요소 인스턴스에서 호출됩니다.
// 레벨 3 : 요소 인스턴스에서 사전 링크 함수가 호출됩니다.
// 링크 후 단계 (반대 순서를 알아 차리기)
// Levelthree : 링크 포스트 기능이 요소 인스턴스에서 호출됩니다.
// leveltwo : 포스트 링크 함수가 요소 인스턴스에서 호출됩니다.
// levelOne : 링크 포스트 함수가 요소 인스턴스에서 호출됩니다.
요약
위의 분석을 되돌아 보면 이러한 기능의 차이점과 사용법을 설명 할 수 있습니다.
기능을 컴파일하십시오
NG가 원래 DOM 인스턴스 및 스코프 인스턴스를 생성하기 전에 컴파일 함수를 사용하여 원래 DOM (템플릿 요소)을 변경하십시오.
여러 요소 인스턴스를 생성 해야하는 상황에 적용 할 수 있으며 템플릿 요소가 하나뿐입니다. NG-Repeat가 가장 좋은 예입니다. 컴파일 함수 단계에서 원래 DOM을 변경하여 여러 원래 DOM 노드를 생성 한 다음 각 요소 인스턴스를 생성합니다. 컴파일은 한 번만 실행되므로 여러 요소 인스턴스를 생성해야 할 때 성능을 향상시킬 수 있습니다.
템플릿 요소 및 관련 속성은 컴파일 함수의 매개 변수로 전달되지만 현재로서는 범위를 사용할 수 없습니다.
다음은 다음과 같습니다.
코드 사본은 다음과 같습니다.
/**
* 컴파일 함수
*
* @param 텔레임 - 템플릿 요소
* @param tattrs- 템플릿 요소의 속성
*/
기능 (Telem, Tattrs) {
// ...
};
사전 링크 기능
Pre-Link 함수를 사용하여 NG가 컴파일 함수를 실행 한 후 일부 비즈니스 코드를 실행하십시오. 그러나 모든 하위 검사의 후 링크 후 함수가 실행되기 전에.
스코프 객체 및 요소 인스턴스는 사전 링크 함수의 매개 변수로 전달됩니다.
다음은 다음과 같습니다.
코드 사본은 다음과 같습니다.
/**
* 사전 링크 기능
*
* @param scope-이 istance와 관련된 범위
* @param ielem- 인스턴스 요소
* @param iAttrs- 인스턴스 요소의 속성
*/
함수 (스코프, ielem, iattrs) {
// ...
};
링크 후 기능
포스트 링크 함수를 사용하여 비즈니스 로직을 실행하십시오. 이 단계에서는 모든 하위 검사가 컴파일되었으며 사전 링크 및 사후 링크 기능이 실행되었다는 것을 이미 알고 있습니다.
이것이 가장 안전하고 기본 쓰기 비즈니스 논리 코드로 간주되는 것입니다.
스코프 인스턴스 및 요소 인스턴스는 포스트 링크 함수의 매개 변수로 전달됩니다.
다음은 다음과 같습니다.
코드 사본은 다음과 같습니다.
/**
* 링크 후 기능
*
* @param scope-이 istance와 관련된 범위
* @param ielem- 인스턴스 요소
* @param iAttrs- 인스턴스 요소의 속성
*/
함수 (스코프, ielem, iattrs) {
// ...
};
요약
이제 컴파일, 사전 링크, 링크 포스트 링크 및이 기능의 차이점을 명확하게 이해해야합니다.
당신이 아직하지 않았고 당신이 진지한 NG 개발자라면, 나는 당신이 그것을 이해할 때 까지이 기사를 다시 읽는 것이 좋습니다.
이러한 개념을 이해하는 것은 매우 중요하며, 이는 NG 기본 지침의 작동 방식을 이해하는 데 도움이되며 고유 한 사용자 정의 지침을 최적화하는 데 도움이 될 수 있습니다.
질문이 있으시면 아래 의견에 질문을 추가하십시오.
앞으로 우리는 지침에 대한 다른 두 가지 질문을 계속 분석 할 것입니다.
1. 지시문은 트랜스 클레싱 속성을 어떻게 사용합니까?
2. 명령어의 컨트롤러 기능은 어떻게 관련되어 있습니까?
마지막 으로이 기사에 문제가 있으면 제 시간에 저에게 댓글을 달으십시오.
감사해요!