AngularJS代码重构问询：如何消除if-else分支重复代码？

嘿，我看到你在重构这段AngularJS下拉触发的重复代码时踩了坑，咱们来把问题捋清楚，然后给出能正常工作的重构方案～

问题出在哪？ #

你提取公共逻辑的思路完全没问题，但重构代码里有两个关键错误导致功能失效：

• 错误1：传递方法名时没加引号
  你调用$scope.callresource(searchItemSalesInfo)的时候，searchItemSalesInfo会被JS当成一个变量去查找，但它其实是$scope.resource对象上的属性名，应该传字符串'searchItemSalesInfo'才对。
• 错误2：访问动态属性时用了点语法
  在callresource函数里，$scope.resource.resourcename会去查找resource对象上名为resourcename的属性，而不是你传进来的变量对应的属性。JS里访问动态属性必须用方括号语法：$scope.resource[resourcename]。

正确的重构代码 #

咱们把这两个问题修正，再把重复的回调函数也提取出来，让代码更整洁：

// 提取重复的响应处理逻辑
const processResponse = function(response, headers) {
  angular.forEach(response, function(row, id) {
    response[id].prod_info = `${row.alias} (${row.final_product_id})`;
  });
  $scope.totalCount = headers('x-total-count');
};

// 封装资源调用的公共逻辑
$scope.callResource = function(resourceName) {
  // 用方括号访问动态属性，注意：$resource返回的是异步promise，外部使用需注意异步时机
  return $scope.resource[resourceName](params.get, params.post, processResponse);
};

// 业务逻辑判断与调用
if (1 === $scope.form.type) {
  $scope.callResource('searchItemSalesInfo');
} else {
  $scope.callResource('searchOrderSalesInfo');
}

额外优化提示 #

• 把回调函数单独提取后，后续修改响应处理逻辑只需改动这一处，维护性更高；
• 用ES6模板字符串${}替代传统字符串拼接，代码可读性更好；
• 调整了函数名的驼峰式命名（callResource替代callresource），更符合JS编码规范；
• 注意$resource的请求是异步的，如果外部需要用到返回的response，建议通过.then()方法处理异步结果。

内容的提问来源于stack exchange，提问作者5eeker