避免 Angular 中重复代码的通用工厂/服务答案

【问题标题】：Generic factory/service to avoid duplicate code in Angular避免 Angular 中重复代码的通用工厂/服务
【发布时间】：2017-06-11 22:36:49
【问题描述】：

所以我有一组看起来非常相似的工厂。我可能想做一个通用函数来减少重复代码。

代码示例：

.factory('neQueryService', function ($http, $resource, constants) {
return $resource(constants.GEODATA_QUERY, {},
  {
    get: {
      method: 'GET',
      transformResponse: function(data, headers, status){
        var response = {};
        response.data = data;
        response.headers = headers();
        response.status = status;
        return response;
      }
    }
  }
);

和

.factory('neTaskService', function ($http, $resource, constants) {
return $resource(constants.GEODATA_TASK, {},
  {
    get: {
      method: 'GET',
      transformResponse: function(data, headers, status){
        var response = {};
        response.data = data;
        response.headers = headers();
        response.status = status;
        return response;
      }
    }
  }
);

如您所见，从“获取”到“返回”的所有内容在工厂中都是相同的。是否有一种聪明的“最佳实践”方式可以将该部分放入一个单独的函数中并在所有工厂中引用它？

【问题讨论】：

标签： javascript angularjs duplicates refactoring factory

【解决方案1】：

您可以为此使用value() 提供程序，因为它没有任何外部依赖项：

.value('resourceConfig', {
    get: {
      method: 'GET',
      transformResponse: function(data, headers, status){
        var response = {};
        response.data = data;
        response.headers = headers();
        response.status = status;
        return response;
      }
    }
});

.factory('neQueryService', function ($http, $resource, constants, resourceConfig) {
    return $resource(constants.GEODATA_QUERY, {}, resourceConfig);
});

.factory('neTaskService', function ($http, $resource, constants, resourceConfig) {
    return $resource(constants.GEODATA_TASK, {}, resourceConfig);
});

或者您可以更进一步，找出一个工厂来创建您的资源：

.factory('prepareResource', function ($resource) {
    return function (query) {
        return $resource(query, {}, {
            get: {
                method: 'GET',
                transformResponse: function(data, headers, status){
                    var response = {};
                    response.data = data;
                    response.headers = headers();
                    response.status = status;
                    return response;
                }
           }
       });
   };
});

.factory('neQueryService', function (prepareResource, constants) {
    return prepareResource(constants.GEODATA_QUERY);
});

.factory('neTaskService', function (prepareResource, constants) {
    return prepareResource(constants.GEODATA_TASK);
});

【讨论】：

很好的建议。我用了最后一个。但是，仍然想知道如何知道哪一个是“最佳实践”之类的说法？对此有何评论？
@Amir 我认为这更像是一个偏好问题。我更喜欢第二个，因为它会分解出最多的代码，但是，例如，如果您并不总是希望以这种方式构建资源并且希望有时调用$resource(constants.GEODATA_QUERY, somethingSpecificToThisResource, resourceConfig)，那么第一个选项会更好。

【解决方案2】：

如果你不使用 ES6 模块，只需将通用代码移到另一个工厂：

.factory('GetQuery', function () {
  return {
    method: 'GET',
    transformResponse: function(data, headers, status){
      var response = {};
      response.data = data;
      response.headers = headers();
      response.status = status;
      return response;
    }
  });

.factory('neQueryService', function ($http, $resource, constants, GetQuery) {
  return $resource(constants.GEODATA_QUERY, {},
    {
      get: GetQuery
    }
);

【讨论】：

【解决方案3】：

或者，在 $resourceProvider 中配置默认操作：

app.config(function($resourceProvider) {
    $resourceProvider.defaults.get = {
        method: 'GET',
        transformResponse: function(data, headers, status){
          var response = {};
          response.data = data;
          response.headers = headers();
          response.status = status;
          return response;
        }
     };
});

【讨论】：