Как работать с void-подобными функциями в модулях ES6?

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), вы можете работать с cameraObject, как если бы это было camera внутри функции. Объект camera остается нетронутым после вызова update();