????? ????????? ???????? ?????

파일 크기 문제를 바로 잡겠습니다. 여기에 나열된 다른 모든 답변은 코드를 극도로 부풀립니다. 최상의 성능, 코드의 가독성, 대규모 프로젝트 관리, 많은 코드 편집기의 구문 힌트 및 축소로 코드 크기를 줄이려면 열거를 수행하는 올바른 방법 인 밑줄 표기법 변수를 제시합니다.

^{v v w w}

위의 차트와 아래 예제에서 알 수 있듯이 시작하기 쉬운 5 단계는 다음과 같습니다.

1. 열거 그룹의 이름을 결정하십시오. 열거의 목적 또는 열거의 항목을 설명 할 수있는 명사를 생각해보십시오. 예를 들어, 사용자가 선택할 수있는 색상을 나타내는 열거 그룹은 COLORS보다 COLORCHOICES로 명명하는 것이 좋습니다.
2. 그룹의 열거가 상호 배타적인지 독립적인지 결정하십시오. 상호 배타적 인 경우 열거 된 각 변수 이름을로 시작하십시오 ENUM_. 독립적이거나 나란히있는 경우을 사용하십시오 INDEX_.
3. 각 항목에 대해 이름이 ENUM_또는로 시작 INDEX_하고 그룹 이름, 밑줄, 속성의 고유 한 이름을 갖는 새 로컬 변수를 작성 하십시오.
4. 추가 ENUMLENGTH_, ENUMLEN_, INDEXLENGTH_, 또는 INDEXLEN_(여부 LEN_또는LENGTH_ 매우 끝에 개인적인 취향) 열거 변수를. 열거 형에 추가 항목을 추가하고이 값을 늘리면 코드가 손상되지 않도록 코드에서 가능한 한이 변수를 사용해야합니다.
5. 말은 것을이 페이지에 대한 의견이 있습니다 0에서 시작하여, 마지막으로보다 각 연속 열거 변수에 값을 부여 0열거 값 때문으로 사용해서는 안 0 == null, 0 == false, 0 == "", 및 기타 JS 막무가내가. 나는이 문제를 피하고 동시에 성능을 향상시키기 위해 항상 (ex )를 제외하고는 코드에 나타나지 ===않도록 ==하십시오 . 을 사용하는 모든 해에 0을 열거 형 값으로 사용하는 데 문제가 없었습니다. 여전히 삐걱 거리면 많은 경우 성능 저하없이 열거 형의 열거 형이 아닌 열거 형 의 시작 값으로 사용할 수 있습니다 .typeoftypeof X == "string"===1ENUM_INDEX_

const ENUM_COLORENUM_RED   = 0;
const ENUM_COLORENUM_GREEN = 1;
const ENUM_COLORENUM_BLUE  = 2;
const ENUMLEN_COLORENUM    = 3;

// later on

if(currentColor === ENUM_COLORENUM_RED) {
   // whatever
}

여기에 사용할 때 내가 기억하는 방법입니다 INDEX_때 사용하는 방법과 ENUM_:

// Precondition: var arr = []; //
arr[INDEX_] = ENUM_;

그러나 ENUM_특정 상황에서 각 항목의 발생 횟수를 계산할 때와 같은 색인으로 적합 할 수 있습니다.

const ENUM_PET_CAT = 0,
      ENUM_PET_DOG = 1,
      ENUM_PET_RAT = 2,
      ENUMLEN_PET  = 3;

var favoritePets = [ENUM_PET_CAT, ENUM_PET_DOG, ENUM_PET_RAT,
                    ENUM_PET_DOG, ENUM_PET_DOG, ENUM_PET_CAT,
                    ENUM_PET_RAT, ENUM_PET_CAT, ENUM_PET_DOG];

var petsFrequency = [];

for (var i=0; i<ENUMLEN_PET; i=i+1|0)
  petsFrequency[i] = 0;

for (var i=0, len=favoritePets.length|0, petId=0; i<len; i=i+1|0)
  petsFrequency[petId = favoritePets[i]|0] = (petsFrequency[petId]|0) + 1|0;

console.log({
    "cat": petsFrequency[ENUM_PET_CAT],
    "dog": petsFrequency[ENUM_PET_DOG],
    "rat": petsFrequency[ENUM_PET_RAT]
});

위의 코드에서 새로운 종류의 애완 동물을 추가하는 것이 정말 쉽다는 것을 관찰하십시오. 다음에 새 항목을 추가해야합니다. ENUM_PET_RATENUMLEN_PET 그에 따라 업데이트하면 됩니다. 다른 열거 형 시스템에 새 항목을 추가하는 것이 더 어려울 수 있습니다.

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

?????? ????????? ????????? ???? ????????

또한이 열거 구문을 사용하면 아래와 같이 명확하고 간결한 클래스 확장이 가능합니다. 클래스를 확장하려면 LEN_상위 클래스 의 항목에 증분 숫자를 추가하십시오 . 그런 다음 서브 클래스를 자체 LEN_항목으로 완료 하여 나중에 서브 클래스를 더 확장 할 수 있도록하십시오.

(function(window){
    "use strict";
    var parseInt = window.parseInt;

    // use INDEX_ when representing the index in an array instance
    const INDEX_PIXELCOLOR_TYPE = 0, // is a ENUM_PIXELTYPE
          INDEXLEN_PIXELCOLOR   = 1,
          INDEX_SOLIDCOLOR_R    = INDEXLEN_PIXELCOLOR+0,
          INDEX_SOLIDCOLOR_G    = INDEXLEN_PIXELCOLOR+1,
          INDEX_SOLIDCOLOR_B    = INDEXLEN_PIXELCOLOR+2,
          INDEXLEN_SOLIDCOLOR   = INDEXLEN_PIXELCOLOR+3,
          INDEX_ALPHACOLOR_R    = INDEXLEN_PIXELCOLOR+0,
          INDEX_ALPHACOLOR_G    = INDEXLEN_PIXELCOLOR+1,
          INDEX_ALPHACOLOR_B    = INDEXLEN_PIXELCOLOR+2,
          INDEX_ALPHACOLOR_A    = INDEXLEN_PIXELCOLOR+3,
          INDEXLEN_ALPHACOLOR   = INDEXLEN_PIXELCOLOR+4,
    // use ENUM_ when representing a mutually-exclusive species or type
          ENUM_PIXELTYPE_SOLID = 0,
          ENUM_PIXELTYPE_ALPHA = 1,
          ENUM_PIXELTYPE_UNKNOWN = 2,
          ENUMLEN_PIXELTYPE    = 2;

    function parseHexColor(inputString) {
        var rawstr = inputString.trim().substring(1);
        var result = [];
        if (rawstr.length === 8) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_ALPHA;
            result[INDEX_ALPHACOLOR_R] = parseInt(rawstr.substring(0,2), 16);
            result[INDEX_ALPHACOLOR_G] = parseInt(rawstr.substring(2,4), 16);
            result[INDEX_ALPHACOLOR_B] = parseInt(rawstr.substring(4,6), 16);
            result[INDEX_ALPHACOLOR_A] = parseInt(rawstr.substring(4,6), 16);
        } else if (rawstr.length === 4) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_ALPHA;
            result[INDEX_ALPHACOLOR_R] = parseInt(rawstr[0], 16) * 0x11;
            result[INDEX_ALPHACOLOR_G] = parseInt(rawstr[1], 16) * 0x11;
            result[INDEX_ALPHACOLOR_B] = parseInt(rawstr[2], 16) * 0x11;
            result[INDEX_ALPHACOLOR_A] = parseInt(rawstr[3], 16) * 0x11;
        } else if (rawstr.length === 6) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_SOLID;
            result[INDEX_SOLIDCOLOR_R] = parseInt(rawstr.substring(0,2), 16);
            result[INDEX_SOLIDCOLOR_G] = parseInt(rawstr.substring(2,4), 16);
            result[INDEX_SOLIDCOLOR_B] = parseInt(rawstr.substring(4,6), 16);
        } else if (rawstr.length === 3) {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_SOLID;
            result[INDEX_SOLIDCOLOR_R] = parseInt(rawstr[0], 16) * 0x11;
            result[INDEX_SOLIDCOLOR_G] = parseInt(rawstr[1], 16) * 0x11;
            result[INDEX_SOLIDCOLOR_B] = parseInt(rawstr[2], 16) * 0x11;
        } else {
            result[INDEX_PIXELCOLOR_TYPE] = ENUM_PIXELTYPE_UNKNOWN;
        }
        return result;
    }

    // the red component of green
    console.log(parseHexColor("#0f0")[INDEX_SOLIDCOLOR_R]);
    // the alpha of transparent purple
    console.log(parseHexColor("#f0f7")[INDEX_ALPHACOLOR_A]);
    // the enumerated array for turquoise
    console.log(parseHexColor("#40E0D0"));
})(self);

(길이 : 2,450 바이트)

일부는 이것이 다른 솔루션보다 실용적이지 않다고 말할 수 있습니다. 허리 톤 공간, 쓰기에 오랜 시간이 걸리며 설탕 구문으로 코팅되지 않았습니다. 코드를 축소하지 않으면 사람들이 옳을 것입니다. 그러나 합리적인 사람은 최종 제품에 축소되지 않은 코드를 남길 수 없습니다. 이 축소를 위해 클로저 컴파일러는 아직 찾지 못했습니다. 온라인 액세스는 여기 에서 찾을 수 있습니다 . 클로저 컴파일러는이 열거 데이터를 모두 가져 와서 인라인 할 수있어 자바 스크립트를 매우 작게 만들고 빠르게 듀퍼를 실행할 수 있습니다. 따라서 폐쇄 컴파일러로 최소화하십시오. 관찰하십시오.

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

?????? ???? ??????? ????????

클로저 컴파일러는 다른 자바 스크립트 축소 기의 용량을 넘어서는 추론을 통해 매우 놀라운 최적화를 수행 할 수 있습니다. 클로저 컴파일러는 기본 변수를 고정 값으로 인라인 할 수 있습니다. Closure Compiler는 이러한 인라인 된 값을 기반으로 추론 할 수 있으며 if 문과 루프에서 사용되지 않는 블록을 제거 할 수 있습니다.

'use strict';(function(e){function d(a){a=a.trim().substring(1);var b=[];8===a.length?(b[0]=1,b[1]=c(a.substring(0,2),16),b[2]=c(a.substring(2,4),16),b[3]=c(a.substring(4,6),16),b[4]=c(a.substring(4,6),16)):4===a.length?(b[1]=17*c(a[0],16),b[2]=17*c(a[1],16),b[3]=17*c(a[2],16),b[4]=17*c(a[3],16)):6===a.length?(b[0]=0,b[1]=c(a.substring(0,2),16),b[2]=c(a.substring(2,4),16),b[3]=c(a.substring(4,6),16)):3===a.length?(b[0]=0,b[1]=17*c(a[0],16),b[2]=17*c(a[1],16),b[3]=17*c(a[2],16)):b[0]=2;return b}var c=
e.parseInt;console.log(d("#0f0")[1]);console.log(d("#f0f7")[4]);console.log(d("#40E0D0"))})(self);

(길이 : 605 바이트)

Closure Compiler는 더 축소 된 파일 크기로 조직화 된 코드를 처벌하는 반면, 많은 Minifier가 더 작은 파일 크기로 조직화 된 코드를 처벌하는 반면, Closure Compiler는 트릭을 사용하는 경우 더 작은 파일 크기를 출력하기 위해 모든 청결과 정성을 거칠 수 있기 때문에 변수 이름 열거와 같습니다. 이것이 하나의 마음에 코딩의 성배입니다. 작은 크기로 코드를 지원하고 더 나은 프로그래밍 습관을 훈련하여 마음을 돕는 도구입니다.

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

??????? ???? ????

이제 열거 형이없는 등가 파일의 크기를 살펴 보겠습니다.

열거를 사용하지 않는 소스 (길이 : 1,973 바이트 (열거 된 코드보다 477 바이트 짧음!))
열거를 사용하지 않고 축소 된 (길이 : 843 바이트 ( 열거 된 코드보다 238 바이트 더 ))

알 수 있듯이 열거가 없으면 축소 된 코드가 클수록 소스 코드가 짧아집니다. 나는 당신에 대해 모른다; 그러나 나는 최종 제품에 소스 코드를 포함시키지 않는다는 것을 확실히 알고 있습니다. 따라서이 형식의 열거 형은 파일 크기가 작을수록 훨씬 우수합니다.

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

??????????? ? ??? ??????

이 형식의 열거에 대한 또 다른 장점은 축소 된 코드 크기를 희생하지 않고도 대규모 프로젝트를 쉽게 관리하는 데 사용할 수 있다는 것입니다. 다른 많은 사람들과 함께 대규모 프로젝트를 작업 할 때 코드를 만든 사람으로 변수 이름을 명시 적으로 표시하고 레이블을 지정하면 코드의 원래 작성자를 공동 버그 수정을 위해 빠르게 식별 할 수 있습니다.

// JG = Jack Giffin
const ENUM_JG_COLORENUM_RED   = 0,
      ENUM_JG_COLORENUM_GREEN = 1,
      ENUM_JG_COLORENUM_BLUE  = 2,
      ENUMLEN_JG_COLORENUM    = 3;

// later on

if(currentColor === ENUM_JG_COLORENUM_RED) {
   // whatever
}

// PL = Pepper Loftus
// BK = Bob Knight
const ENUM_PL_ARRAYTYPE_UNSORTED   = 0,
      ENUM_PL_ARRAYTYPE_ISSORTED   = 1,
      ENUM_BK_ARRAYTYPE_CHUNKED    = 2, // added by Bob Knight
      ENUM_JG_ARRAYTYPE_INCOMPLETE = 3, // added by jack giffin
      ENUMLEN_PL_COLORENUM         = 4;

// later on

