数据对象数组上装饰器模式的替代方法

时间:2014-01-15 13:35:39

标签: javascript angularjs design-patterns

写角度服务,我发现了一种我认为非常方便的模式。我认为它适合装饰器模式的描述。给定一组对象:

players = [{
  name: 'Fred',
  counter: 0
},{
  name: 'Fritz',
  counter: 0
},{
  name: 'Frank',
  counter: 0
}];

在将它传递给视图或控制器之前,我将其传递给装饰函数:

players.forEach(decorate);

此函数为每个对象添加了方便的方法,允许在不需要检索对象索引的情况下更改它们:

function decorate(p) {
  p.reset = function() {
    this.counter = 0;
  };
  p.increment = function() {
    this.counter += 1;
  };
  p.bonus = function() {
    this.counter += 10;
  };
  p.penalty = function() {
    this.counter -= 10;
  };
}

这在没有角度的情况下也很有用,但特别是对于角度,它允许在ng-repeat指令内进行简单的事件绑定。

<div ng-repeat="player in players">
  <div ng-click="player.reset()">reset {{player.name}}</div>
</div>

考虑到服务可能被多个控制器引用,简化接口会对代码最终产生影响。

不考虑性能问题,您认为这种方法有任何缺点吗?或者您是否在不同的方面看到了这样的模式(例如使用new)您认为哪个更好?

1 个答案:

答案 0 :(得分:1)

在您的控制器中,我将拥有您需要的不同功能

.service("myService", function(){
    this.players = [...]
    this.reset = function(player){
        player.counter = 0;
    };
});

function MyController($scope, myService){
    $scope.players = myService.players;
    $scope.reset = function(player){
        myService.reset(player);
    }
    OR
    $scope.reset = myService.reset;
}

然后在你的html中调用该函数

<div ng-repeat="player in players">
  <div ng-click="reset(player)">reset {{player.name}}</div>
</div>