Javascript ES6 - 内部枚举类像静态枚举一样在外部使用

Question

我想问一下是否可以添加类似于以下内容的枚举：

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

在 Class 中，并能够在其他文件中使用它，类似于：object.updateState(Class.STATES.HIDDEN)，而无需构建新对象，如 boxObject.updateState(new Box().STATES.HIDDEN)

谢谢。

Answer 1

像这样：

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

但导出 const 似乎更合适...

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

Answer 2

您可以通过多种方式实现静态数据属性：

使用赋值:

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

使用Object.defineProperty:

当您使用 Object.defineProperty 时，您可以将其设置为只读

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

使用静态getter:

您可以使用 ES6 static getter 语法在 class 定义中添加属性。您也可以只定义 getter.

使其成为只读

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

综上所述，我同意。如果您使用的是 ES6 模块，使用命名导出似乎更合适：

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

export default class Box {};

所以你可以这样导入它：

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

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

Answer 3

无需 class

的另一种简单方法

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

module.exports = BOX_STATES;

console.log(BOX_STATES.WIP);

确保您导入或需要您的文件，如上所示。

Answer 4

如果不需要纯ES6，可以使用Typescript，请点赞。 Typescript 有一个很好的 ENUM 和导出选项

示例：

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

export class SocialMedia
{
    static state: STATES = STATES.HIDDEN;
}


console.log(SocialMedia.state);
SocialMedia.state = STATES.WIP;
console.log(SocialMedia.state);

结果：

Hidden
Work in progress

Javascript ES6 - 内部枚举类像静态枚举一样在外部使用

Javascript ES6 - Enums inside classes used outside like a static enum

javascript

enums

class

ecmascript-6

es6-class

Javascript ES6 - 内部枚举 类 像静态枚举一样在外部使用

Javascript ES6 - Enums inside classes used outside like a static enum

javascript

enums

class

ecmascript-6

es6-class

Javascript ES6 - 内部枚举类像静态枚举一样在外部使用