if(
  randomArray === ENUM_PL_ARRAYTYPE_UNSORTED ||
  randomArray === ENUM_BK_ARRAYTYPE_CHUNKED
) {
   // whatever
}

???????? ???????????

또한이 형식의 열거는 축소 후에도 훨씬 빠릅니다. 일반적인 명명 된 속성에서 브라우저는 해시 맵을 사용하여 속성이 객체의 어디에 있는지 찾아야합니다. JIT 컴파일러는 객체에서이 위치를 지능적으로 캐시하지만 객체에서 낮은 속성을 삭제하는 등의 특수한 경우로 인해 여전히 엄청난 오버 헤드가 있습니다.

그러나 스파 스가 아닌 정수 인덱싱 된 PACKED_ELEMENTS 배열을 사용하면 내부 배열의 값 인덱스가 이미 지정되어 있으므로 브라우저에서 해당 오버 헤드를 대부분 건너 뛸 수 있습니다. 예, ECMAScript 표준에 따르면 모든 속성은 문자열로 취급됩니다. 그럼에도 불구하고 ECMAScript 표준의 이러한 측면은 모든 브라우저가 배열의 숫자 인덱스에 대해 특별히 최적화되어 있기 때문에 성능에 대해 매우 오해의 소지가 있습니다.

/// Hashmaps are slow, even with JIT juice
var ref = {};
ref.count = 10;
ref.value = "foobar";

위 코드와 아래 코드를 비교하십시오.

/// Arrays, however, are always lightning fast
const INDEX_REFERENCE_COUNT = 0;
const INDEX_REFERENCE_VALUE = 1;
const INDEXLENGTH_REFERENCE = 2;

var ref = [];
ref[INDEX_REFERENCE_COUNT] = 10;
ref[INDEX_REFERENCE_VALUE] = "foobar";

열거 형이있는 코드에 일반 객체가있는 코드보다 훨씬 길어 보이는 것처럼 보일 수도 있지만 외모는 속일 수 있습니다. 서사시 폐쇄 컴파일러를 사용할 때 소스 코드 크기는 출력 크기에 비례하지 않는다는 점을 기억해야합니다. 관찰하십시오.

/// Hashmaps are slow, even with JIT juice
var a={count:10,value:"foobar"};

열거가없는 축소 된 코드는 위에 있고 열거가있는 축소 된 코드는 아래에 있습니다.

/// Arrays, however, are always lightning fast
var a=[10,"foobar"];

위의 예제는 성능이 우수 할뿐만 아니라 열거 된 코드가 파일 크기를 최소화하는 것을 보여줍니다.

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

???? ?????????

또한이 개인 체리 는 Javascript 모드에서 CodeMirror 텍스트 편집기 와 함께이 열거 형을 사용하고 있습니다. CodeMirror의 Javascript 구문 강조 모드는 현재 범위에서 로컬 변수를 강조 표시합니다. 이렇게하면 변수 이름을 var키워드로 선언 한 경우 변수 이름이 특수한 색 (기본적으로 청록색)이 되기 때문에 변수 이름을 올바르게 입력하면 즉시 알 수 있습니다 . CodeMirror를 사용하지 않더라도 적어도 브라우저는 도움이됩니다.[variable name] is not defined 잘못 입력 된 열거 이름을 가진 코드를 실행할 때 예외 있습니다. 또한 JSLint 및 Closure Compiler와 같은 JavaScript 도구는 열거 변수 이름을 잘못 입력하면 알려줍니다. CodeMirror, 브라우저 및 다양한 Javascript 도구를 함께 사용하면 이러한 열거 형식을 매우 간단하고 쉽게 디버깅 할 수 있습니다.

const ENUM_COLORENUM_RED   = 0,
      ENUM_COLORENUM_GREEN = 1,
      ENUM_COLORENUM_BLUE  = 2,
      ENUMLEN_COLORENUM    = 3;
var currentColor = ENUM_COLORENUM_GREEN;

if(currentColor === ENUM_COLORENUM_RED) {
   // whatever
}

if(currentColor === ENUM_COLORENUM_DNE) {
   // whatever
}

위의 스 니펫 ENUM_COLORENUM_DNE에는 존재하지 않기 때문에 오류가 발생했습니다 .

^{Wvwwvw wvwvwvw vwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvww}

?????????? ☑

이 열거 방법론은 실제로 최소화 된 코드 크기뿐만 아니라 성능, 디버깅 및 공동 작업을 수행하는 가장 좋은 방법이라고 말하는 것이 안전하다고 생각합니다.

^{유용한 질문을 읽은 후 질문 상자의 왼쪽 상단 화살표를 클릭하여 글에 시간을 쏟아 준 저자에게 감사합니다. 각 답변 상자에는 이러한 위쪽 화살표 중 하나가 있습니다.}