详解AngularJS中的$watch -

bijian1013

浏览: 3238166 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

详解AngularJS中的$watch

博客分类：

AngularJS

JavaScript LAngularJS $watch

一.使用$watch监控数据模型的变化

在scope内置的所有函数中，用得最多的可能就是$watch函数了，当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数），实际上只要能够被当作属性访问到，或者可以当作一个JavaScript函数被计算出来，就可以被$watch函数监控。它的函数签名为：

$watch(watchFn, watchAction, deepLWatch)

其中每个参数的详细含义如下：

watchFn：该参数是一个带有Angular表达式或者函数的字符串，它会返回被监控的数据模型的当前值。这个表达式将会被执人行很多次，所以要保证它不会产生其他副作用。也就是说，要保证它可以被调用很多次而不会改变状态。基于同样的原因，监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular表达式，那么它将会针对调用它的那个作用域中的对象而执行。

watchAction：这是一个函数或者表达式，当watchFn发生变化时会被调用。如果是函数的形式，它将会接收到watchFn的新旧两个值，以及作用域对象的引用。其函数签名为function(newValue,oldValue,scope)。

deepWatch：如果设置为true，这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素，或者对象上的所有属性，而不只是监控一个简单的值，你就可以使用这个参数。由于Angular需要遍历数组或者对象，如果集合比较大，那么运算负担就会比较重。

$watch函数会返回一个函数，当你不再需要接收变更通知时，可以用这个返回的函数注销监控器。

如果我们需要监控一个属性，然后接着注销监控，我们可以使用以下代码：

...
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
...
dereg();

例如，当用户添加到购物车中的商品价值超过100美元的时候，我们给他10美元的折扣。实例如下：

<html ng-app='myApp'>
<head>
	<title>Watch实例</title>
</head>
<body ng-controller='CartController'>
	<h1>您的订单</h1>
	<div ng-repeat='item in items'>
		<span>{{item.title}}</span>
		<input ng-model='item.quantity'>
		<span>{{item.price | currency}}</span>
		<span>{{item.price * item.quantity | currency}}</span>
		<button ng-click="remove($index)">Remove</button>
	</div>
	<div>Total:{{totalCart() | currency}}</div>
	<div>Discount:{{bill.discount | currency}}</div>
	<div>Subtotal:{{subtotal() | currency}}</div>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[])
		myApp.controller('CartController', function($scope) {
			$scope.bill = {};
			$scope.items = [{title:'西瓜',quantity:8,price:3.95},{title:'西红柿',quantity:17,price:12.95},{title:'苹果',quantity:5,price:6.95}];
			$scope.remove = function(index) {
				$scope.items.splice(index,1);
			};
			$scope.totalCart = function() {
				var total = 0;
				for(var i=0,len=$scope.items.length;i<len;i++) {
					total = total + $scope.items[i].price * $scope.items[i].quantity;
				}
				return total;
			};
			$scope.subtotal = function() {
				return $scope.totalCart() - $scope.bill.discount;
			};
			function calculateDiscount(newValue, oldValue, scope) {
				$scope.bill.discount = newValue > 100 ? 10:0;
			}
			$scope.$watch($scope.totalCart, calculateDiscount);
		});
	</script>
</body>
</html>

运行效果：

将西红柿、苹果Remove后，折扣变为了0。

注意CartController底部，我们在totalCart()的值上面设置了一监控，用来计算此次购物的总价。只要这个值发生变化，监控器就会调用calculateDiscount()，然后我们就可以把折扣设置为相应的值。如果总价超过100美元，我们将会把折扣设置为10美元。否则，折扣为0。

二.watch()中的性能注意事项

上面的例子可以正确的运行，但是却存在潜在的性能问题。如果你在totalCart()中打一个调试断点，就会发现在渲染这个页面时，该函数被调用了6次。虽然在当前这个应用中它所引起的性能问题并不明显，但是在更加复杂的应用中，运行6次就会成为一个问题。

为什么是6次呢？其中3次我们可以很容易跟踪到，因为在以下每种情况下它都会运行一次：

a.模板{{totalCart() | currency}}

b.subtotal()函数

c.$watch函数

然后Angular把以上整个过程又重复了一遍，最终就是6次。Angular这样做的目的是，检测模型中的变更已经被完整地进行了传播，并且模型已经被设置好。Angular的做法是，把所有的被监控的属性都拷贝一份，然后把它们和当前的值进行比较，看看是否发生了变化。实际上，Angular可能会把以上过程运行10次，从而确保进行了完整的传播。如果经过10次重复之后被监控的属性还在发生变化，Angular将会报错并退出。如果出现了这种情况，你可能需要解决循环依赖的问题。

