𝗣𝗹𝗮𝗶𝗻 𝗩𝗮𝗻𝗶𝗹𝗹𝗮𝗝𝗦 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲 𝗡𝗮𝗺𝗲𝘀
Давайте обратимся прямо к проблеме: размер файла. Любой другой ответ, перечисленный здесь, увеличивает ваш код до крайности. Я представляю вам, что для наилучшей производительности, читабельности кода, управления крупномасштабными проектами, подсказок синтаксиса во многих редакторах кода и уменьшения размера кода путем минимизации, это правильный способ сделать перечисления: переменные подчеркивания.
wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwvwv
Как показано в приведенной выше таблице и в примере ниже, для начала есть пять простых шагов:
- Определите имя для группы перечислений. Подумайте о существительном, которое может описать цель перечисления или, по крайней мере, записи в перечислении. Например, группа перечислений, представляющих цвета, выбираемые пользователем, может быть лучше названа COLORCHOICES, чем COLORS.
- Решите, являются ли перечисления в группе взаимоисключающими или независимыми. Если взаимоисключающие, начинайте каждое перечисляемое имя переменной с
ENUM_
. Если независимый или бок о бок, используйте INDEX_
.
- Для каждой записи создайте новую локальную переменную, имя которой начинается с
ENUM_
или INDEX_
, затем имя группы, затем подчеркивание, а затем уникальное понятное имя для свойства.
- Добавить
ENUMLENGTH_
, ENUMLEN_
, INDEXLENGTH_
или INDEXLEN_
(независимо от того LEN_
илиLENGTH_
это личное предпочтение) перечисленное переменной в самом конце. Вы должны использовать эту переменную везде, где это возможно, в вашем коде, чтобы гарантировать, что добавление дополнительной записи в перечисление и увеличение этого значения не нарушит ваш код.
- Дайте каждый последующий Перенумерованные переменным значение одного больше , чем в прошлом, начиная с 0. Есть комментарии на этой странице, например ,
0
не следует использовать в качестве перечисленного значения , так как 0 == null
, 0 == false
, 0 == ""
и другие JS сумасшествий. Я утверждаю, что, чтобы избежать этой проблемы и одновременно повысить производительность, всегда используйте ===
и никогда не позволяйте ==
появляться в вашем коде, кроме typeof
(ex typeof X == "string"
). За все годы использования ===
у меня никогда не было проблем с использованием 0 в качестве значения перечисления. Если вы по-прежнему брезгливы, то 1
можете использовать его как начальное значение в ENUM_
перечислениях (но не в 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_RAT
и обновить ENUMLEN_PET
соответствующим образом. Может быть сложнее и глючно добавить новую запись в другие системы перечисления.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
𝗘𝘅𝘁𝗲𝗻𝗱 𝗨𝗽𝗽𝗲𝗿𝗰𝗮𝘀𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗪𝗶𝘁𝗵 𝗔𝗱𝗱𝗶𝘁𝗶𝗼𝗻
Кроме того, этот синтаксис перечислений допускает ясное и краткое расширение классов, как показано ниже. Чтобы расширить класс, добавьте инкрементное число к 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);
(Длина: 2450 байт)
Некоторые могут сказать, что это менее практично, чем другие решения: оно занимает много места, требует много времени для написания и не содержит синтаксиса сахара. Эти люди были бы правы, если бы они не минимизировали свой код. Тем не менее, ни один разумный человек не оставит единый код в конечном продукте. Для этого миниатюры Closure Compiler - лучшее, что я пока не нашел. Онлайн доступ можно найти здесь . Компилятор Closure может взять все эти перечисленные данные и вставить их в строку, что делает ваш Javascript очень маленьким и быстро запускаемым. Таким образом, Minify with Closure Compiler. Обратите внимание.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
Компилятор Closure способен выполнять некоторые довольно невероятные оптимизации с помощью умозаключений, которые намного превосходят возможности любого другого Javascript minifier. Закрытие Компилятор может встроить примитивные переменные с фиксированным значением. Закрывающий компилятор также может делать выводы на основе этих встроенных значений и исключать неиспользуемые блоки в операторах 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 вознаграждает вас за правильное кодирование и хорошую организацию вашего кода, потому что, в то время как многие минифайеры наказывают организованный код большим уменьшенным размером файла, Closure Compiler может просеять всю вашу чистоту и разумность, чтобы вывести файл еще меньшего размера, если вы используете хитрости как перечисления имен переменных. В этом едином мнении есть святой Грааль кодирования: инструмент, который одновременно помогает вашему коду с меньшим уменьшенным размером и помогает вашему уму, обучая лучшим навыкам программирования.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
𝗦𝗺𝗮𝗹𝗹𝗲𝗿 𝗖𝗼𝗱𝗲 𝗦𝗶𝘇𝗲
Теперь давайте посмотрим, насколько большим будет эквивалентный файл без каких-либо перечислений.
Исходный код без использования перечислений (длина: 1973 байта (на 477 байт короче перечисляемого кода!))
Сокращен без использования перечислений (длина: 843 байта (на 238 байт длиннее перечисляемого кода ))
Как видно, без перечислений исходный код короче за счет большего уменьшенного кода. Я не знаю о тебе; но я точно знаю, что не включаю исходный код в конечный продукт. Таким образом, эта форма перечислений намного лучше, так как она приводит к меньшим уменьшенным размерам файлов.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
𝗖𝗼𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝘃𝗲 🤝 𝗕𝘂𝗴 𝗙𝗶𝘅𝗶𝗻𝗴
Еще одно преимущество этой формы перечисления состоит в том, что она может использоваться для простого управления крупномасштабными проектами без ущерба для минимизированного размера кода. При работе над большим проектом с большим количеством других людей может быть полезно явно пометить и пометить имена переменных, с которыми был создан код, чтобы можно было быстро определить первоначального создателя кода для совместного исправления ошибок.
// 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";
Можно возразить против кода с перечислениями, которые кажутся намного длиннее, чем код с обычными объектами, но внешний вид может быть обманчивым. Важно помнить, что размер исходного кода не пропорционален размеру вывода при использовании epic Closure Compiler. Обратите внимание.
/// 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 wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
𝗘𝗮𝘀𝘆 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴
Кроме того, личная вишня сверху использует эту форму перечислений вместе с текстовым редактором CodeMirror в режиме Javascript. Режим подсветки синтаксиса Javascript в CodeMirror выделяет локальные переменные в текущей области видимости. Таким образом, вы сразу узнаете, когда правильно вводите имя переменной, потому что, если имя переменной было ранее объявлено с var
ключевым словом, тогда имя переменной приобретает особый цвет (по умолчанию голубой). Даже если вы не используете CodeMirror, то по крайней мере браузер выдает полезную[variable name] is not defined
исключение при выполнении кода с ошибочными именами перечислений. Кроме того, инструменты JavaScript, такие как JSLint и Closure Compiler, очень громко рассказывают вам, когда вы вводите неверный тип в имени переменной перечисления. 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 wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvxwvw
𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻 ☑
Я думаю, можно с уверенностью сказать, что эта методология перечисления действительно является лучшим способом не только для минимизированного размера кода, но также для производительности, отладки и совместной работы.
Прочитав полезный вопрос, я благодарю автора за то, что он потратил время на их написание, щелкнув верхнюю левую стрелку вверх в окне вопроса. Каждое поле ответа также имеет одну из этих стрелок вверх.
0
в качестве номера перечисления. Если это не используется для чего-то, что не было установлено. JS рассматриваетfalse || undefined || null || 0 || "" || '' || NaN
все как одно и то же значение при сравнении с использованием==
.