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了,这将会调用监听函数。
这些本身没什么大用,我们要的是能检测由监控函数指定的值是否确实变更了,然后调用监听函数。
AngularJS 监控对象属性:$watch和$digest的更多相关文章
- Angular:手动脏检查/$apply/$digest和监控对象/$watch
声明:借鉴好多chm资料.视频.PDF总结如下: 一.$apply的引入 View <div ng-app=""> <div ng-controller=&quo ...
- 删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性
使用本节介绍的方法替换子节点可能会导致浏览器的内存占用问题,尤其是在 IE 中,问题更加明显.在删除带有事件处理程序或引用了其他 JavaScript 对象子树时,就有可能导致内存占用问题.假设 某个 ...
- 使用文件监控对象FileSystemWatcher实现数据同步
最近在项目中有这么个需求,就是得去实时获取某个在无规律改变的文本文件中的内容.首先想到的是用程序定期去访问这个文件,因为对实时性要求很高,间隔不能超过1S,而且每次获取到文本内容都要去分发给WEB服务 ...
- C#使用文件监控对象FileSystemWatcher 实现数据同步
在C#使用文件监控对象FileSystemWatcher 实现数据同步 2013-12-12 18:24 by 幕三少, 352 阅读, 3 评论, 收藏, 编辑 最近在项目中有这么个需求,就是得去实 ...
- Prometheus基于consul自动发现监控对象 https://www.iloxp.com/archive/11/
Prometheus 监控目标为什么要自动发现 频繁对Prometheus配置文件进行修改,无疑给运维人员带来很大的负担,还有可能直接变成一个“配置小王子”,即使是配置小王子也会存在人为失误的情况 ...
- JavaScript RegExp ——对象,语法,修饰符,方括号,元字符,量词,对象方法,对象属性
㈠RegExp 对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. ㈡语法 var patt=new RegExp(pattern,m ...
- Emit动态生成代理类用于监控对象的字段修改
利用Emit动态生成代理对象监控对象哪些字段被修改,被修改为什么值 被Register的对象要监控的值必须是Virtual虚类型 必须使用CreateInstance创建对象 必须使用DynamicP ...
- matlab中get查询图形对象属性
来源:https://ww2.mathworks.cn/help/matlab/ref/get.html?searchHighlight=get&s_tid=doc_srchtitle get ...
- Knockout 监控数组对象属性
代码: function Product(ProductID,ProductName,ProductNum,Result,Price) { this.ProductID = ko.observable ...
随机推荐
- Swift入门篇-字符串和字符
今天主要是介绍一下字符串的用法 ,字符串的语法和object-c语法不太一样,但是思想是一样,就是写法不太一样.如果您对.net和java语法比较熟悉的话,那您几乎没有深压力.如果您对swift 基本 ...
- activemq安装和启动
安装环境:linux redhat activemq版本:5.8.0 1.从http://activemq.apache.org/download.html地址下载apache-activemq-5. ...
- 【Android源代码下载】收集整理android界面UI效果源码
在Android开发中,Android界面UI效果设计一直都是很多童鞋关注的问题,今天给大家分享下大神收集整理的多个android界面UI效果,都是源码,都是干货,贡献给各位网友! 话不多说,直接上效 ...
- Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- 如何提高nodejs程序的稳定性,健壮性
在网上看到一些帖子,吐糟,质疑nodejs 程序的稳定性,为什么呢?其一,可能这个和javascript有关吧,node是拿javascript去实现的,而javascript又被称为是“世界上误解最 ...
- nginx 反向代理 与 Apache backend的配置联合配置
nginx 反向代理 与 Apache backend的配置联合配置: 说明: nginx 将http映射到Apache上的特定子目录. 配置方法步骤: 1. 设置域名, 子域名映射到指定服务器ip ...
- 画六边形-mat
%% theta = linspace(0,2*pi,7); D=2; %边长 X=1; %中心横坐标 Y=2; %中心纵坐标 plot(D*cos(theta)+X,D*sin(theta) + Y ...
- PyCharm 134 单元测试输出大量空行解决方案
在某次BugFix中,某哥们儿在/helper/pycharm/tcunittest.py加了个这: 各位亲们可以把True改为False即可解决大量空行的问题.
- How to get the Current Controller Name, Action, or ID in ASP.NET MVC
public static class HtmlRequestHelper { public static string Id(this HtmlHelper htmlHelper) { var ro ...
- 开发WebApp之PC客户端
HTML5的跨平台性还是很好的,苹果.Android手机都可以用,所在最近使用Jquery Mobile开发了一个手机端应用程序,一次开发,多个平台使用. 但我们的很多客户使用的是还是IE浏览器,有的 ...