监控对象属性:$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的更多相关文章

  1. Angular:手动脏检查/$apply/$digest和监控对象/$watch

    声明:借鉴好多chm资料.视频.PDF总结如下: 一.$apply的引入 View <div ng-app=""> <div ng-controller=&quo ...

  2. 删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性

    使用本节介绍的方法替换子节点可能会导致浏览器的内存占用问题,尤其是在 IE 中,问题更加明显.在删除带有事件处理程序或引用了其他 JavaScript 对象子树时,就有可能导致内存占用问题.假设 某个 ...

  3. 使用文件监控对象FileSystemWatcher实现数据同步

    最近在项目中有这么个需求,就是得去实时获取某个在无规律改变的文本文件中的内容.首先想到的是用程序定期去访问这个文件,因为对实时性要求很高,间隔不能超过1S,而且每次获取到文本内容都要去分发给WEB服务 ...

  4. C#使用文件监控对象FileSystemWatcher 实现数据同步

    在C#使用文件监控对象FileSystemWatcher 实现数据同步 2013-12-12 18:24 by 幕三少, 352 阅读, 3 评论, 收藏, 编辑 最近在项目中有这么个需求,就是得去实 ...

  5. Prometheus基于consul自动发现监控对象 https://www.iloxp.com/archive/11/

      Prometheus 监控目标为什么要自动发现 频繁对Prometheus配置文件进行修改,无疑给运维人员带来很大的负担,还有可能直接变成一个“配置小王子”,即使是配置小王子也会存在人为失误的情况 ...

  6. JavaScript RegExp ——对象,语法,修饰符,方括号,元字符,量词,对象方法,对象属性

    ㈠RegExp 对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. ㈡语法 var patt=new RegExp(pattern,m ...

  7. Emit动态生成代理类用于监控对象的字段修改

    利用Emit动态生成代理对象监控对象哪些字段被修改,被修改为什么值 被Register的对象要监控的值必须是Virtual虚类型 必须使用CreateInstance创建对象 必须使用DynamicP ...

  8. matlab中get查询图形对象属性

    来源:https://ww2.mathworks.cn/help/matlab/ref/get.html?searchHighlight=get&s_tid=doc_srchtitle get ...

  9. Knockout 监控数组对象属性

    代码: function Product(ProductID,ProductName,ProductNum,Result,Price) { this.ProductID = ko.observable ...

随机推荐

  1. Swift入门篇-字符串和字符

    今天主要是介绍一下字符串的用法 ,字符串的语法和object-c语法不太一样,但是思想是一样,就是写法不太一样.如果您对.net和java语法比较熟悉的话,那您几乎没有深压力.如果您对swift 基本 ...

  2. activemq安装和启动

    安装环境:linux redhat activemq版本:5.8.0 1.从http://activemq.apache.org/download.html地址下载apache-activemq-5. ...

  3. 【Android源代码下载】收集整理android界面UI效果源码

    在Android开发中,Android界面UI效果设计一直都是很多童鞋关注的问题,今天给大家分享下大神收集整理的多个android界面UI效果,都是源码,都是干货,贡献给各位网友! 话不多说,直接上效 ...

  4. Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  5. 如何提高nodejs程序的稳定性,健壮性

    在网上看到一些帖子,吐糟,质疑nodejs 程序的稳定性,为什么呢?其一,可能这个和javascript有关吧,node是拿javascript去实现的,而javascript又被称为是“世界上误解最 ...

  6. nginx 反向代理 与 Apache backend的配置联合配置

    nginx 反向代理 与 Apache backend的配置联合配置: 说明: nginx 将http映射到Apache上的特定子目录. 配置方法步骤: 1.  设置域名, 子域名映射到指定服务器ip ...

  7. 画六边形-mat

    %% theta = linspace(0,2*pi,7); D=2; %边长 X=1; %中心横坐标 Y=2; %中心纵坐标 plot(D*cos(theta)+X,D*sin(theta) + Y ...

  8. PyCharm 134 单元测试输出大量空行解决方案

    在某次BugFix中,某哥们儿在/helper/pycharm/tcunittest.py加了个这: 各位亲们可以把True改为False即可解决大量空行的问题.

  9. 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 ...

  10. 开发WebApp之PC客户端

    HTML5的跨平台性还是很好的,苹果.Android手机都可以用,所在最近使用Jquery Mobile开发了一个手机端应用程序,一次开发,多个平台使用. 但我们的很多客户使用的是还是IE浏览器,有的 ...