AngularJS$手表：更简单还是更不复杂？

哪一个在性能、可读性和可维护性方面更好（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>

//组件模板
{{vm.obj.a.b+vm.stuff.c.d+vm.other.thing}

或者更多，但更简单的手表

// 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;
}

//组件模板
{{vm.sum}
//组件控制器。。。
var vm=这个；
$scope.$watch（'vm.obj.a.b'，fnSum）；
$scope.$watch（'vm.stuff.c.d'，fnSum）；
$scope.$watch（'vm.other.thing'，fnSum）；
函数fnSum（）{
vm.sum=vm.obj.a.b+vm.stuff.c.d+vm.other.thing；
}

还是我错过了更好的方法

---

这只是我经常遇到的一种情况的简化说明。请关注原理，而不是这个确切的示例。

出于维护原因，后者更好：

它允许您将简洁的最终结果放入视图中，允许任何滚动浏览的人只需读取预期的输出，而不是产生最终结果的部分内容。视图保持整洁，而控制器可以有详细的注释，并包含获取

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;
}  

---

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

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

同时使用

ng show

可避免创建新范围

---

请注意，在引擎盖下，

ng if

、

ng show

和

{{{fn（）}

都会创建范围监视程序。为表达式的每个术语添加额外的观察者并不能提高性能。

我同意。两个很好的职业选手。另一方面，代码越少越好；）对表演有什么想法吗？我猜这是一个“哦，如果你想知道哪一个性能更好，你必须分析你的确切代码…”我想三块手表对于一个最终结果来说有点重，所以你可能应该把它们组合成一块（我编辑了我的答案，包括这一块），但是性能方面，我希望一块小小的

$watch

与Angular的未装饰摘要周期非常相似。函数基本上只是做一个小的求和和和赋值。任何在

$watch

中真正昂贵的东西都可能不属于视图。真的。我也考虑过中间道路。我不知道它是否会更快。可能更易于阅读/维护。我把手表分开是因为希望（在我的问题中我没有明确说明）重复使用它们：通常，我在模板中有其他逻辑依赖于vm.obj.a.b，比如说

vm.obj.a.b

，而不是其他两个。然后，

vm.obj.a.b

手表可以处理“其他逻辑”和调用

fnSum

。观看一个函数应该是一个角度性能“不不不”，但既然你无论如何都要做这个逻辑，我认为你的方法是最好的。使用javascript

x='abc'

返回

'abc'

这一事实非常聪明。谢谢

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