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了,这将会调用监听函数。

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

时间: 2024-10-12 07:43:40

AngularJS 监控对象属性:$watch和$digest的相关文章

增加cacti监控对象时导致无数据无图形出现

生产环境: 操作系统:CentOS release 6.8 (Final) 数据库:mysql 5.5.49-cll-lve 问题:在众多Cacti监控的对象中,由于增加一台服务器增加了一个了监控对象Windows系统,导致cacti在监控所有对象中仅有1个对象出图出数据. 分析: 1.图像没有生成,运行# /usr/bin/php /var/www/html/cacti/poller.php --force #出现数据了吗?2.权限问题,修改权限#chmod 777 -R /var/www/h

增加cacti监控对象时导致数据库出问题

生产环境: 数据库:mysql 5.5.49-cll-lve 问题:在众多Cacti监控的对象中,由于增加了监控对象nginx,导致cacti在监控所有对象中仅有1个对象出图出数据. 分析: 1.systemutilities –>Rebuild poller cache #需要重建cache吗?2.系统时间不准确,重新设置时间  #需要更新服务器时间吗?3.图像没有生成,运行 # /usr/bin/php /var/www/html/cacti/poller.php --force #出现数据

nrpe监控对象和阀值部分注解

nrpe监控对象和阀值: 监控对象 监控阀值 主 机 资 源 主机存活: check_ping -w 3000.0,80% -c 5000.0,100% -p 5(3000毫秒响应时间内, 丢包率超过80%报警告,5000毫秒响应时间内,丢包率超过 100%报危急,一共发送5个包) 登录用户: check_user -w 5 -c 10(w为警告,c为危急) 系统负载: check_load -w 15,10,5 -c 30,25,20(1分钟,5分钟,15分钟大于对应 的等待进程数则警告或危急

一步步构建自己的AngularJS(2)——scope之$watch及$digest

在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件,.jshintrc是jshint插件的配置文件,karma.conf.js是karma的配置文件,package.json是npm的配置文件,结构其实很简单.从本节开始,会在这个代码库的基础上进行我们自己Angular的实现. 首先,在写代码之前,在命令行中输入npm test命令,让我们的测试用

在C#使用文件监控对象FileSystemWatcher的几种方案

最近在项目中有这么个需求,就是得去实时获取某个在无规律改变的文本文件中的内容.首先想到的是用程序定期去访问这个文件,因为对实时性要求很高,间隔不能超过1S,而且每次获取到文本内容都要去分发给web服务器做别的操作,而那个文本的写入有时候会频繁,1秒可能多次,但是也有可能在相当长一段时间内是没有任何写入的. 这样一来如果每秒都去访问文件的话,一个是IO问题,还有就是每次操作都会引起后端一系列程序的反应,文本在长时间内无写入的话,一秒一次的触发一系列徒劳的事情太不可取了. 最终发现了c#中的File

python_如何创建可管理的对象属性

案例: 在面向对象编程中,我们把方法作为对象的接口,自己访问对象的属性可能是不安全的,或设计上不灵活,但是使用调用方法在形式上不如访问属性简洁 繁: circle.getRadius() circle.setRadius(5.0) #!/usr/bin/python3 from math import pi class Circle(): def __init__(self, radius): self.radius = radius # 获取半径接口 def get_radius(self):

Node对象属性

1.Node对象属性一            * nodeName             * nodeType            * nodeValue * 使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象 <body> <span id="spanid">哈哈呵呵</span> <script type="text/javascript"> //获取标签对象 var span1 = d

Unit02: 读取和修改节点对象属性

[修改元素的内容和属性] 1.元素的内容 - innerHTML:获取 / 设置 元素开始标签和结束标签里的html内容: 使用固定套路: 1.删除父元素下所有子元素:parent.innerHTML=""; 1.替换父元素下所有子元素:parent.innerHTML="内容"; - innerText/textContent; 获取开始标签和结束标签里的文本内容:不包含元素: IE8          DOM标准 - nodeValue:文本节点的内容: //*

Objective-C日记-之编码对象属性

NSCoder类 1,概述 将对象的实例变量和其他数据编码为数据块,然后将他们存在到磁盘当中:以后将这些数据块读回到内存中,并且还基于保存的数据创建新的对象,也称序列化或反序列化. 2,用法 a,首先,定义一个类,使其遵守<NSCoding>协议 @interface Thingie:NSObject <NSCoding>{ NSString *name; int magicNumber; float shoeSize; NSMutableArray *subThingies; }