JavaScript - 使用 Webpack 管理全局变量

Question

我目前正在使用一个全局对象来存储其他对象使用的变量。

globals.js

export default {
  colors: {
    bg: 0x000000,
    front: 0xffffff
  },
  scene: new THREE.scene();
};

它允许我在给定的类中执行此操作:

Foo.js

import globals from './globals.js';

class Foo {
    constructor() {
        this.color = globals.colors.front;
        // ...
        globals.scene.add(this.mesh);
    }
}

我想知道这是否是一种好的工作方式。我应该为每个对象创建一个单独的模块(比如一个 colors.js 文件和一个 Scene.js)并在需要的地方导入它们吗？还是全局对象好？我想不出任何缺点，但它对我来说似乎并不干净。

Answer 1

我自己正在学习模式。这些内容确实在某种程度上取决于您的应用和您的特定需求。

单例通常被视为反模式，但并非总是如此。

import globals from './globals.js';

class Foo {
  constructor() {
    this.color = globals.colors.front;
    // ...
    globals.scene.add(this.mesh);
  }
}

const myFoo = new Foo()

globals.colors.front.set('red')
myFoo.color.set('blue') //its the same global color

这个怎么样？

import globals from './globals.js';

class Foo {
  constructor(color) {
    this._color = color;
    // ...
    globals.scene.add(this.mesh);
  }
}

const myFoo = new Foo(globals.colors.front)

globals.colors.front.set('red')
//myFoo._color.set('blue') //_ in name hints it's private and should not be used

这样你的 FOO 只知道传递的颜色。如果它需要管理和保持它自己的颜色，您可以在构造函数中为其创建一个 THREE.Color 实例。如果它只需要引用一些颜色，那么它可以对外界隐藏，只关心传递给它的引用(不关心其中的内容)。

关于场景，您可以创建某种管理器，然后每当您请求 Foo 的新实例时，管理器就会将其添加到场景中。