AngularJS數據雙向綁定揭祕

AngularJS在$scope變量中使用髒值檢查來實現了數據雙向綁定。和Ember.js數據雙向綁定中動態設施setter和getter不同，髒治檢查允許AngularJS監視那些存在或者不存在的變量。

$scope.$watch

$scope.$watch( watchExp, listener, objectEquality );

爲了監視一個變量的變化，你可以使用$scope.$watch函數。這個函數有三個參數，它指明瞭”要觀察什麼”(watchExp)，”在變化時要發生什麼”(listener),以及你要監視的是一個變量還是一個對象。當我們在檢查一個參數時，我們可以忽略第三個參數。例如下面的例子：

$scope.name = 'Ryan';

$scope.$watch( function( ) {
    return $scope.name;
}, function( newValue, oldValue ) {
    console.log('$scope.name was updated!');
} );

代碼laycode - v1.1

AngularJS將會在$scope中註冊你的監視函數。你可以在控制檯中輸出$scope來查看$scope中的註冊項目。

你可以在控制檯中看到$scope.name已經發生了變化 – 這是因爲$scope.name之前的值似乎undefined而現在我們將它賦值爲Ryan!

對於$wach的第一個參數，你也可以使用一個字符串。這和提供一個函數完全一樣。在AngularJS的源代碼中可以看到，如果你使用了一個字符串，將會運行下面的代碼：

if (typeof watchExp == 'string' && get.constant) {
  var originalFn = watcher.fn;
  watcher.fn = function(newVal, oldVal, scope) {
    originalFn.call(this, newVal, oldVal, scope);
    arrayRemove(array, watcher);
  };
}

代碼laycode - v1.1

這將會把我們的watchExp設置爲一個函數，它也自動返回作用域中我們已經制定了名字的變量。

$$watchers

$scope中的$$watchers變量保存着我們定義的所有的監視器。如果你在控制檯中查看$$watchers，你會發現它是一個對象數組。

$$watchers = [
    {
        eq: false, // 表明我們是否需要檢查對象級別的相等
        fn: function( newValue, oldValue ) {}, // 這是我們提供的監聽器函數
        last: 'Ryan', // 變量的最新值
        exp: function(){}, // 我們提供的watchExp函數
        get: function(){} // Angular's編譯後的watchExp函數
    }
];

代碼laycode - v1.1

$watch函數將會返回一個deregisterWatch函數。這意味着如果我們使用$scope.$watch對一個變量進行監視，我們也可以在以後通過調用某個函數來停止監視。

$scope.$apply

當一個控制器/指令/等等東西在AngularJS中運行時，AngularJS內部會運行一個叫做$scope.$apply的函數。這個$apply函數會接收一個函數作爲參數並運行它，在這之後纔會在rootScope上運行$digest函數。

AngularJS的$apply函數代碼如下所示：

$apply: function(expr) {
    try {
      beginPhase('$apply');
      return this.$eval(expr);
    } catch (e) {
      $exceptionHandler(e);
    } finally {
      clearPhase();
      try {
        $rootScope.$digest();
      } catch (e) {
        $exceptionHandler(e);
        throw e;
      }
    }
}

代碼laycode - v1.1

上面代碼中的expr參數就是你在調用$scope.$apply()時傳遞的參數 – 但是大多數時候你可能都不會去使用$apply這個函數，要用的時候記得給它傳遞一個參數。

下面我們來看看ng-keydown是怎麼來使用$scope.$apply的。爲了註冊這個指令，AngularJS會使用下面的代碼。

var ngEventDirectives = {};
forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(name) {
    var directiveName = directiveNormalize('ng-' + name);
    ngEventDirectives[directiveName] = ['$parse', function($parse) {
      return {
        compile: function($element, attr) {
          var fn = $parse(attr[directiveName]);
          return function ngEventHandler(scope, element) {
            element.on(lowercase(name), function(event) {
              scope.$apply(function() {
                fn(scope, {$event:event});
              });
            });
          };
        }
      };
    }];
  }
);

代碼laycode - v1.1

上面的代碼做的事情是循環了不同的類型的事件，這些事件在之後可能會被觸發並創建一個叫做ng-[某個事件]的新指令。在指令的compile函數中，它在元素上註冊了一個事件處理器，它和指令的名字一一對應。當事件被出發時，AngularJS就會運行scope.$apply函數，並讓它運行一個函數。

只是單向數據綁定嗎？

