Question

我正在使用Webpack模块来使项目保持井井有条，但是非常烦人的事情是必须明确指定模块可能需要的所有变量，而不仅仅是让它在调用函数的作用域中进行搜索。有更好的方法吗？示例：

main.js

import {logMonth} from "./helpers";

document.addEventListener("DOMContentLoaded", () => {
  let month = "September";
  logMonth();
});

helpers.js

let logMonth = () => {
  console.log(month)
}

由于logMonth()无权访问month变量，因此将产生错误。

这是一个非常简化的示例，但是对于需要许多变量的函数，传递函数可能需要的所有必需参数会变得很丑陋。

我的问题是：有没有办法使模块可以访问调用范围的变量，而不是显式地传递它们？

Answer 1

您可以，但是为什么要这么做？模块被设计为防止这种情况。始终喜欢纯函数，一旦应用变得复杂，它的调试方式就更容易。然后，您不想从多个模块中搜索多个嵌套作用域来查找错误，最佳情况下，您只希望查找引发错误的模块，而不是它可以访问的每个作用域。

因此首选logMonth = month => console.log( month );和logMonth( 'September' );。

如果需要向一个函数发送多个参数，则可以使用一个对象。这样，您不必在所有位置都更改函数调用签名，只需向对象添加另一个（可选）参数：

logMonths = ({ year, month, day}) => { ...do stuff... }

与logMonths({ month: 'september' })和logMonths({ month: 'september', year: '2019' })一样，这都可以使用，因此您不必在每次使用logMonths（）的地方都像logMonths( 'september' )一样更改为logMonths( null, 'september' )和logMonths( 2019, 'september' ) ）之前没有年份参数。

从Javascript模块中的父作用域继承变量

1 个答案: