Question

我想知道是否可以创建mixins。

假设我有一个主板列表和cpu列表的页面，在两个列表上你可以对项目执行操作（选择/取消选择/删除），此外，两个列表都有独特的操作，例如新项目可以是添加到主板列表但不添加到cpu列表。

以下是我如何看待它的一个例子。

baseActions包含其他对象使用的基本功能

var baseActions = {
    select: function(id) {
        $scope[_self].selected.push(id);
    },
    deselect: function(id) {
        var idx = $scope[_self].selected.indexOf(id);
        if (idx > 0) {
            $scope[_self].selected.splice(idx, 1)
        }

    },
    remove: function() {}
};

在我们的主板列表中，我们还可以在列表中添加新项目：

$scope.motherboardActions = {
    _self: 'motherboardActions',
    selected: [],
    add: function() {}
};
angular.extend($scope.motherboardActions, angular.copy(baseActions));

在我们的cpu列表中，我们可以按名称订购商品：

$scope.cpuActions = {
    _self: 'cpuActions',
    selected: [],
    orderBy: function() {}
};
angular.extend($scope.cpuActions, angular.copy(baseActions));

此示例不起作用_self实际上未在调用select时定义，但我希望您明白这一点。

所以，我想遵循DRY原则，避免在每个对象中创建两个具有相同功能的对象（select，deselect，remove），还有其他办法吗？

Answer 1

这样的东西？我还修改了原始函数中的$scope[_self]，因为这需要 2 输入到函数集 - $ scope和_self。您可以调整它以满足您的需求

// returns your original baseActions seeded with its target.
var baseActions = function(s) {
    return{
      select: function(id) {
          s.selected.push(id);
      },
      deselect: function(id) {
          var idx = s.selected.indexOf(id);
          if (idx >= 0) { // WAS > 0 which did not appear right
              s.selected.splice(idx, 1)
          }

      },
      remove: function() {}
    };
};

$scope = {};

$scope.mbA = {
    _self: 'mbA',
    selected: [],
    add: function() {}
};

$.extend($scope.mbA, $.extend(true, {}, baseActions($scope.mbA)));

$scope.mbA.select("ABCD");
$scope.mbA.select("PQR");
$scope.mbA.select(["P","Q"]); // comparison operator needed for equality

$scope.mbA.selected; // should show 3 elements

$scope.mbA.deselect("ABCD");
$scope.mbA.selected; // should show 2 elements

HTH

在angularjs中创建mixin对象

1 个答案: