Vue.js에서 열거형 다루기

안녕.

시작하기 전에 프로그래밍 언어에서 열거형이 무엇인지 또는 왜 사용해야 하는지 모르겠다면 this nice article(Javascript에만 해당)을 읽으십시오.

모든 사람이 고정된 개체를 기반으로 처리할 수 있기 때문에 Javascript로 만든 모든 것에서 Enum의 개념을 보는 것이 조금 이상하다는 것을 압니다. 정말 간단합니다.

const MyEnum = Object.freeze({
  MY_KEY: "my_value",
});

그러나 이러한 응용 프로그램 중 일부를 볼 수 있는 곳마다 코드 구조에 대해 아무도 신경 쓰지 않는다는 것을 알았습니다. 다른 스크립트 내에서 선언된 Enum을 쉽게 찾을 수 있습니다. 왜 같은 장소에서만 사용하도록 그런 추상화를 만들었을까? 열거형입니까 아니면 상수 그룹입니까? 무엇이든.

그래서 결국 몇 가지 구조를 시도했고 그것이 내가 가장 좋아하는 것입니다. 바로 Enum 모듈입니다. Vue.js 3 프로젝트를 기반으로 한 예제를 보여드릴 수 있습니다.

따라서 여기서 분명한 것은 프로젝트가 올바르게 구성되었다는 것입니다. 코드를 아름답게 유지하기 위해 만들어진 다른 모든 폴더와 함께 소스 폴더(./src/)가 있습니다. 시작하자.

1. 향후 Enums를 위한 새 폴더 만들기

이 폴더를 추가하기만 하면 됩니다. ./src/enums/ . 모듈을 만들 것이므로 그 위에 새 폴더./src/enums/modules/를 만듭니다.

기억하십시오: 생성하려는 모든 Enum을 모듈 폴더에 넣으십시오.

2. 첫 번째 Enum 만들기

예를 들어, 모든 가능성에 초점을 맞춘 새로운 State Machine Enum을 임의의 Post 상태(draft , scheduled , published )에 추가하겠습니다.

따라서 다음 내용으로 파일./src/enums/modules/PostStatusEnum.js을 생성합니다.

const PostStatusEnum = Object.freeze({
  DRAFT: "draft",
  SCHEDULED: "scheduled",
  PUBLISHED: "published",
});

export default PostStatusEnum;

네, 첫 번째 Enum :D

단일 Enum의 프로젝트가 있다면 그것으로 충분합니다. 사용하려는 모든 파일에서 직접 가져올 것이기 때문입니다. 예를 들어:

import PostStatusEnum from "./../enums/modules/PostStatusEnum";

// code

그러나 그것은 미래를 준비하는 올바른 방법이 아닙니다. Enum 모듈을 중앙 집중화하지 않으면 많은 가져오기 호출을 처리해야 합니다. 미래에 코드는 다음과 같을 수 있습니다.

import PostStatusEnum from "./../enums/modules/PostStatusEnum";
import OtherEnum from "./../enums/modules/OtherEnum";
import OneMoreEnum from "./../enums/modules/OneMoreEnum";

작동 중일 수도 있지만 확실히 아름답지는 않습니다.

3. 해당 모듈 구성

따라서 Enum을 거대한 패키지에 추가할 새 파일./src/enums/index.js을 추가하여 중앙 집중화하겠습니다. 내용은 다음과 같습니다.

import PostStatusEnum from "./modules/PostStatusEnum";

export {
  PostStatusEnum as PostStatusEnum,
};

그리고 목록에 Enum을 더 추가해야 하는 경우 가져오기 및 내보내기 항목을 추가하기만 하면 됩니다.

Ok, wait, what's the difference?

"많은 Enums"caos로 돌아가자... 이제 한 번의 가져오기 호출에서 필요한 모든 Enum을 호출할 수 있습니다.

import {
  PostStatusEnum,
  OtherEnum,
  OneMoreEnum
} from "./../enums";

더 읽기 쉽습니다. 심지어 길이 더 작아요!
그리고 이것은 당신이 하고 싶은 다른 어떤 추상화로도 할 수 있습니다. 예를 들어, 예외 개념을 다루고 싶습니까? Exception이 Error 프로토타입을 확장하는 클래스라는 점을 제외하고는 동일한 작업을 수행할 수 있습니다.

어떻게 생각해? 동의 여부를 알려주세요.

건배!