关闭

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

标签: angualrjsapplydigestwatch
298人阅读 评论(0) 收藏 举报
分类:
云计算现在全世界飞速发展,其实主要也是由美国和中国的科技公司主导,亚马逊的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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:177762次
    • 积分:2871
    • 等级:
    • 排名:第12469名
    • 原创:98篇
    • 转载:45篇
    • 译文:1篇
    • 评论:35条
    最新评论