博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS 监控对象属性:$watch和$digest
阅读量:4698 次
发布时间:2019-06-09

本文共 1201 字,大约阅读时间需要 4 分钟。

监控对象属性:$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了,这将会调用监听函数。

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

转载于:https://www.cnblogs.com/wywnet/p/5069441.html

你可能感兴趣的文章
W3100SM-S 短信猫代码发送 上
查看>>
Linux IO模式及 select、poll、epoll详解
查看>>
MVC3和MVC4内置Razor引擎的差异
查看>>
Linux内核
查看>>
request.setAttribute()与getParameter() 的区别
查看>>
Log4j知识汇总
查看>>
20120918-LIST类定义《数据结构与算法分析》
查看>>
《linux c编程指南》学习手记1
查看>>
【JavaScript】各种事件
查看>>
java解析XML大全(转)
查看>>
移上显示大图
查看>>
凯撒密码、GDP格式化输出、99乘法表
查看>>
document.compatMode介绍
查看>>
CSS超全笔记(适合新手入门)
查看>>
Git的使用的简单介绍
查看>>
(淘宝无限适配)手机端rem布局详解(转载非原创)
查看>>
TCP之1460MSS和1448负载
查看>>
combobox的值从主页面传递到子页面
查看>>
自定义博客样式
查看>>
mac安装 配置 ant
查看>>