Question

哪个更适合性能，可读性和可维护性（Angular 1.5）？

更少但更复杂的手表

// component template

<div ng-if="vm.obj.a.b + vm.stuff.c.d + vm.another.thing">
  {{ vm.obj.a.b + vm.stuff.c.d + vm.another.thing }}
</div>

或更多，但更简单的手表

// component template

<div ng-if="vm.sum">
  {{ vm.sum }}
</div>

// component controller...

var vm = this;
$scope.$watch('vm.obj.a.b', fnSum);
$scope.$watch('vm.stuff.c.d', fnSum);
$scope.$watch('vm.another.thing', fnSum);

function fnSum() {
  vm.sum = vm.obj.a.b + vm.stuff.c.d + vm.another.thing;
}

还是有更好的方式让我失踪？

这只是我遇到很多情况的简化说明。请关注原则，而不是这个确切的例子。

Answer 1

为了可读性和可维护性，直接从模板中调用函数：

<div ng-show="vm.sum = vm.fnSum()">
  {{ vm.sum }}
</div>

JS

vm.fnSum = function fnSum() {
    return vm.obj.a.b + vm.stuff.c.d + vm.another.thing;
}

同样使用ng-show可以避免创建新范围。

请注意，ng-if，ng-show和{{ fn() }}都会创建范围观察者。为表达式的每个术语添加额外的观察者并不能提高性能。

Answer 2

后者因维护原因更好：

它允许您将简洁的最终结果放入视图中，允许任何人滚动浏览以简单地读取预期的输出，而不是产生最终结果的部分。视图保持整洁，而控制器可以包含详细的注释，并包含获得ngIf确定的整个过程。
它抽象出一个潜在的不稳定结果。假设您需要更改/更新实际触发的内容ngIf;前者需要您更改视图中的每个实例以及您正在进行的任何控制器更改。后者只是简单地更新控制器中的最终值，并知道视图已经设置。

通过将其重构为一个$watch：

var vm = this;
$scope.$watch(function(){
    return vm.obj.a.b + vm.stuff.c.d + vm.another.thing;
}, fnSum);

function fnSum(newSum, oldSum) {
  vm.sum = newSum;
}

AngularJS $手表：更简单或更简单的手表？

2 个答案: