2.5 数据绑定的最佳实践
由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。
如果把这个最佳实践应用到上面时钟的例子中,需要把视图中的代码改写成下面这样:
<!doctype html>
<htmlng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock.now }}!</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
在这个例子中,相比每秒钟都更新$scope.clock
,更新clock.now
的值会是更好的选择。有了这个优化后,我们将对反映数据变化的逻辑进行如下修改:
// 在app.js中
angular.module('myApp', [])
.controller('MyController', function($scope, $timeout) {
$scope.clock = {};
var updateClock = function() {
$scope.clock.now = new Date();
$timeout(function() {
updateClock();
}, 1000);
};
updateClock();
});
将所有绑定都通过这样的形式放在视图中是个非常好的主意。