监控对象属性:$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了,这将会调用监听函数。
这些本身没什么大用,我们要的是能检测由监控函数指定的值是否确实变更了,然后调用监听函数。