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

云计算现在全世界飞速发展,其实主要也是由美国和中国的科技公司主导,亚马逊的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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值