Question

我试图为一个简单的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();
}

从现在开始，我觉得这将是一种完全不同的模式思维方式，但是很难解决那时的情况……

Answer 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混淆），您可以在{{1 }}，就好像它位于函数内的cameraObject中一样。调用camera

后，camera对象保持不变

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

1 个答案: