码迷,mamicode.com
首页 > Web开发 > 详细

浅谈angularJs中的$watch的用法

时间:2015-11-12 13:48:50      阅读:596      评论:0      收藏:0      [点我收藏+]

标签:

大家都是到angularJS中非常屌的一个性能,数据双向绑定,这就意味着view中的数据发生任何变化的时候,这个变化也会相应的反映到scope上,也就是说scope的模型会动态更新。所以有时候我们的需求可能是要监控摸个model的变化,下面就简单的说下这个操作以及实现原理

 

$watch

$watch可以很方便且简单的监控一个model的变化,举个栗子:

<html>
<head>
    <script src=‘./lib.angular.min.js‘></script>
</head>
<body ng-app=‘watch‘>
    <input ng-model=‘name‘ type=‘text‘/>
    <div>change count: {{count}}</div>
    <script>
        angular.module(‘watch‘,[])
                     .run([‘$rootScope‘,function($rootScope){
                            $rootScope.count = 0;
                            $rootScope.name = ‘Alfred‘;
                            $rootScope.$watch(‘name‘,function(){
                                $rootScope.count++;
                            })
                     }]);
    </script>
</body>
</html>

上面这个代码就是用来监控name的变化的,每次当我们在input输入框中输入一个值的时候,$rootScope中的count就会对应的+1;

 

在angularJS的内部,每当我们对name的值进行修改的时候,angularJS内部中的$digest就会被调用一次,(下面在详细的说$digest的原理),并在运行结束之后检查我们用$watch来监控的模型,如何和上一次执行$digest之前相比发生变化了,则执行$watch中的回调函数。

 

然而!!!在我们实际的开发中,仅仅实现对一个原始类型的数据监控是远远不能够满足所需的,对于原始类型的数据,如果我们使用了一次赋值操作,则这个原始类型的数据变量会真正的别赋值一次,然而对于引用类型的变量,进行赋值时,仅仅是将赋值的变量指向了这个引用类型。

可以看下下面的栗子:

<html>
<head>
    <script src=‘./lib.angular.min.js‘></script>
</head>
<body ng-app=‘watch‘>
    <div ng-repeat=‘item in items‘>
        <input ng-model=‘item.a‘/><span>{{item.a}}</span>
    </div>
    <div>change count: {{count}}</div>
    <script>
        angular.module(‘watch‘,[])
                     .run([‘$rootScope‘,function($rootScope){
                            $rootScope.count = 0;
                            $rootScope.items = [
                            { "a": 1 },
                            { "a": 2 },
                            { "a": 3 },
                            { "a": 4 }
                            ]
                            $rootScope.$watch(‘items‘,function(){
                                $rootScope.count++;
                            })
                     }]);
    </script>
</body>
 </html>

在这个栗子中我们就会发现,不管我们怎么改变其中的值,count都不会发生变化的。而这个就是我们上面说那样,在说明这个之前,我们在说明下$watch的第三个参数,一般$watch函数的前两个参数是必传的(监控对象,回调函数),第三个参数默认为false,这样的话我们进行的监控叫做引用监控,这个意思就是监控对象的应用没有发生变化的时候就不算对象发生了变化,具体的来说,上面的例子,就算items的属性发生了变化,只要items的引用没有发生变化,$watch就都当做没有看见,但是比如讲一个数组赋值给items时,这个时候$watch就看不下去了(给你阳光你就灿烂了还)。

相反,如果第三个参数设置为true的时候,那么我们的监控叫做“全等监控”,此时的$watch的要求就是比较苛刻了,只要他监控的对象有一点点变化时,$watch就会跳出来,卧槽!你居然还敢动!!!

 

当然值得提一下的是:为什么第三个参数加个true,这么方便了我们还不加呢?!当然是牵涉到性能的问题啦!全等监控运行起来的时候是先监控到整个对象,然后在每一次吧$diges跑起来之前先用angualr.copy()将整个对象先拷贝一遍之后再调用angular.equal()方法来进行比较,所以这一监控可能会消耗大量的资源!

 

在angularJS 1.1.4又出来了一个$watchCollection()方法,专门来监控数组集合的,他的性能介于引用监控和全等监控之间,它不会对数组的每一项内容 进行监控,而是当数组的pop和push时候做出反应。具体的栗子咱就不多赘述了。


浅谈angularJs中的$watch的用法

标签:

原文地址:http://my.oschina.net/u/2491705/blog/529242

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!