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的新实例时，管理器都会将其添加到场景中。

JavaScript - 使用Webpack管理全局变量

1 个答案: