ESLint报错“move function to body root”及GetTotal未定义问题求助

嘿，我来帮你搞定这个问题！咱们先搞清楚报错的根源，再一步步解决：

为什么会出现"GetTotal is not defined"？ #

当你把命名函数表达式 function GetTotal(result) {...} 赋值给变量 fn 时，这个函数名 GetTotal 只在函数表达式自己的内部作用域里有效，外部（也就是if代码块中）根本访问不到它，所以调用 GetTotal(result) 就会触发未定义的错误。

最优解决方案：完全符合ESLint规则的写法 #

ESLint的"move function to body root"规则，本质是为了避免在条件语句里嵌套定义函数，提升代码可读性和作用域清晰度。咱们直接把GetTotal移到onSuccess函数的根作用域里，这样既满足ESLint要求，又能正常调用：

function onSuccess(result) {
  // 把GetTotal移到onSuccess的根作用域，完美符合ESLint规则
  function GetTotal(result) {
    var totBal = 0;
    var str = 'R';
    for (var i = 0; i < result.length; i++) {
      totBal += result[i].Price;
    }
    str += totBal.toFixed(2);
    return str;
  }

  if (result) {
    var span = document.getElementById("Total");
    span.innerHTML = GetTotal(result);
  }
}

保留原有结构的替代方案 #

要是你不想移动函数的位置，那只需要把调用时的GetTotal换成变量fn就行——因为变量fn在if块的作用域里是可以访问到的：

function onSuccess(result) {
  var fn;
  if (result) {
    fn = function GetTotal(result) {
      var totBal = 0;
      var str = 'R';
      for (var i = 0; i < result.length; i++) {
        totBal += result[i].Price;
      }
      str += totBal.toFixed(2);
      return str;
    };
    var span = document.getElementById("Total");
    // 改用变量fn调用，而不是GetTotal
    span.innerHTML = fn(result);
  }
}

或者更简洁一点，直接用匿名函数表达式：

function onSuccess(result) {
  var fn;
  if (result) {
    fn = function(result) {
      var totBal = 0;
      var str = 'R';
      for (var i = 0; i < result.length; i++) {
        totBal += result[i].Price;
      }
      str += totBal.toFixed(2);
      return str;
    };
    var span = document.getElementById("Total");
    span.innerHTML = fn(result);
  }
}

总结 #

第一种把函数移到根作用域的方案是最推荐的，既满足ESLint的规范，又让代码结构更清晰，后续维护也更方便。

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