각도의 중요한 지침에 대한 자세한 설명($eval, $parse 및 $compile)
- 高洛峰원래의
- 2016-12-09 13:59:081093검색
Angular의 서비스 중에는 ng의 핵심이라고 할 수 있는 서비스가 있기 때문에 꼭 이해하셔야 할 서비스가 있습니다. 오늘은 ng, $parse, $compile 두 가지 핵심 서비스를 소개하겠습니다. 사실 많은 사람들이 이 두 서비스에 대해 이야기하지만, 나는 이 두 서비스에 대한 나의 이해를 이야기하기 위해 여기에 왔습니다.
$eval은 실제로 서비스가 아니며 서비스로 간주할 수 없습니다. 또한 구문 분석을 기반으로 하기 때문에 다른 것으로 간주할 수 있습니다. $parse 버전입니다. ng 소스 코드에서 $eval의 정의를 살펴보겠습니다.
$eval: function(expr, locals) {
return $parse(expr)(this, locals);
}, 소스 코드를 읽으면 모두가 이해할 것이라고 믿습니다. 좋아요, 이제 두 가지 핵심 서비스에 대한 설명을 시작하겠습니다. 제가 말한 내용이 잘못되었다고 생각되면 댓글 영역이나 비공개 채팅에서 자유롭게 지적해 주세요. 다른 독자들에게 피해를 주지 않도록 말이죠. 이 두 서비스에 대해 이야기할 때 먼저 이 게시물의 개념인 context에 대해 이야기하고 싶습니다. 이 "context"에 대해 많은 사람들이 들어봤을 거라 생각하지만 아마도 그럴 수도 있습니다. 조금 모호합니다. 귀하가 이 진술을 수락하는지 확인하기 위해 여기서 설명하겠습니다. Angular의 데이터 바인딩을 기억하시나요? 예를 들어, 이제 TestCtrl이라는 컨트롤러가 있고 그 내용은 다음과 같습니다.
.controller('TestCtrl', function($scope) {
$scope.test = "Boo!!!"
}) html에서 코드는 다음과 같습니다
<body ng-controller="TestCtrl">
{{test}}
</body> 그러면 아무 생각 없이 결과를 알 수 있을 텐데, 페이지에는 반드시 부(Boo)라는 단어가 나올 겁니다. 그런데 ng-controller 지시문을 삭제하면 어떻게 되나요? 즉, html로 컨트롤러를 선언하지 않았습니다. {{test}}를 직접 바인딩하면 어떻게 될까요? 결과는 하나뿐입니다. 즉, 페이지에 아무것도 없습니다(ps: ng-app을 선언했기 때문입니다). 이것을 이해합니까? 컨트롤러는 컨텍스트 컨테이너와 동일합니다. 실제 컨텍스트는 실제로 $scope입니다. 페이지가 테스트에 바인딩될 때 컨트롤러가 선언되면 현재 컨텍스트는 컨트롤러의 $scope이고 ng입니다. 컨트롤러의 $scope 컨텍스트에 테스트가 있는지 확인하면 당연히 표시되지만 컨트롤러를 선언하지 않으면 어떻게 되나요? 그의 컨텍스트 컨테이너는 ng-app이고 실제 컨텍스트는 $rootScope입니다. 이때 그는 테스트가 있는지 확인하기 위해 $rootScope를 찾습니다. 자, 이제 컨텍스트 개념에 대한 이야기를 마쳤습니다. 사실 이해하기 매우 쉽습니다. 이제 본격적으로 이야기를 시작하겠습니다. $parse.가장 먼저 살펴봐야 할 것은 ng API 문서
var getter = $parse('user.name');
var setter = getter.assign;
var context = {user:{name:'angular'}};
var locals = {user:{name:'local'}};
expect(getter(context)).toEqual('angular');
setter(context, 'newValue');
expect(context.user.name).toEqual('newValue');
expect(getter(context, locals)).toEqual('local');입니다. $parse 서비스에 대한 ng 문서에서 getter와 setter는 잘 알려진 get 메서드이고 context는 json 개체일 뿐입니다. 다음 네 가지 문장은 결국 테스트를 통과할 수 있습니다. 이제 하나씩 분석해 보기 전에 $parse$parse 서비스가 실제로 표현식을 구문 분석하는 기능인지 설명해야 합니다. ng-model="test", html로 작성합니다. ng-model="test"에서 실제로 바인딩하려는 것이 현재 컨트롤러(컨텍스트 컨테이너)의 범위(컨텍스트)에 있는 테스트 값이라는 것을 누가 알겠습니까? ) ng는 $parse 서비스를 통해 이를 구문 분석하는 데 도움이 되므로 $parse 서비스를 호출할 때 테스트를 찾을 범위(컨텍스트)를 ng에게 알려야 합니다. 테스트 코드의 첫 번째 줄은 다음과 같습니다.
getter(context)).toEqual('angular') //实际上就是 $parse('user.name')(context)이 맥락에서는 컨텍스트이고, " angle "을 반환할 수 있습니다. 이 문자열의 원리는 다음 세 단계를 거치는 것입니다. 1. 현재 표현식 user.name을 가져옵니다.2. 현재 컨텍스트 개체를 가져옵니다. {name:' angle'}}3. 상위 및 하위 질문 개체에서 표현식을 찾고, 마지막으로 "angular" 문자를 얻어서 을 생성하므로 이 테스트 코드는 성공합니다. . 두 번째 메소드인 setter 메소드를 살펴보겠습니다
setter(context, 'newValue');//实际上就是 $parse('user.name').assign(context, 'newValue') expect(context.user.name).toEqual('newValue');//测试数据上下文的值是否被改变여기서 setter 메소드는 실제로 값 변경 메소드입니다
1. 현재 표현식 user.name 가져오기2. 현재 컨텍스트 객체 {user:{name:'angular'}} 가져오기3. , 컨텍스트 객체 프로그래밍 {user:{name:'newValue'}}따라서 컨텍스트 객체가 변경되었습니다. getter 메서드를 사용하여 표현식을 다시 가져오면 컨텍스트가 {user:{name: 'angular' }} --> {user:{name:'newValue'}}, 최종적으로 얻은 표현식의 값은 당연히 "newValue"이므로 테스트 코드도 통과됩니다.
expect(getter(context, locals)).toEqual('local');//实际上就是$parse('user.name')(context, locals)여기서 보여드릴 것은 실제로 Context Replacement 기능입니다. getter 메소드에서는 첫 번째 컨텍스트를 선택할 수 있을 뿐만 아니라 두 번째 매개변수를 전달하면 두 번째 컨텍스트가 첫 번째 컨텍스트를 덮어쓰게 되므로 주의하세요.1. 현재 표현식 user.name을 가져옵니다. 2. 현재 컨텍스트 개체 {user:{name:'angular'}}를 가져옵니다.3. 현재 컨텍스트를 덮어씁니다. name:'local'}}4. 구문 분석 후 표현식의 값을 가져옵니다
$eval로 돌아가면, $eval 소스 코드에서 $eval에는 get 함수만 있고 set 함수는 없지만 때로는 값 수정 효과를 얻기 위해 두 번째 컨텍스트를 전달하도록 선택할 수도 있습니다.
여기서 $parse 서비스가 끝났고, 다음 단계는 $compile입니다
---------------------- - ---------------------------
$parse의 개념을 이해하시면 $compile도 비슷하다고 생각합니다. 이해하세요. 실제로 $parse와 매우 유사합니다. 그러나 이는 HTML 코드 조각을 구문 분석하고 그 기능은 명령의 핵심 서비스이기도 한 죽은 템플릿을 라이브 템플릿으로 바꾸는 것입니다.
예를 들어 HTML 코드 4a249f0d628e2318394fd9b75b4636b1{{test}}473f0a7621bec819994bb5020d29372a가 있는데 이 코드를 HTML 코드에 직접 넣으면 어떻게 되는지 모르겠습니다. 내용은 모두가 이해해야 할 것입니다. 이것은 죽은 템플릿이며 소위 라이브 템플릿은 그 안의 모든 데이터가 데이터에 의해 바인딩되었음을 의미합니다. {{test}}는 데이터를 바인딩할 현재 컨텍스트를 자동으로 찾습니다. 마지막으로 표시되는 것은 라이브 템플릿, 즉 데이터 바인딩된 템플릿입니다.
$compile('dead template')(컨텍스트 객체), 죽은 템플릿이 라이브 템플릿에 프로그래밍되고 이 라이브 HTML 코드에 대해 현재 노드에 추가하는 등의 작업을 수행할 수 있도록 합니다. , 등 잠깐만요.
그러나 명령에서는 사전 링크와 사후 링크 두 가지 기능을 반환합니다
첫 번째로 실행되는 것은 사전 링크이며 동일한 명령에 대한 순회 순서는 Traversal from Traversal에서 옵니다. 상위 노드에서 하위 노드로. 이 단계에서 DOM 노드는 아직 안정화되지 않았으며 일부 바인딩 이벤트 작업을 수행할 수 없지만 여기에서 일부 초기화 데이터를 처리할 수 있습니다.
두 번째 실행은 흔히 링크 기능이라고 부르는 포스트 링크입니다. 이 단계에서는 일반적으로 DOM 노드가 안정화됩니다. 여기.