AngularJS 의 일회 성 데이터 바 인 딩 깊이 분석(bindonce)

1.양 방향 데이터 바 인 딩 과 모니터 이해
양 방향 데이터 바 인 딩 을 실현 하기 위해 AngularJS 는$watch API 를 사용 하여 기간 역할 영역 에서 의 모델 변 화 를 관찰 했다.구체 적 인 역할 영역 은 코드 를 어떻게 작성 하 느 냐 에 달 려 있 습 니 다.만약 당신 이 자체 작용 도 메 인 을 만 들 지 않 았 다 면,ngController 명령 을 사용 하지 않 고 DOM 과 컨트롤 러 코드 사이 에 연결 을 만 들 지 않 았 다 는 것 입 니 다.역할 도 메 인$rootScope을 처리 할 수 있 습 니 다.이 역할 도 메 인 은 ngApp 에서 자동 으로 만 들 고 모든 역할 도 메 인의 부모 역할 도 메 인 입 니 다.물론,수 동 으로 AngularJS 를 시작 하 는 것 을 선택 하면,그 상황 은 별 론 이다.데이터 바 인 딩 을 만 들 때마다 AngularJS 는 이 데이터 의 변 화 를 감청 하기 위해 자동 으로 모니터 를 만 듭 니 다.예 를 들 어 다음 의 간단 한 예 는 다음 과 같다.

<p>Hello {{name}}!</p>

이 예 에서 우 리 는 플러그 인 명령 을 사 용 했 습 니 다.이 명령 은 해당 역할 영역 에서 속성 name 의 변 화 를 감청 하기 위해 감청 기 를 등록 하고 이 속성 이 변화 할 때 DOM 에 실시 간 으로 반응 합 니 다.
다음 코드 를 추가 하면 name 속성 이 Pascal 로 자동 대 입 됩 니 다.

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]); 

 위의 코드 를 통 해 우 리 는 플러그 인 명령 을 성공 적 으로 사용 하여 데이터 바 인 딩 을 만 들 었 습 니 다.현재 name 속성 이 바 뀌 면 보기 가 자동 으로 업 데 이 트 됩 니 다.예 를 들 어 아래 코드 를 추가 합 니 다.단 추 를 누 르 면 name 의 값 을 수정 합 니 다.

<button ng-click="name = 'Christoph'">Click me!</button> 

  이 때 단 추 를 누 르 면 name 의 값 을 Christoph 로 변경 할 수 있 습 니 다.또한$digest 순환 을 통 해 DOM 의 해당 부분 을 업데이트 할 수 있 습 니 다.위의 예 에서 당신 이 본 지식 은 단 방향 데이터 로 연결 되 어 있 습 니 다.그러나 보기 에서 발생 하 는 변 화 를 모델 에 실시 간 으로 반영 하기 위해 ngModel 명령 을 사용 할 수 있 습 니 다.
위의 양 방향 바 인 딩 마법 의 실현 은$digest순환 에 전적으로 의존 합 니 다.$digest 순환 이 실 행 될 때 AngularJS 는 현재 역할 영역 과 하위 역할 영역 을 옮 겨 다 니 는 모든 감청 기 를 처리 한 다음 모델 에서 발생 하 는 변 화 를 검사 하여 DOM 의 값 을 업데이트 합 니 다.모델 이 더 이상 변화 하지 않 을 때 까지.$digest 순환 이 완료 되면 브 라 우 저 는 DOM 을 다시 렌 더 링 하여 모델 데이터 변 화 를 반영 합 니 다.
 지금 우 리 는 AngularJS 의 데이터 바 인 딩 체 제 를 대충 알 고 있 습 니 다.당신 은 우리 에 게 왜 일회 성 데이터 바 인 딩 이 필요 하 냐 고 물 을 수 있 습 니 다.
AngularJS 는 감청 기 를 사용 하여 데이터 바 인 딩 을 실현 하기 때 문 입 니 다.모니터 가 점점 많아 지면 성능 에 문제 가 생 길 수 있다.모니터 를 등록 하면$digest 순환 이 실 행 될 때 보 기 를 업데이트 할 수 있 도록 리 셋 함 수 를 등록 합 니 다.모니터 가 많 을 수록 앵 귤 러 JS 가 처리 해 야 할 리 턴 함수 도 많아 진 다 는 것 이다.
현재 보기 에서 AngularJS 가 처리 해 야 할 값 이 많다 고 가정 합 니 다.예 를 들 어 위 에서 플러그 인 명령 을 사용 하여 데 이 터 를 연결 합 니 다.비록 우 리 는 이 값 을 한 번 만 연결 시 키 고 싶 지 않 을 수도 있 습 니 다.예 를 들 어 위의 Pascal 은 응용 코드 가 실행 되 는 전체 과정 에서 이 속성 은 변 하지 않 지만 AngularJS 는 기본적으로 이 속성 에 모니터 와 리 셋 함 수 를 연결 합 니 다.따라서$digest에 도 AngularJS 가 이 값 에 특별히 관심 을 갖 는 것 은 지나치다.
2.일회 성 데이터 바 인 딩(One-time bings)
이것 이 바로 우리 가 일회 성 데이터 바 인 딩 을 필요 로 하 는 이유 이다.AngularJS 문서 에서 우 리 는 이 새로운 기능 의 역할 을 잘 알 수 있 습 니 다.일회 성 데이터 바 인 딩 표현 식 은 데이터 가 안정 적 인 후에$digest순환 에서 다시 계산 할 필요 가 없습니다.
일회용 데이터 바 인 딩 의 등장 은 앞에서 언급 한 모니터 가 너무 많아 서 가 져 온 성능 문 제 를 해결 했다.그렇다면 우 리 는 어떻게 일회용 데이터 바 인 딩 을 사용 해 야 합 니까?
일회용 데이터 바 인 딩 을 사용 하 는 것 은 매우 간단 합 니 다.우 리 는 표현 식 전에 더 블 콜론 만 추가 하면 됩 니 다.:그러면 됩 니 다.예 를 들 어 앞에서 우 리 는 플러그 인 명령 을 사용 하여 name 속성 을 보기 에 연결 시 켰 습 니 다.

<p>Hello {{name}}!</p> 

일회 성 데이터 바 인 딩 을 사용 합 니 다.우 리 는 이렇게 씁 니 다.

<p>Hello {{::name}}!</p> 

AngularJS 1.3 버 전에 서 는 모든 AngularJS 표현 식 에서 일회 성 데이터 바 인 딩 을 사용 할 수 있 습 니 다.ng-repeat 와 같은 양 방향 연결 명령 에 심각하게 의존 하 더 라 도 사용 할 수 있 습 니 다.
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 AngularJS 의 일회 성 데이터 바 인 딩(bindonce)입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!