데이터 양 방향 바 인 딩 Angular 더러 운 새로 고침 실현 (3)

기본 원리
더러 운 리 셋 은 기본적으로 구독 자 디자인 모드 를 따 릅 니 다. $watch 는 감청 자 를 $$watchers 에 추가 합 니 다. $degist 를 실행 할 때 watchers 목록 을 읽 습 니 다. 수치 가 변 경 된 것 을 발견 하면 페이지 를 리 셋 합 니 다. getter / setter 와 가장 큰 차이 점 은 두 가지 가 있 습 니 다. 1. 수치 가 변 경 될 때 $degist 를 주동 적 으로 실행 하여 주동 적 으로 리 셋 해 야 합 니 다.2. $degist 는 감청 목록 을 스 캔 합 니 다. 감청 목록 이 너무 길 면 성능 문제 가 발생 하기 쉽 습 니 다.
코드 구현
1. $watch 함 수 를 정의 하고 감청 할 속성 을 기록 하 며 이 속성 을 $watcher 감청 목록 에 넣 습 니 다.

$watch: function (key, listenerFn) {
  var self = this;
  var watchFn = function (scope) {
    return {value: scope.model[key], key: key};
  }
  
  var watcher = {
    watchFn: watchFn,
    listenerFn: listenerFn || function () {}
  };
  
  this.$$watcher.push(watcher);
}

2. $digest 능 동적 데이터 새로 고침, 함수 가 감청 목록 의 요 소 를 읽 고 신 구 수 치 를 비교 합 니 다. 데이터 가 다른 것 을 발견 하면 다시 렌 더 링 합 니 다.

 $digest: function () {
    var self = this;
    var length = this.$$watcher.length;
    var watcher, newValue, oldvalue, key;
    while(length--){
        watcher = this.$$watcher[length];
        console.log(watcher)
        newValue = watcher.watchFn(this).value;
        key = watcher.watchFn(this).key;
        oldValue = watcher.last;
        if(newValue !== oldValue){
            watcher.last = newValue;
            var arr = self.model2sync[key]
            
            each(arr, function() {
              //      text
              this.node.textContent = self.renderStr(this.raw)
            })
         //   var arr = self.model2sync[key]
          //  console.log(arr)
            watcher.listenerFn(newValue, oldValue, this, key);
        }
    }
}

3. model 데 이 터 를 바 꾸 고 $digest 함 수 를 주동 적 으로 실행 하여 더러 운 값 검 사 를 합 니 다.

var demo1 = mvvm('#demo1', {
  model: {
    name: 'world',
    time: Date(),
    css: 'green'
  }
});

demo1.$watch('time')

setInterval(function () {
  demo1.model.time = Date();
  demo1.$digest();
}, 1000);

4. 전체 코드http://codepen.io/youyudehexie/pen/NxbqPz
Getter / setter 의 우열 을 비교 하 다
장점 은 먼저 중요 한 예 를 들 어 목록 페이지 를 새로 고침 합 니 다.

//       ，renderData            。
var renderData = [0...1000];
renderData[] = 0; //         0.
for (var i = 0; i < 1000; i++) {
      renderData[i] = 1;
}

우리 가 Getter / setter 를 사용 할 때 실제 적 으로 수 치 를 수정 할 때마다 리 셋 모델 링 방법 을 활성화 시 키 고 더러 운 리 셋 은 1000 개 요소 의 수치 변동 을 완성 한 후에 Dom 으로 통일 적 으로 리 셋 할 수 있다. 한 번 만 리 셋 하면 분명히 더러 운 리 셋 의 장점 이 크다.
결점.

감청 요소 가 많아 지면 watcher 목록 이 길 어 지고 매번 대량의 계산 을 해 야 변 경 된 데이터 블록 을 찾 을 수 있다.

$degist 를 주동 적 으로 호출 해 야 새로 고침 할 수 있 고 Getter / setter 방법 은 더욱 스마트 해 집 니 다.