在AngularJS控制器中创建包含功能或具有松散功能的对象是否更好？

Question

假设我们网站上有三个按钮:

<button>Like</button>
<button>Dislike</button>
<button>Flag</button>

每个按钮都会调用各自的功能:

<button ng-click="like()">Like</button>
<button ng-click="dislike()">Dislike</button>
<button ng-click="flag()">Flag</button>

在控制器中它可能看起来像这样:

$scope.like = function() {
  return likes + 1;
}

$scope.dislike = function() {
  return dislikes + 1;
}

$scope.flag = function() {
  return flags + 1;
}

由于$scope太多观察者的混乱对性能不利,这样做不是更好:

$scope.actions = {
  like: function() {
    return likes + 1;
  },
  dislike: function() {
    return dislikes + 1;
  },
  flag: function() {
    return flags + 1;
  }
}

然后使用它像:

<button ng-click="actions.like()">Like</button>
<button ng-click="actions.dislike()">Dislike</button>
<button ng-click="actions.flag()">Flag</button>

这将使观察者的数量从3减少到1,同时还可以创建分组功能.导致更好的可读性.

从我的角度来看,这比在控制器中具有松散功能更有意义,特别是因为并非所有控制器都可以变得轻巧.

让我怀疑这种方法的事情是,我从来没有遇到任何使用这种方法的例子.是否有一个原因？

在常用的设计模式,最佳实践和性能方面,哪种方法更好？

编辑:有建议我应该使用controller as语法,我知道这一点,但这不直接回答我的问题.我想知道上面提到的两种方法中哪一种是更好的选择,而不是使用controller as语法.

Answer 1

我刚刚尝试了您的两种方法，但看不出性能有任何差异。这有两个主要的实际原因：

1. 测试 Angular 应用程序的性能很困难，请参阅如何对 AngularJS Web 应用程序进行性能测试？。

2. 仅在更大规模的应用程序上测试性能才有意义，而不是在如此小的示例上测试性能。

不过，我理解您的问题是关于概念证明的。因此，从理论上讲，第二种方法是更好的方法，因为它$scope比另一种方法污染更少，这就是推荐的方法。

将来我会尝试controllerAs语法。或者，如果您不喜欢该语法，这也很有趣。希望这可以帮助。