it-swarm.com.de

Javascript ES6 - Aufzählungen innerhalb von Klassen, die außerhalb einer statischen Aufzählung verwendet werden

Ich möchte fragen, ob es möglich ist, eine Aufzählung ähnlich der folgenden hinzuzufügen:

STATES = {
    WIP: "Work in progress",
    ONLINE: "Online",
    ONLINE_MODIFIED: "Online, modified",
    HIDDEN: "Hidden"
}

innerhalb einer Klasse und in der Lage sein, sie in einer anderen Datei mit etwas ähnlichem zu verwenden: object.updateState(Class.STATES.HIDDEN), ohne ein neues Objekt wie boxObject.updateState(new Box().STATES.HIDDEN) erstellen zu müssen

Vielen Dank.

8
Maxime M.

so was :

export class Foo{}
Foo.SomeStaticEnum={BAR:"bar"};

aber ein const zu exportieren scheint angemessener zu sein ...

export const FOO={BAR:"bar"};
7
n00dl3

Sie können statische Dateneigenschaften auf verschiedene Arten erreichen:

Zuweisung verwenden:

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Box.STATES = STATES;
console.log(Box.STATES.WIP); // Work in progress is the output

Use Object.defineProperty:

Wenn Sie Object.defineProperty verwenden, können Sie es schreibgeschützt machen

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Object.defineProperty(Box, 'STATES', {
  value: STATES,
  writable: false, // makes the property read-only
});

console.log(Box.STATES.WIP); // Work in progress is the output

Statischen Getter verwenden:

Sie können die statische ES6-Getter-Syntax verwenden, um die Eigenschaft zur Klassendefinition hinzuzufügen. Sie können es schreibgeschützt machen, um nur den Getter zu definieren.

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {
  static get STATES() {
    return STATES;
  }
}

console.log(Box.STATES.WIP); // Work in progress is the output

Alles in allem stimme ich mit n00dl3 überein. Wenn Sie ES6-Module verwenden, erscheint die Verwendung eines benannten Exports sinnvoller:

export const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

export default class Box {};

So können Sie es so importieren:

import { BOX_STATES } from './path-to-box';

console.log(BOX_STATES.WIP); // Work in progress is the output
16
pablogq

Eine weitere einfache Möglichkeit, dies ohne Unterricht zu tun

const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

module.exports = BOX_STATES;

console.log(BOX_STATES.WIP);

Stellen Sie sicher, dass Sie Ihre Datei importieren oder benötigen, wie oben gezeigt.