基于值的Dirty检查
目前为止我们已经使用严格的相等操作符===来比较新老值。在大多数情况下这样就已经是比较好的，因为它能检测所有基本类型的变化同时能检测一个对象或数组是否变成另一个新的对象或数组。但是Angular还有另外一种方式用来检测对象或者数组内部的某个属性或者元素的变化。换句话说就是你可以监视值的变化，而不仅仅只有引用。
这种dirty检查是通过在$watch函数中提供一个额外的可选布尔标志而达到的。当标志为true时，基于值的检测被启用。让我们来添加一个测试：
test/scope_spec.js
it("conpares based on value if enabled",function(){
scope.aValue = [1,2,3];
scope.counter = 0 ;
scope.$watch(
function(scope){ return scope.aValue; }
function(newValue,oldValue,scope){
scope.counter++;
},
true
);
scope.$digest();
expect(scope.counter).toBe(1);
scope.aValue.push(4);
scope.$digest();
expect(scope.counter).toBe(2);
});
在这个测试里面的无论scope.aValue数组什么时候被改变计数器都会增长。当我们为数组里面增加一个元素时，我们期望它能够注意到这个变化，但是实际上它并没有。scope.aValue依然是同一个数组，只是里面的内容发生了变化（引用没变，值发生了变化）。
首先让我们重新定义$watch为其添加布尔值的标志位并且把它存储在监视器中：
src/scope.js
Scope.prototype.$watch = function(watchFn,listenerFn,valueEq){
var watcher = {
watchFn : watchFn,
listenerFn : listenerFn || function(){},
valueEq : !!valueEq,
last : initWatchVal
};
this.$$watchers.push(watcher);
this.$$lastDirtyWatch = null;
};
在上面代码中，我们所做的就是在监视器中添加布尔标志位，并通过两次的取反操作强制确保它必为一个布尔值。当一个用户调用$watch而没有创第三个参数时，valueEq将会是undefined,而通过两次取反它将变成false。
基于值的dirty检查意味着如果旧值或者新值是对象或者数组我们就必须迭代它们所包含的所有属性或者元素。如果它们的值有任何的不同之处那么监视器就是dirty的。如果值包含另外一个对象或者数组，那么这个对象或数组将递归似的比较值。
Angular使用它自己的比较检查函数，但是我们将使用Lo-Dash里面提供的函数来进行代替，因为它已经实现了我们想要的功能。让我定义一个新的函数它使用两个值和一个布尔标识作为参数，并将两个值进行比较：
src/scope.js
Scope.prototype.$$areEqual = function(newValue,oldValue,valueEq){
if(valueEq){
return _.isEqual(newValue,oldValue);
}else{
return newValue === oldValue;
}
}
为了注意到值的变化，我们还需要改变在各个监视器中存储旧值的方式。只存储当前值的引用显然已经不够了，因为任何在值上的改变也将应用于我们的监视中。我们永远不会注意到任何更改因为$$areEqual从一开始就将得到两个引用，并且这两个引用的值并不会发生改变。由于这个原因我们需要对值进行深拷贝并将其存储。
就像Angular使用它自己的深拷贝函数进行相等的检查，现在我们将使用Lo-Dash的一个方法来实现。
让我们更新$digestOnce让它使用新的$$areEqual函数并拷贝最后一个引用：
src/scope.js
Scope.prototype.$$digestOnce = function(){
var self = this;
var newValue,oldValue,dirty;
_.forEach(this.$$watchers,function(watcher){
newValue = watcher.watchFn(self);
oldValue = watcher.last;
if(!self.$$areEqual(newValue,oldValue,watcher.valueEq)){
self.$$lastDirtyWatch = watcher;
watcher.last = (watcher.valueEq ? _.cloneDeep(newValue) : newValue);
watcher.listenerFn(newValue,
(oldValue === initWatchVal ? newValue : oldValue),
self);
dirty = true;
}else if(self.$$lastDirtyWatch === watcher){
return false;
}
});
return dirty;
}
测试通过，现在我们的代码已经支持两种相等检查了。
检查值的操作显然比检查引用的操作更为复杂。涉及到的内容也更多。检查一个嵌套数据所花费的时间，进行一次深拷贝所占用的内存大小。这就是为什么Angular没有默认进行基于值的dirty检查。你需要显式地设置标志来启用它。
Angular还有第三种dirty检查机制：集合监视("Collection Watching")。我们将在第3章的时候实现它。
在进行值的比较之前，还有一个JavaScript所独有的问题需要我们进行处理。
网友评论