𝗣𝗹𝗮𝗶𝗻 𝗩𝗮𝗻𝗶𝗹𝗹𝗮𝗝𝗦 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲
Vamos direto ao problema: tamanho do arquivo. Todas as outras respostas listadas aqui incham seu código ao extremo. Apresento a você que, para o melhor desempenho possível, legibilidade do código, gerenciamento de projetos em larga escala, dicas de sintaxe em muitos editores de código e redução no tamanho do código por minificação, esta é a maneira correta de fazer enumerações: variáveis de notação sublinhada.
wvwvwvwvwwwwwwwwwwwwvwvwvwvwvwvwvwvwvwvwvwwwvvvvvvvvvvvvvvvvv
Conforme demonstrado na tabela acima e no exemplo abaixo, aqui estão cinco etapas fáceis para começar:
- Determine um nome para o grupo de enumeração. Pense em um substantivo que possa descrever o objetivo da enumeração ou pelo menos as entradas na enumeração. Por exemplo, um grupo de enumerações representando cores escolhidas pelo usuário pode ser melhor denominado COLORCHOICES do que COLORS.
- Decida se as enumerações no grupo são mutuamente exclusivas ou independentes. Se mutuamente exclusivo, inicie cada nome de variável enumerado com
ENUM_
. Se independente ou lado a lado, use INDEX_
.
- Para cada entrada, crie uma nova variável local cujo nome comece com
ENUM_
ou INDEX_
, então o nome do grupo, um sublinhado e um nome amigável exclusivo para a propriedade
- Adicionar um
ENUMLENGTH_
, ENUMLEN_
, INDEXLENGTH_
, ou INDEXLEN_
(se LEN_
ou LENGTH_
é preferência pessoal) variável enumerados no final. Você deve usar essa variável sempre que possível em seu código para garantir que adicionar uma entrada extra à enumeração e incrementar esse valor não interrompa seu código.
- Dê a cada variável enumerado sucessiva um valor um a mais que o último, começando em 0. Há comentários sobre esta página que digamos
0
não deve ser usado como um valor enumerado porque 0 == null
, 0 == false
, 0 == ""
, e outra loucura JS. Eu submeto a você que, para evitar esse problema e aumentar o desempenho ao mesmo tempo, sempre use ===
e nunca deixe ==
aparecer no seu código, exceto com typeof
(ex typeof X == "string"
). Em todos os meus anos de uso ===
, nunca tive problemas com o uso de 0 como valor de enumeração. Se você ainda é sensível, 1
pode ser usado como o valor inicial em ENUM_
enumerações (mas não em INDEX_
enumerações) sem penalidade de desempenho em muitos casos.
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
}
Aqui está como eu lembro quando usar INDEX_
e quando usar ENUM_
:
// Precondition: var arr = []; //
arr[INDEX_] = ENUM_;
No entanto, ENUM_
em determinadas circunstâncias, pode ser apropriado como um índice, como na contagem das ocorrências de cada item.
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]
});
Observe que, no código acima, é realmente fácil adicionar um novo tipo de animal de estimação: você apenas precisa acrescentar uma nova entrada depois ENUM_PET_RAT
e atualizar de ENUMLEN_PET
acordo. Pode ser mais difícil e complicado adicionar uma nova entrada em outros sistemas de enumeração.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
𝗘𝘅𝘁𝗲𝗻𝗱 𝗨𝗽𝗽𝗲𝗿𝗰𝗮𝘀𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗪𝗶𝘁𝗵
Além disso, essa sintaxe de enumerações permite a extensão clara e concisa da classe, conforme mostrado abaixo. Para estender uma classe, adicione um número incremental à LEN_
entrada da classe pai. Em seguida, termine a subclasse com sua própria LEN_
entrada, para que a subclasse possa ser estendida ainda mais no futuro.
(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);
(Comprimento: 2.450 bytes)
Alguns podem dizer que isso é menos prático do que outras soluções: consome muito espaço, leva muito tempo para escrever e não é revestido com a sintaxe do açúcar. Essas pessoas estariam certas se não reduzissem seu código. No entanto, nenhuma pessoa razoável deixaria código não minificado no produto final. Para esta minificação, o Closure Compiler é o melhor que ainda tenho para encontrar. O acesso online pode ser encontrado aqui . O compilador de fechamento é capaz de pegar todos esses dados de enumeração e incorporá-los, tornando seu Javascript super super pequeno e executando super super rápido. Portanto, Minimize com o Closure Compiler. Observar.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
O compilador de fechamento é capaz de executar algumas otimizações bastante incríveis por meio de inferências que estão muito além das capacidades de qualquer outro minificador de Javascript. O Closure Compiler é capaz de alinhar variáveis primitivas definidas para um valor fixo. O Closure Compiler também é capaz de fazer inferências com base nesses valores embutidos e eliminar blocos não utilizados nas instruções if e loops.
'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);
(Comprimento: 605 bytes)
O Closure Compiler recompensa você por codificar de forma mais inteligente e organizar bem o seu código, porque, enquanto muitos minificadores punem o código organizado com um tamanho de arquivo minificado maior, o Closure Compiler pode filtrar toda a sua limpeza e sanidade para gerar um tamanho de arquivo ainda menor se você usar truques como enumerações de nomes de variáveis. Esse, nessa única mente, é o santo graal da codificação: uma ferramenta que ajuda seu código com um tamanho reduzido menor e ajuda sua mente treinando melhores hábitos de programação.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
𝗦𝗺𝗮𝗹𝗹𝗲𝗿 𝗖𝗼𝗱𝗲 𝗦𝗶𝘇𝗲
Agora, vamos ver o tamanho do arquivo equivalente sem nenhuma dessas enumerações.
Origem sem usar enumerações (comprimento: 1.973 bytes (477 bytes a menos que o código enumerado!))
Minificado sem usar enumerações (comprimento: 843 bytes (238 bytes a mais que o código enumerado ))
Como visto, sem enumerações, o código fonte é mais curto ao custo de um código minificado maior. Não sei sobre você; mas tenho certeza de que não incorporo o código-fonte ao produto final. Portanto, essa forma de enumerações é muito superior, pois resulta em tamanhos menores de arquivos minificados.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
𝗖𝗼𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝘃𝗲 🤝 𝗕𝘂𝗴
Outra vantagem sobre essa forma de enumeração é que ela pode ser usada para gerenciar facilmente projetos de grande escala sem sacrificar o tamanho reduzido do código. Ao trabalhar em um projeto grande com muitas outras pessoas, pode ser benéfico marcar e rotular explicitamente os nomes das variáveis com quem criou o código, para que o criador original do código possa ser rapidamente identificado para a correção colaborativa de erros.
// 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
}
𝗦𝘂𝗽𝗲𝗿𝗶𝗼𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲
Além disso, essa forma de enumeração também é muito mais rápida após a minificação. Nas propriedades nomeadas normais, o navegador precisa usar hashmaps para procurar onde a propriedade está no objeto. Embora os compiladores JIT armazenem em cache esse local de maneira inteligente no objeto, ainda há uma enorme sobrecarga devido a casos especiais, como a exclusão de uma propriedade mais baixa do objeto.
Mas, com matrizes PACKED_ELEMENTS indexadas a números inteiros não esparsos , o navegador pode ignorar grande parte dessa sobrecarga, porque o índice do valor na matriz interna já foi especificado. Sim, de acordo com o padrão ECMAScript, todas as propriedades devem ser tratadas como seqüências de caracteres. No entanto, esse aspecto do padrão ECMAScript é muito enganador quanto ao desempenho, porque todos os navegadores possuem otimizações especiais para índices numéricos em matrizes.
/// Hashmaps are slow, even with JIT juice
var ref = {};
ref.count = 10;
ref.value = "foobar";
Compare o código acima com o código abaixo.
/// 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";
Pode-se objetar ao código com enumerações que parecem muito mais longas do que o código com objetos comuns, mas a aparência pode enganar. É importante lembrar que o tamanho do código-fonte não é proporcional ao tamanho da saída ao usar o épico Closure Compiler. Observar.
/// Hashmaps are slow, even with JIT juice
var a={count:10,value:"foobar"};
O código minificado sem enumerações está acima e o código minificado com enumerações está abaixo.
/// Arrays, however, are always lightning fast
var a=[10,"foobar"];
O exemplo acima demonstra que, além de ter um desempenho superior, o código enumerado também resulta em um tamanho de arquivo minificado menor.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
𝗘𝗮𝘀𝘆 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴
Além disso, a cereja pessoal dessa pessoa no topo está usando essa forma de enumerações junto com o editor de texto CodeMirror no modo Javascript. O modo de destaque da sintaxe Javascript do CodeMirror destaca variáveis locais no escopo atual. Dessa forma, você saberá instantaneamente quando digitar um nome de variável corretamente, porque se o nome da variável tiver sido declarado anteriormente com a var
palavra - chave, o nome da variável ficará com uma cor especial (ciano por padrão). Mesmo se você não usar o CodeMirror, pelo menos o navegador exibirá uma ajuda[variable name] is not defined
exceção ao executar código com nomes de enumeração digitados incorretamente. Além disso, ferramentas JavaScript, como JSLint e Closure Compiler, falam muito alto quando você digita incorretamente o nome de uma variável de enumeração. O CodeMirror, o navegador e várias ferramentas Javascript juntas tornam a depuração dessa forma de enumeração muito simples e muito fácil.
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
}
No trecho acima, você foi alertado com um erro porque ENUM_COLORENUM_DNE
não existe.
wvwwvw wvwvwvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvwwvwwwwwvvvwvv
𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻 ☑
Eu acho seguro dizer que essa metodologia de enumeração é realmente a melhor maneira de seguir não apenas o tamanho reduzido do código, mas também o desempenho, a depuração e a colaboração.
Depois de ler uma pergunta útil, agradeço ao autor por dedicar tempo à sua escrita clicando na seta superior esquerda na caixa de perguntas. Cada caixa de resposta também possui uma dessas setas para cima.
0
como um número de enumeração. A menos que seja usado para algo que não foi definido. JS tratafalse || undefined || null || 0 || "" || '' || NaN
todos com o mesmo valor quando comparado ao uso==
.