𝗣𝗹𝗮𝗶𝗻 𝗩𝗮𝗻𝗶𝗹𝗹𝗮𝗝𝗦 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲 𝗡𝗮𝗺𝗲𝘀
Veamos directamente el problema: tamaño del archivo. Todas las demás respuestas enumeradas aquí hinchan su código al extremo. Le presento que para obtener el mejor rendimiento posible, legibilidad del código, administración de proyectos a gran escala, sugerencias de sintaxis en muchos editores de código y reducción del tamaño del código por minificación, esta es la forma correcta de hacer enumeraciones: variables de notación de subrayado.
wwwwwwwwww
Como se muestra en el cuadro anterior y en el ejemplo a continuación, aquí hay cinco pasos sencillos para comenzar:
- Determine un nombre para el grupo de enumeración. Piense en un sustantivo que pueda describir el propósito de la enumeración o al menos las entradas en la enumeración. Por ejemplo, un grupo de enumeraciones que representan colores elegibles por el usuario podría denominarse mejor COLORCHOICES que COLORS.
- Decida si las enumeraciones en el grupo son mutuamente excluyentes o independientes. Si se excluyen mutuamente, comience cada nombre de variable enumerado con
ENUM_
. Si es independiente o de lado a lado, useINDEX_
.
- Para cada entrada, cree una nueva variable local cuyo nombre comience con
ENUM_
oINDEX_
, luego el nombre del grupo, luego un guión bajo y luego un nombre descriptivo único para la propiedad
- Añada
ENUMLENGTH_
, ENUMLEN_
, INDEXLENGTH_
, o INDEXLEN_
(si LEN_
oLENGTH_
es preferencia personal) variables enumeradas al final. Debe usar esta variable siempre que sea posible en su código para asegurarse de que agregar una entrada adicional a la enumeración e incrementar este valor no rompa su código.
- Dar cada variable enumerado sucesiva un valor uno más que el último, a partir de 0. Hay comentarios sobre esta página que digamos
0
no debe ser utilizado como un valor enumerado porque 0 == null
, 0 == false
, 0 == ""
, y otra locura JS. Le presento que, para evitar este problema y aumentar el rendimiento al mismo tiempo, use siempre ===
y nunca deje que ==
aparezca en su código, excepto con typeof
(ex typeof X == "string"
). En todos mis años de uso ===
, nunca he tenido un problema con el uso de 0 como valor de enumeración. Si todavía es aprensivo, 1
podría usarse como valor inicial en ENUM_
enumeraciones (pero no en INDEX_
enumeraciones) sin penalización de rendimiento en muchos 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
}
Así es como recuerdo cuándo usarlo INDEX_
y cuándo usarlo ENUM_
:
// Precondition: var arr = []; //
arr[INDEX_] = ENUM_;
Sin embargo, ENUM_
puede, en ciertas circunstancias, ser apropiado como un índice, como al contar las ocurrencias de cada elemento.
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, en el código anterior, es realmente fácil agregar un nuevo tipo de mascota: solo tendría que agregar una nueva entrada después ENUM_PET_RAT
y actualizar en ENUMLEN_PET
consecuencia. Puede ser más difícil y con errores agregar una nueva entrada en otros sistemas de enumeración.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
𝗘𝘅𝘁𝗲𝗻𝗱 𝗨𝗽𝗽𝗲𝗿𝗰𝗮𝘀𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗪𝗶𝘁𝗵 𝗔𝗱𝗱𝗶𝘁𝗶𝗼𝗻
Además, esta sintaxis de enumeraciones permite una clase clara y concisa que se extiende como se ve a continuación. Para extender una clase, agregue un número incremental a la LEN_
entrada de la clase primaria. Luego, finalice la subclase con su propia LEN_
entrada para que la subclase se pueda extender aún más en el 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);
(Longitud: 2,450 bytes)
Algunos pueden decir que esto es menos práctico que otras soluciones: quita toneladas de espacio, lleva mucho tiempo escribir y no está recubierto con sintaxis de azúcar. Esas personas tendrían razón si no minimizan su código. Sin embargo, ninguna persona razonable dejaría un código sin minificar en el producto final. Para esta minificación, Closure Compiler es lo mejor que todavía tengo que encontrar. El acceso en línea se puede encontrar aquí . El compilador de cierre puede tomar todos estos datos de enumeración e incorporarlos, lo que hace que su Javascript sea súper pequeño y se ejecute súper rápido. Por lo tanto, Minify with Closure Compiler. Observar.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
El compilador de cierre puede realizar algunas optimizaciones bastante increíbles a través de inferencias que están mucho más allá de las capacidades de cualquier otro minificador de Javascript. Closure Compiler es capaz de incorporar variables primitivas en un valor fijo. Closure Compiler también puede hacer inferencias basadas en estos valores en línea y eliminar bloques no utilizados en sentencias if y bucles.
'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);
(Longitud: 605 bytes)
Closure Compiler lo recompensa por codificar de manera más inteligente y organizar bien su código porque, mientras que muchos minificadores castigan el código organizado con un tamaño de archivo minificado más grande, Closure Compiler puede filtrar toda su limpieza y cordura para generar un tamaño de archivo aún más pequeño si usa trucos como enumeraciones de nombres de variables. Eso, en esta mente, es el santo grial de la codificación: una herramienta que ayuda tanto a su código con un tamaño reducido más pequeño como a su mente al entrenar mejores hábitos de programación.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
𝗦𝗺𝗮𝗹𝗹𝗲𝗿 𝗖𝗼𝗱𝗲 𝗦𝗶𝘇𝗲
Ahora, veamos qué tan grande sería el archivo equivalente sin ninguna de estas enumeraciones.
Origen sin usar enumeraciones (longitud: 1,973 bytes (¡477 bytes más corto que el código enumerado!))
Minificado sin usar enumeraciones (longitud: 843 bytes (238 bytes más que el código enumerado ))
Como se ve, sin enumeraciones, el código fuente es más corto a costa de un código minificado más grande. No sé sobre ti; pero estoy seguro de que no incorporo el código fuente en el producto final. Por lo tanto, esta forma de enumeración es muy superior en la medida en que da como resultado tamaños de archivo minificados más pequeños.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
𝗖𝗼𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝘃𝗲 🤝 𝗕𝘂𝗴 𝗙𝗶𝘅𝗶𝗻𝗴
Otra ventaja de esta forma de enumeración es que se puede usar para administrar fácilmente proyectos a gran escala sin sacrificar el tamaño de código minimizado. Cuando se trabaja en un proyecto grande con muchas otras personas, puede ser beneficioso marcar y etiquetar explícitamente los nombres de las variables con quién creó el código para que el creador original del código pueda identificarse rápidamente para la corrección colaborativa de errores.
// 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
}
𝗦𝘂𝗽𝗲𝗿𝗶𝗼𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲
Además, esta forma de enumeración también es mucho más rápida después de la minificación. En las propiedades con nombre normal, el navegador tiene que usar hashmaps para buscar dónde está la propiedad en el objeto. Aunque los compiladores JIT almacenan en caché de forma inteligente esta ubicación en el objeto, todavía hay una sobrecarga tremenda debido a casos especiales como la eliminación de una propiedad inferior del objeto.
Pero, con arreglos PACKED_ELEMENTS indexados enteros no dispersos continuos , el navegador puede omitir gran parte de esa sobrecarga porque el índice del valor en el arreglo interno ya está especificado. Sí, de acuerdo con el estándar ECMAScript, se supone que todas las propiedades deben tratarse como cadenas. Sin embargo, este aspecto del estándar ECMAScript es muy engañoso sobre el rendimiento porque todos los navegadores tienen optimizaciones especiales para índices numéricos en matrices.
/// Hashmaps are slow, even with JIT juice
var ref = {};
ref.count = 10;
ref.value = "foobar";
Compare el código de arriba con el código de abajo.
/// 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";
Uno podría objetar el código con enumeraciones que parecen ser mucho más largas que el código con objetos ordinarios, pero la apariencia puede ser engañosa. Es importante recordar que el tamaño del código fuente no es proporcional al tamaño de salida cuando se utiliza el compilador de cierre épico. Observar.
/// Hashmaps are slow, even with JIT juice
var a={count:10,value:"foobar"};
El código minificado sin enumeraciones está arriba y el código minificado con enumeraciones está abajo.
/// Arrays, however, are always lightning fast
var a=[10,"foobar"];
El ejemplo anterior demuestra que, además de tener un rendimiento superior, el código enumerado también da como resultado un tamaño de archivo minimizado más pequeño.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
𝗘𝗮𝘀𝘆 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴
Además, la cereza personal de este en la parte superior está utilizando esta forma de enumeraciones junto con el editor de texto CodeMirror en modo Javascript. El modo de resaltado de sintaxis Javascript de CodeMirror resalta las variables locales en el alcance actual. De esa manera, usted sabe instantáneamente cuando escribe un nombre de variable correctamente porque si el nombre de la variable se declaró previamente con la excepción al ejecutar código con nombres de enumeración mal escritos. Además, las herramientas de JavaScript, como JSLint y Closure Compiler, son muy ruidosas al decirle cuando escribe incorrectamente en un nombre de variable de enumeración. CodeMirror, el navegador y varias herramientas de Javascript juntas hacen que la depuración de esta forma de enumeración sea muy simple y realmente fácil.var
palabra clave, entonces el nombre de la variable cambiará a un color especial (cian por defecto). Incluso si no utiliza CodeMirror, al menos el navegador arroja un útil[variable name] is not defined
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
}
En el fragmento anterior, se le alertó con un error porque ENUM_COLORENUM_DNE
no existe.
No de lo que ... ... ¡... ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡...
𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻 ☑
Creo que es seguro decir que esta metodología de enumeración es, de hecho, la mejor manera de ir no solo para el tamaño de código minimizado, sino también para el rendimiento, la depuración y la colaboración.
Después de leer una pregunta útil, agradezco al autor por dedicar tiempo a su escritura haciendo clic en la flecha superior izquierda hacia arriba en el cuadro de preguntas. Cada cuadro de respuesta también tiene una de estas flechas hacia arriba.
0
como número de enumeración. A menos que se use para algo que no se haya configurado. JS trata afalse || undefined || null || 0 || "" || '' || NaN
todos como el mismo valor en comparación con el uso==
.