angualr-$apply,$digest,$watch的理解

原创 2016年08月30日 11:44:09
云计算现在全世界飞速发展,其实主要也是由美国和中国的科技公司主导,亚马逊的AWS现在是云计算的领头羊,增速非常快,而且收入在亚马逊销售中占的比例越来越大了,未来会成为亚马逊的强劲增长引擎,微软据称老二,以“移动为先,云为先”的战略,虽然移动操作系统wp失败了,在云计算市场取得不俗的市场份额,其次是中国的阿里巴巴,google,IBM站在第三阵营,阿里巴巴的增长最强劲,成为国内云计算的老大,据说阿里巴巴的云计算等于30个腾讯的云计算,100个百度云计算。当然国内还有其他的小型的,走过性化,垂直业务场景的云公司,比如京东云,网易云,新浪云,迅达云,又拍云,七牛云等等。

云计算是一种共享资源的新的生态模式,当然技术门槛很高,其实最终能够最好,并且占领大部分市场的也就是那几家巨头公司。

用马云的一句话说:未来云计算,数据都会像水,电,煤,石油,一样重要,这些都将会成为我们社会的公共资源!

angularjs是google开源的下一代移动开发框架,成为WEB应用中的一种端对端的解决方案!

本文将着重说说$apply,$digest,$watch这些核心知识。

首先我们知道angularjs的一个重要的特性就是数据双向绑定,控制器中模型改变数据可以更新在视图上,视图上更改也可以映射到模型上。

angualrjs的有一个上下文的环境,在这个上下文之外修改了model的话,angualrjs是没有办法直接将修改的数据即刻更新到视图的。那么我们就必须手动调用$apply()实现数据更新。

(1)$apply()
官方的解释:它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应。什么意思呢,通俗来说就是如果你在AngularJS上下文之外修改了model,那么你就必须要手动通过$apply让angular知道必须刷新视图了。

setTimeout(function(){
$scope.name = 'bing';
console.log($scope.name);
},2000);

这个代码我们在控制台上可以打印出name信息,但是我们的模板上{{name}}却没有更改,因为这时处于angualrjs的上下文之外,我们需要手动调用$apply(),进入上下文的环境中,然后赋值更新。
setTimeout(function(){
$scope.$apply(function() {
$scope.name = 'bing';
console.log($scope.name);
}
},2000);

这样就能实现双向绑定的更新。

(2)$digest()
$digest循环执行,其实就是循环调用$watch()函数来监听每一个的model值到底有没有改变,如果改变的话,$watch的回调函数就会实现更新视图中的值。从而实现数据的双向绑定。

(3)$watch()

$scope.$watch('name', function(newValue, oldValue) {
  //update the DOM with newValue
});

这个watch就是监听对应的model的值是否改变的,每一个model变量都会创建一个$watcher(监测者),$digest会循环调用触发这些model变量的watcher监测数据是否发生改变。

总结一下:
1、在视图中的每一个{{}}双大括号包含的model变量,都会在初始化angularjs上下文环境的时对每一个变量创建一个$watcher的监听。

2、在控制器中,$apply调用的时候,将促发$rootScope.$digest(),进入循环,将触发$watch()对每个model变量进行值对比,是否发生改变。若发生改变侧执行回调函数更新视图值,否则就不做处理,$digest()至少火循环两次,以确保model的值是否改变。

3、angularjs的封装好的指令已经默认执行$apply(),例如当我们直接时候点击使用ng-click的时候,可以直接在函数中改变model的值,就可以马上显示在视图中,因为这个指令在封装中已经默认调用了$apply的了。

4、我们自定义指令的时候,也必须在指令定义中调用$apply(),让指令能够在使用时可以直接进入angularjs的上下文。

5、大家可能有一些疑问
(1)太多变量的时候,循环watch岂不是要很久?
答:其实我们在做单页面的时候,一般不会有太多的model变量的,难道会有几万个?这样子的话,就是你的设计逻辑出问题了,变量是占内存的,如果几万个的话,相信浏览器也是卡的要命了。从一些业务场景来说一般在都是几十个,最多也就是上百个变量,所以循环执行的速度是非常快的,这个不需要担心,不过angularjs在这个设计上确实的有点瑕疵吧。

下面是一篇说的比较详细的博文:
http://www.mamicode.com/info-detail-1075238.html
版权声明:本文为博主原创文章,未经博主允许不得转载。

angularJS学习小结——$apply方法和$watch方法

引言    最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了 解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些ang...
  • u013045437
  • u013045437
  • 2016年05月09日 21:18
  • 12354

angularjs 删除作用域时清除$watch

先看下面一段代码 删除内容 查看作用域 输入内容: var app = angu...
  • jian1jian_
  • jian1jian_
  • 2017年05月05日 15:16
  • 1281

Angular中使用$watch监听object属性值的变化

Angular中的$watch可以监听属性值的变化,然后并做出相应处理。 常见用法:$scope.$watch("person", function(n, o){ //todo someth...
  • u014291497
  • u014291497
  • 2016年08月18日 22:43
  • 7517

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给...
  • p656456564545
  • p656456564545
  • 2015年12月15日 15:12
  • 287

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给...
  • u012309349
  • u012309349
  • 2016年07月26日 17:07
  • 177

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给...
  • wjqiu
  • wjqiu
  • 2016年06月10日 15:31
  • 405

补充——理解$watch ,$apply 和 $digest --- 理解数据绑定过程

一次\$digest中,包含一个angular app的范围内的所有\$watch都会被执行。
  • u012309349
  • u012309349
  • 2016年07月26日 19:23
  • 211

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

理解$watch ,$apply 和 $digest --- 理解数据绑定过程 原文地址:http://angular-tips.com/blog/2013/08/watch-how-t...
  • meinanqihao
  • meinanqihao
  • 2017年07月28日 17:33
  • 84

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2014年08月07日 05:06
  • 619

理解$watch ,$apply 和 $digest --- 理解数据绑定过程

原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给...
  • doushen1
  • doushen1
  • 2014年02月26日 10:31
  • 358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angualr-$apply,$digest,$watch的理解
举报原因:
原因补充:

(最多只允许输入30个字)