从 Javascript 模块中的父范围继承变量答案

【问题标题】：Inheriting variables from parent scope in Javascript Modules从 Javascript 模块中的父范围继承变量
【发布时间】：2019-02-26 14:22:48
【问题描述】：

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

main.js

import {logMonth} from "./helpers";

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

helpers.js

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

这将产生错误，因为logMonth() 无权访问month 变量。

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

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

【问题讨论】：

如何将month 作为函数的参数：logMonth(month)？
这就是我目前在这种情况下所做的。然而，想象一下当函数需要几个已经在父作用域中定义的参数时，我将不得不调用function(arg1,arg2,arg3,arg4)，除了冗长之外，感觉没有必要，因为变量已经存在。
一旦您有超过 3 个参数，请使用一个对象，这样您就不必更改任何先前编写的对该函数的调用。因此，如果您事先知道一个函数将包含更多参数，请立即从一个对象作为其唯一参数开始，然后根据需要添加额外的参数。

标签： javascript webpack ecmascript-6 module

【解决方案1】：

你可以，但你为什么要这样做？模块旨在防止这种情况。总是喜欢纯函数，一旦应用变得复杂，调试起来会更容易。然后，您不想从多个模块中搜索多个嵌套范围以查找错误，最好只查看引发错误的模块而不是它可以访问的每个范围。

所以logMonth = month => console.log( month ); 和logMonth( 'September' ); 是首选。

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

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

这将与logMonths({ month: 'september' }) 和logMonths({ month: 'september', year: '2019' }) 一起使用，因此您永远不必像logMonths( 'september' ) 一样将logMonths( null, 'september' ) 和logMonths( 2019, 'september' ) 更改为您在logMonths() 之前使用它的年份参数的任何地方。

【讨论】：

【解决方案2】：

我实际上发现了一种偷偷摸摸的方法来做到这一点。我将使用两个 JavaScript 文件进行演示。第一个是顶层文件，第二个是模块。

顶级.js

import {PipeLine} from './PipeLine.js';

App = {
    var1: 'asdf',
    var2: 'dfgh',

    method1: function() {
        // do something...
    },
}

pipeLine = new PipeLine(App);

PipeLine.js

export class Pipeline {
    constructor(app) {
        this.app = app;
        
        // Now do what you will with all the properties and methods of app.
    }
}

【讨论】：