如何处理 ES6 模块中的类 void 函数？答案

【问题标题】：How to deal with void-like functions in ES6 modules?如何处理 ES6 模块中的类 void 函数？
【发布时间】：2026-01-31 13:00:01
【问题描述】：

我正在尝试为一个简单的 ES6 项目建立一个非常精简的结构。我显然在使用 Webpack 来捆绑所有东西，但我遇到了障碍。

在过去的 JavaScript 中，我非常热衷于使用类似 void 的函数（更改某些内容，不返回任何内容），这对于我的面向 jQuery 的 DOM 操作和画布交互编程非常有效。

现在深入研究 ES6，我似乎无法继续使用这种方法。主要是因为在导入模块时，它们的作用域非常严格。

例如，在我的index.js 文件中：

import * from THREE;
import update from 'my-module';

var camera = new THREE.PerspectiveCamera();

然后，在my-module.js

update = () => {
    camera.update();
}

我觉得从这里开始，这将是一种完全不同的模式心态，但很难弄清楚那会是哪一种……

【问题讨论】：

window.camera 是一个全局变量。
我看不出偏好“void-like functions”与使用全局变量有什么关系。
似乎是学习如何避免全局变量的好时机。例如，您可以改为将camera 传递给update。这也使您的代码更易于测试。
@PatrickRoberts 你是对的。我改写了这个问题，以便更准确。这只是通过 ES6 模块传递范围而不返回

标签： javascript webpack ecmascript-6

【解决方案1】：

不要尝试存储 camera 在全局对象中，您应该传入 camera 到您的 update 功能。

<edit>

哦，另外，如果你真的想要一个全局对象来操作，看看这个：

Node.js 环境：使用global.name = value; 和global.name
浏览器环境：使用window.name = value;和window.name
其他环境：您可以采用任何全局方法或属性，例如console，并在其对象结构上添加一些内容（JS 中的所有内容都是一个对象！），同时保持原始值/函数不变，如下所示： console.camera = camera; 和 console.log('still works!'); 和 console.camera

有关其他全局方法/属性，请查看此处：MDN。

不过，这是不好的做法，因此请尽量避免使用这些，除非绝对必要

</edit>

最佳实践：

index.js

// Import external modules
import * from THREE;
import update from 'my-module';

// Define camera
var camera = new THREE.PerspectiveCamera();

// Update camera
update(camera);

my-module.js

// Define update function
export function update (cameraObject) {
    cameraObject.update();
}

通过将camera 传递给更新函数，并将其作为cameraObject 接收（这样做是为了避免与有两个camera 混淆），您可以对cameraObject 进行操作，就好像它是@987654343 @函数内部。 camera 对象在调用 update(); 后保持不变

【讨论】：