上面所說的ng-keydown只能夠改變和元素值相關聯的$scope中的值 – 這只是單項數據綁定。這也是這個指令叫做ng-keydown的原因，只有在keydown事件被觸發時，能夠給與我們一個新值。

但是我們想要的是雙向數據綁定！

我們現在來看一看ng-model。當你在使用ng-model時，你可以使用雙向數據綁定 – 這正是我們想要的。AngularJS使用$scope.$watch（視圖到模型）以及$scope.$apply（模型到視圖）來實現這個功能。

ng-model會把事件處理指令(例如keydown)綁定到我們運用的輸入元素上 – 這就是$scope.$apply被調用的地方！而$scope.$watch是在指令的控制器中被調用的。你可以在下面代碼中看到這一點：

$scope.$watch(function ngModelWatch() {
    var value = ngModelGet($scope);

    //如果作用域模型值和ngModel值沒有同步
    if (ctrl.$modelValue !== value) {

        var formatters = ctrl.$formatters,
            idx = formatters.length;

        ctrl.$modelValue = value;
        while(idx--) {
            value = formatters[idx](value);
        }

        if (ctrl.$viewValue !== value) {
            ctrl.$viewValue = value;
            ctrl.$render();
        }
    }

    return value;
});

代碼laycode - v1.1

如果你在調用$scope.$watch時只爲它傳遞了一個參數，無論作用域中的什麼東西發生了變化，這個函數都會被調用。在ng-model中，這個函數被用來檢查模型和視圖有沒有同步，如果沒有同步，它將會使用新值來更新模型數據。這個函數會返回一個新值，當它在$digest函數中運行時，我們就會知道這個值是什麼！

爲什麼我們的監聽器沒有被觸發？

如果我們在$scope.$watch的監聽器函數中停止這個監聽，即使我們更新了$scope.name，該監聽器也不會被觸發。

正如前面所提到的，AngularJS將會在每一個指令的控制器函數中運行$scope.$apply。如果我們查看$scope.$apply函數的代碼，我們會發現它只會在控制器函數已經開始被調用之後纔會運行$digest函數 – 這意味着如果我們馬上停止監聽，$scope.$watch函數甚至都不會被調用！但是它究竟是怎樣運行的呢？

$digest函數將會在$rootScope中被$scope.$apply所調用。它將會在$rootScope中運行digest循環，然後向下遍歷每一個作用域並在每個作用域上運行循環。在簡單的情形中，digest循環將會觸發所有位於$$watchers變量中的所有watchExp函數，將它們和最新的值進行對比，如果值不相同，就會觸發監聽器。

當digest循環運行時，它將會遍歷所有的監聽器然後再次循環，只要這次循環發現了”髒值”，循環就會繼續下去。如果watchExp的值和最新的值不相同，那麼這次循環就會被認爲發現了髒值。理想情況下它會運行一次，如果它運行超10次，你會看到一個錯誤。

因此當$scope.$apply運行的時候，$digest也會運行，它將會循環遍歷$$watchers，只要發現watchExp和最新的值不相等，變化觸發事件監聽器。在AngularJS中，只要一個模型的值可能發生變化，$scope.$apply就會運行。這就是爲什麼當你在AngularJS之外更新$scope時，例如在一個setTimeout函數中，你需要手動去運行$scope.$apply()：這能夠讓AngularJS意識到它的作用域發生了變化。

創建自己的髒值檢查

到此爲止，我們已經可以來創建一個小巧的，簡化版本的髒值檢查了。當然，相比較之下，AngularJS中實現的髒值檢查要更加先進一些，它提供瘋了異步隊列以及其他一些高級功能。

設置Scope

Scope僅僅只是一個函數，它其中包含任何我們想要存儲的對象。我們可以擴展這個函數的原型對象來複制$digest和$watch。我們不需要$apply方法，因爲我們不需要在作用域的上下文中執行任何函數 – 我們只需要簡單的使用$digest。我們的Scope的代碼如下所示：

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( ) {

};

Scope.prototype.$digest = function( ) {

};

代碼laycode - v1.1

我們的$watch函數需要接受兩個參數，watchExp和listener。當$watch被調用時，我們需要將它們push進入到Scope的$$watcher數組中。

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( watchExp, listener ) {
    this.$$watchers.push( {
        watchExp: watchExp,
        listener: listener || function() {}
    } );
};

Scope.prototype.$digest = function( ) {

};

代碼laycode - v1.1

你可能已經注意到了，如果沒有提供listener，我們會將listener設置爲一個空函數 – 這樣一來我們可以$watch所有的變量。

