Question

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

当用户与图表交互时，我有许多变量会发生变化。
我根据分析类型加载不同的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)
    })
  }

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

Answer 1

信用转到Royalbingbong，以获得有用的评论和对价值传递的引用。

这非常有用link，其中详细解释了主题。

这是更新的（工作）代码示例。

selectedNode被声明为字符串（基本类型），因此无法将更新后的值传递给模块。 selectedNode已更改为对象，变量值与output键一起存储。 selected value传递给printValue函数，我们在其中打印output键的值。

// 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
  })
}

电子，将变化的全局变量暴露给外部模块

1 个答案: