AngularJS 监控对象属性：$watch和$digest

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

监控对象属性：$watch和$digest

$watch和$digest是相辅相成的。两者一起，构成了Angular作用域的核心：数据变化的响应。如果你学习过WPF，并基于WPF使用过一些MVVM框架，那你一定知道 INotifyPropertyChanged 这个接口，实现这个借口会让我们的对象在数据改变时通知UI，来呈现最新的数据。$watch和$digest其实也是同样的原理。

使用$watch，可以在Scope上添加一个监听器。当Scope上发生变更时，监听器会收到提示。给$watch指定如下两个函数，就可以创建一个监听器：

（1）、一个监控函数，用于指定所关注的那部分数据

（2）、一个监听函数，用于在数据变更的时候接受提示。

作为一名Angular用户，一般来说，是监控一个表达式，而不是使用监控函数。监控表达式是一个字符串，比如说“user.firstName”，通常在数据绑定，指令的属性，或者JavaScript代码中指定，它被Angular解析和编译成一个监控函数。在这篇文章的后面部分我们会探讨这是如何做的。在这篇文章中，我们将使用稍微低级的方法直接提供监控功能。

为了实现$watch，我们需要存储注册过的所有监听器。我们在Scope构造函数上添加一个数组：

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

在Angular框架中，双美元符前缀$$表示这个变量被当作私有的来考虑，不应当在外部代码中调用。

现在我们可以定义$watch方法了。它接受两个函数作参数，把它们存储在$$watchers数组中。我们需要在每个Scope实例上存储这些函数，所以要把它放在Scope的原型上：

Scope.prototype.$watch = function(watchFn, listenerFn) {
var watcher = {
watchFn: watchFn,
listenerFn: listenerFn
};
this.$$watchers.push(watcher);
};

另外一面就是$digest函数。它执行了所有在作用域上注册过的监听器。我们来实现一个它的简化版，遍历所有监听器，调用它们的监听函数：

Scope.prototype.$digest = function() {
_.forEach(this.$$watchers, function(watch) {
watch.listenerFn();
});
};

现在我们可以添加监听器，然后运行$digest了，这将会调用监听函数。

这些本身没什么大用，我们要的是能检测由监控函数指定的值是否确实变更了，然后调用监听函数。