接下來我們將會創建$digest。我們需要來檢查舊值是否等於新的值，如果二者不相等，監聽器就會被觸發。我們會一直循環這個過程，直到二者相等。這就是”髒值”的來源 – 髒值意味着新的值和舊的值不相等！

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( watchExp, listener ) {
    this.$$watchers.push( {
        watchExp: watchExp,
        listener: listener || function() {}
    } );
};

Scope.prototype.$digest = function( ) {
    var dirty;

    do {
            dirty = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newValue = this.$$watchers[i].watchExp(),
                    oldValue = this.$$watchers[i].last;

                if( oldValue !== newValue ) {
                    this.$$watchers[i].listener(newValue, oldValue);

                    dirty = true;

                    this.$$watchers[i].last = newValue;
                }
            }
    } while(dirty);
};

代碼laycode - v1.1

接下來，我們將創建一個作用域的實例。我們將這個實例賦值給$scope。我們接着會註冊一個監聽函數，在更新$scope之後運行$digest！

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( watchExp, listener ) {
    this.$$watchers.push( {
        watchExp: watchExp,
        listener: listener || function() {}
    } );
};

Scope.prototype.$digest = function( ) {
    var dirty;

    do {
            dirty = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newValue = this.$$watchers[i].watchExp(),
                    oldValue = this.$$watchers[i].last;

                if( oldValue !== newValue ) {
                    this.$$watchers[i].listener(newValue, oldValue);

                    dirty = true;

                    this.$$watchers[i].last = newValue;
                }
            }
    } while(dirty);
};


var $scope = new Scope();

$scope.name = 'Ryan';

$scope.$watch(function(){
    return $scope.name;
}, function( newValue, oldValue ) {
    console.log(newValue, oldValue);
} );

$scope.$digest();

代碼laycode - v1.1

成功了！我們現在已經實現了髒值檢查(雖然這是最簡單的形式)！上述代碼將會在控制檯中輸出下面的內容：

Ryan undefined

這正是我們想要的結果 – $scope.name之前的值是undefined，而現在的值是Ryan。

現在我們把$digest函數綁定到一個input元素的keyup事件上。這就意味着我們不需要自己去調用$digest。這也意味着我們現在可以實現雙向數據綁定！

var Scope = function( ) {
    this.$$watchers = [];   
};

Scope.prototype.$watch = function( watchExp, listener ) {
    this.$$watchers.push( {
        watchExp: watchExp,
        listener: listener || function() {}
    } );
};

Scope.prototype.$digest = function( ) {
    var dirty;

    do {
            dirty = false;

            for( var i = 0; i < this.$$watchers.length; i++ ) {
                var newValue = this.$$watchers[i].watchExp(),
                    oldValue = this.$$watchers[i].last;

                if( oldValue !== newValue ) {
                    this.$$watchers[i].listener(newValue, oldValue);

                    dirty = true;

                    this.$$watchers[i].last = newValue;
                }
            }
    } while(dirty);
};


var $scope = new Scope();

$scope.name = 'Ryan';

var element = document.querySelectorAll('input');

element[0].onkeyup = function() {
    $scope.name = element[0].value;

    $scope.$digest();
};

$scope.$watch(function(){
    return $scope.name;
}, function( newValue, oldValue ) {
    console.log('Input value updated - it is now ' + newValue);

    element[0].value = $scope.name;
} );

var updateScopeValue = function updateScopeValue( ) {
    $scope.name = 'Bob';
    $scope.$digest();
};

代碼laycode - v1.1

使用上面的代碼，無論何時我們改變了input的值，$scope中的name屬性都會相應的發生變化。這就是隱藏在AngularJS神祕外衣之下數據雙向綁定的祕密！

本文參考自How AngularJS implements dirty checking and how to replicate it ourselves，原文地址http://ryanclark.me/how-angularjs-implements-dirty-checking/

AngularJS 數據雙向綁定揭祕

AngularJS數據雙向綁定揭祕

$scope.$watch

$$watchers

$scope.$apply

只是單向數據綁定嗎？

但是我們想要的是雙向數據綁定！

爲什麼我們的監聽器沒有被觸發？

創建自己的髒值檢查

設置Scope

JavaSript模塊規範 - AMD與CMD

AngularJS 數據雙向綁定揭祕

JS 實用技巧總結

單頁應用多路由預渲染指南

AngularJS開發人員最常犯的10個錯誤

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結