Javascript Electron，将不断变化的全局变量暴露给外部模块

我开发了一个电子应用程序，用于图形分析。目前，我正在重构代码库并将函数移动到外部模块。目前，我正在与可变范围作斗争

当用户与图形交互时，我有许多变量会发生变化

我根据分析的类型加载不同的UI（按钮）

问题：我无法以简化代码的方式将变量的最新值传递给模块

下面的代码显示了核心问题

// app.js

// require the module
const printValue = require('./printValue.js')

// global variable that I want to access
let selectedNode = ''

// called when a user clicks on node on the graph
cytoscape.on('tap', 'node', selection => {
  // stores the node's data
  selectedNode = selection.target[0]

  // I wan't to avoid that, since I load different configurations
  printValue(selectedNode) // prints the most recent value
})


// loads the different buttons
if (configuration === '1') {
  // I want to transfer it to an external module
  const button = document.getElementById('button-id')
  button.addEventListener('click', () => {
   console.log(selectedNode) // prints the most recent value
  })

  // I want to make this part work
  printValue(selectedNode) // prints '', the initial value of the variable
} else if (configuration === '2') {
  // loads different buttons with different functions
}

该模块具有以下代码

  // module.js

  module.exports = function printValue (value) {
    const button = document.getElementById('button-id')
    button.addEventListener('click', () => {
      console.log(value)
    })
  }

我想做的是在模块中移动每个配置的按钮声明和相关函数。然后根据用户选择的应用程序配置调用这些模块。

这是因为他提供了有用的注释和参考，可以通过值传递

这在详细解释主题时非常有用

下面是更新的（工作）代码示例

selectedNode

被声明为字符串（基元类型），因此无法将更新的值传递给模块

selectedNode

已更改为对象，变量值通过

output

键存储。

所选值

被传递到

printValue

函数，在这里我们打印

输出

键的值

// app.js

// require the module
const printValue = require('./printValue.js')

// global variable that I want to access
let selectedNode = {}

// called when a user clicks on node on the graph
cytoscape.on('tap', 'node', selection => {
  // stores the node's data
  selectedNode.output = selection.target[0] // this is the important bit
})

if (configuration === '1') {
  // now works
  printValue(selectedNode) // prints the updated variable
} else if (configuration === '2') {
  // loads different buttons with different functions
}

模块已更改为

// module.js

module.exports = function printValue (selectedNode) {
  const button = document.getElementById('button-id')
  button.addEventListener('click', () => {
   console.log(selectedNode.output) // the other important bit
  })
}

---

selectedNode

似乎是一种基本类型（字符串），因此当您将其传递给模块时，它将使用当前的值。您可以更改

let selectedNode={}

，然后通过

selectedNode.value=selection.target[0]

更改值，通过

printValue（selectedNode）

传递它，在您的模块中，您只需使用

selectedNode.value

即可获得实际的当前值。（关键词：按值传递和按引用传递）每次调用

printValue

，您都会向按钮添加一个侦听器，过一段时间后，单击该按钮时，您将得到多个console.log。