JavaScript中传递块级常量作为函数参数是否为不良实践？求最佳实践

你的示例代码：

const mainFunction = () => {
    const x = document.getElementById("example");
    y = subFunction1(x);
    z = subFunction2(x);
};

const subFunction1 = (x) => {
    // do something with x
};

const subFunction2 = (x) => {
    // do something else with x
};

接下来逐个解答你的疑问：

1. 在函数外部定义常量并传入函数是不是不良实践？ #

这不是不良实践，关键看常量的作用域是否合理：

• 如果这个常量是多个函数共享的通用值（比如固定的配置项const MAX_RETRIES = 3），在模块级（而非全局）定义后传入需要的函数，是很合理的做法，能提升代码复用性和可维护性。
• 但如果常量只是某个主函数内部的临时值（比如你示例里的DOM元素x），强行放到外部就没必要，反而会扩大不必要的作用域，降低代码可读性。

2. 示例中的x设为全局常量更合理吗？ #

绝对不合理，原因有三个：

• 全局变量会污染命名空间，容易和其他脚本的变量名冲突，引发难以排查的bug。
• DOM元素的获取依赖页面加载状态，全局定义的话如果脚本执行在DOM渲染前，document.getElementById("example")会返回null，直接导致后续子函数出错。
• 违背了最小作用域原则：变量的作用域应该尽可能小，只在需要它的代码块中存在，这样更安全，也更易维护。

你的示例中把x定义在mainFunction内部是正确的做法，既保证了变量只在需要的地方可用，又能传递给子函数使用。

3. 把const x移到每个子函数中是更具可读性还是个人偏好？ #

这不是个人偏好，而是需要权衡性能和维护性的选择：

• 缺点：每个子函数都调用document.getElementById("example")会重复执行DOM查询，虽然单次开销不大，但多次重复没必要；如果以后元素ID需要修改，你得在多个子函数里逐一修改，维护成本高。
• 例外情况：如果子函数是独立的、可能被其他地方单独调用（不通过mainFunction），那在子函数内部获取DOM元素是合理的，这样子函数不需要依赖外部传入的参数，具备独立性。

结合你的示例场景，subFunction1和subFunction2看起来是mainFunction的辅助函数，所以在主函数里统一获取x再传递给子函数，是更优的方案。

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