有人开发了一个叫做Object.observe()(http://updates.html5rocks.com/2012/11/Respond-to-change-with-object-observe)的底层本地化实现。实现了这一点之后，Angular将会在所有存在此实现的地方自动使用Object.observe()，让你的数据绑定操作就像本地化代码一样快速。

Angular带有一个很好的Chrome调试插件Batarang，它会自动为你指出哪些数据绑定操作比较昂贵。

有几种方法可以解决这个问题。一种方法是监控items数组的变化，然后重新计算$scope属性中的总价、折扣和小计值。如下所示：

<html ng-app='myApp'>
<head>
	<title>Watch实例</title>
</head>
<body ng-controller='CartController'>
	<h1>您的订单</h1>
	<div ng-repeat='item in items'>
		<span>{{item.title}}</span>
		<input ng-model='item.quantity'>
		<span>{{item.price | currency}}</span>
		<span>{{item.price * item.quantity | currency}}</span>
		<button ng-click="remove($index)">Remove</button>
	</div>
	<div>Total:{{bill.total | currency}}</div>
	<div>Discount:{{bill.discount | currency}}</div>
	<div>Subtotal:{{bill.subtotal | currency}}</div>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[])
		myApp.controller('CartController', function($scope) {
			$scope.bill = {};
			$scope.items = [{title:'西瓜',quantity:8,price:3.95},{title:'西红柿',quantity:17,price:12.95},{title:'苹果',quantity:5,price:6.95}];
			$scope.remove = function(index) {
				$scope.items.splice(index,1);
			};
			var calculateTotals = function() {
				var total = 0;
				for(var i=0,len = $scope.items.length;i<len;i++) {
					total = total + $scope.items[i].price * $scope.items[i].quantity;
				}
				$scope.bill.total = total;
				$scope.bill.discount = total > 100 ? 10 : 0;
				$scope.bill.subtotal = total - $scope.bill.discount;
			}
			$scope.$watch('items', calculateTotals, true);
		});
	</script>
</body>
</html>

请注意，上面的代码在调用$watch函数时把items写成了一个字符串。这样做是可以的，因为$watch函数既可以接受一个函数，也可以接受一个字符串。如果把一个字符串传递给了$watch函数，它将会在被调用的$scope作用域中当成表达式来执行。

对于有些应用来说，这种策略可能会工作得很好。但是，既然我们在监控items数组，Angular就会制作一份数组的拷贝，用来进行比较操作。对于大型的items数组来说，如果每次在Angular显示页面时只需要重新计算bill属性，那么性能会好很多。通过创建一个带有watchFn的$watch函数我们就可以实现这一点，如下所示：

<html ng-app='myApp'>
<head>
	<title>Watch实例</title>
</head>
<body ng-controller='CartController'>
	<h1>您的订单</h1>
	<div ng-repeat='item in items'>
		<span>{{item.title}}</span>
		<input ng-model='item.quantity'>
		<span>{{item.price | currency}}</span>
		<span>{{item.price * item.quantity | currency}}</span>
		<button ng-click="remove($index)">Remove</button>
	</div>
	<div>Total:{{bill.total | currency}}</div>
	<div>Discount:{{bill.discount | currency}}</div>
	<div>Subtotal:{{bill.subtotal | currency}}</div>
	<script src="lib/angular/angular.js"></script>
	<script>
		var myApp=angular.module('myApp',[])
		myApp.controller('CartController', function($scope) {
			$scope.bill = {};
			$scope.items = [{title:'西瓜',quantity:8,price:3.95},{title:'西红柿',quantity:17,price:12.95},{title:'苹果',quantity:5,price:6.95}];
			$scope.remove = function(index) {
				$scope.items.splice(index,1);
			};
			$scope.$watch(function() {
				var total = 0;
				for(var i=0,len = $scope.items.length;i<len;i++) {
					total = total + $scope.items[i].price * $scope.items[i].quantity;
				}
				$scope.bill.total = total;
				$scope.bill.discount = total > 100 ? 10 : 0;
				$scope.bill.subtotal = total - $scope.bill.discount;
			});
		});
	</script>
</body>
</html>

三.监控多个东西

如果想监控多个属性或者对象，并且当其中任何一个发生变化时就去执行一个函数，应该怎么做呢？有两种基本的选择：

a.监控把这些属性连接起来之后的值

b.把它们放到一个数组对象中，然后给deepWatch参数传递一个true值

在第一种情况下，如果在你的作用域中存在一个things对象，它带有两个属性a和b，当这两个属性发生变化时都需要执行callMe()函数，你可以同时监控这两个属性，示例如下：

$scope.$watch('things.a + things.b',callMe(...));

当然，a和b也可以属于不同的对象，只要需要，这个列表可以无限长。如果列表非常长，你就需要写一个函数来返回连接之后的值，而不是依赖一个表达式来完成这一逻辑。

在第二种情况下，需要监控things对象上的所有属性，你可以这样做

$scope.$watch('things',callMe(...),true);

这里，给第三个参数传递了一个true，请求Angular遍历things的属性，然后当其中任何一个属性发生变化时就调用callMe()。这一机制在数组上的运行方式和在对象上的运行方式相同。

资料来源：《用AngularJS开发下一代Web应用》

查看图片附件

分享到：

AngularJS中使用过滤器格式化数据 | AngularJS操控CSS类和样式

2014-08-24 00:16
浏览 7144
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

详解AngularJS中的$watch

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

详解AngularJS中的$watch

评论

发表评论

相关推荐

AngularJS实现日期选择

AngularJS实现地区选择

AngularJS实现银行列表选择

ng指令中controller与link的区别

AngularJS 之 Factory vs Service vs Provider

AngularJS内幕详解之Directive

AngularJS内幕详解之Scope

AngularJS表单验证

AngularJS——简单表单验证

AngularJs表单校验实例

基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

Angularjs自定义指令实现三级联动选择地理位置

单页面webApp和路由(ng-route)

angular中的路由简单使用

深究AngularJS—如何获取input的焦点（自定义指令）

深究AngularJS——监听模型$watch

angular中的异常机制与异常之外的处理

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

AngularJS单选、复选框

理解和解决angularJS报错$apply already in progress

最近访客更多访客>>