數據對象陣列上裝飾圖案的替代方案

編寫角度服務時，我發現了一種我認爲非常方便的圖案。我認爲它適合修飾器模式的描述。給定對象的數組：數據對象陣列上裝飾圖案的替代方案

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）？

來源

2014-01-15 danza

你可以看着[混入]（HTTP：/ /javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/）概念。 – Tibos

您可以通過使用原型來提高性能，例如'players = players.map（createInstance）' – Bergi

看起來像修飾器模式 –

在您的控制器我有你需要

.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>

來源

2014-01-15 14:12:01

的情況下編輯這個問題，但是如果模型存在於一個服務中，你希望在同一個服務中定義這些函數來進行封裝，在這種情況下，你將不得不重新分配它們到每個想要在控制器中使用它們中的一個的範圍變量 – danza

您可以將服務功能直接分配給相同的範圍，或者將範圍呼叫到服務。無論哪種方式都很好。看看我的編輯 –

是的，但這正是我想要避免的重複類型 – danza

數據對象陣列上裝飾圖案的替代方案

回答

相關問題