𝗣𝗹𝗮𝗶𝗻 𝗩𝗮𝗻𝗶𝗹𝗹𝗮𝗝𝗦 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲 𝗡𝗮𝗺𝗲𝘀
Passons directement au problème: la taille du fichier. Toutes les autres réponses répertoriées ici gonflent votre code à l'extrême. Je vous présente que pour les meilleures performances possibles, la lisibilité du code, la gestion de projet à grande échelle, la suggestion de syntaxe dans de nombreux éditeurs de code et la réduction de la taille du code par minification, c'est la bonne façon de faire les énumérations: les variables de notation de soulignement.
wvwvwvwvwvwvwvwvwvwvwvwvwvwvwvvvvwvwvwvv
Comme démontré dans le tableau ci-dessus et l'exemple ci-dessous, voici cinq étapes faciles pour commencer:
- Déterminez un nom pour le groupe d'énumération. Pensez à un nom qui peut décrire le but de l'énumération ou au moins les entrées de l'énumération. Par exemple, un groupe d'énumérations représentant des couleurs choisies par l'utilisateur pourrait être mieux nommé COLORCHOICES que COLORS.
- Décidez si les énumérations dans le groupe sont mutuellement exclusives ou indépendantes. S'ils s'excluent mutuellement, démarrez chaque nom de variable énuméré par
ENUM_
. Si indépendant ou côte à côte, utilisez INDEX_
.
- Pour chaque entrée, créez une nouvelle variable locale dont le nom commence par
ENUM_
ou INDEX_
, puis le nom du groupe, puis un trait de soulignement, puis un nom convivial unique pour la propriété
- Ajouter un
ENUMLENGTH_
, ENUMLEN_
, INDEXLENGTH_
ou INDEXLEN_
(si LEN_
ou LENGTH_
est de préférence personnelle) variables énumérées à la fin. Vous devez utiliser cette variable dans la mesure du possible dans votre code pour vous assurer que l'ajout d'une entrée supplémentaire à l'énumération et l'incrémentation de cette valeur ne cassera pas votre code.
- Donnez chaque variable une valeur dénombrée successive d' une plus que le dernier, à partir de 0. Il y a des commentaires sur cette page que par exemple
0
ne doit pas être utilisé comme une valeur énumérée parce que 0 == null
, 0 == false
, 0 == ""
et d' autres JS folie. Je vous soumets que, pour éviter ce problème et booster les performances en même temps, utilisez toujours ===
et ne laissez jamais ==
apparaître dans votre code sauf avec typeof
(ex typeof X == "string"
). Pendant toutes mes années d'utilisation ===
, je n'ai jamais eu de problème avec l'utilisation de 0 comme valeur d'énumération. Si vous êtes toujours délicat, alors 1
pourrait être utilisé comme valeur de départ dans les ENUM_
énumérations (mais pas dans les INDEX_
énumérations) sans pénalité de performance dans de nombreux cas.
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
}
Voici comment je me souviens quand utiliser INDEX_
et quand utiliser ENUM_
:
// Precondition: var arr = []; //
arr[INDEX_] = ENUM_;
Cependant, ENUM_
peut, dans certaines circonstances, être approprié comme index, comme lors du comptage des occurrences de chaque élément.
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]
});
Observez que, dans le code ci-dessus, il est vraiment facile d'ajouter un nouveau type d'animal de compagnie: il vous suffira d'ajouter une nouvelle entrée ENUM_PET_RAT
et de la mettre à jour en ENUMLEN_PET
conséquence. Il pourrait être plus difficile et bogué d'ajouter une nouvelle entrée dans d'autres systèmes d'énumération.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
𝗘𝘅𝘁𝗲𝗻𝗱 𝗨𝗽𝗽𝗲𝗿𝗰𝗮𝘀𝗲 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗪𝗶𝘁𝗵 𝗔𝗱𝗱𝗶𝘁𝗶𝗼𝗻
De plus, cette syntaxe d'énumérations permet une extension de classe claire et concise comme indiqué ci-dessous. Pour étendre une classe, ajoutez un numéro d'incrémentation à l' LEN_
entrée de la classe parente. Ensuite, terminez la sous-classe avec sa propre LEN_
entrée afin que la sous-classe puisse être étendue à l'avenir.
(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);
(Longueur: 2 450 octets)
Certains diront peut-être que c'est moins pratique que d'autres solutions: il évite des tonnes d'espace, il prend beaucoup de temps à écrire et il n'est pas recouvert de syntaxe de sucre. Ces personnes auraient raison de ne pas minimiser leur code. Cependant, aucune personne raisonnable ne laisserait de code non minimisé dans le produit final. Pour cette minification, Closure Compiler est le meilleur que je n'ai pas encore trouvé. L'accès en ligne se trouve ici . Le compilateur de fermeture est capable de prendre toutes ces données d'énumération et de les incorporer, ce qui rend votre Javascript super petit et super rapide. Ainsi, Minify avec Closure Compiler. Observer.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
Le compilateur de fermeture est capable d'effectuer des optimisations assez incroyables via des inférences qui dépassent largement les capacités de tout autre minifieur Javascript. Le compilateur de fermeture peut incorporer des variables primitives définies à une valeur fixe. Closure Compiler est également capable de faire des inférences sur la base de ces valeurs intégrées et d'éliminer les blocs inutilisés dans les instructions if et les boucles.
'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);
(Longueur: 605 octets)
Closure Compiler vous récompense pour un codage plus intelligent et une bonne organisation de votre code car, alors que de nombreux minificateurs punissent le code organisé avec une taille de fichier minifiée plus grande, Closure Compiler est capable de passer au crible toute votre propreté et votre santé mentale pour produire une taille de fichier encore plus petite si vous utilisez des astuces comme les énumérations de nom de variable. Dans cet esprit, c'est le Saint Graal du codage: un outil qui aide à la fois votre code avec une taille réduite et aide votre esprit en formant de meilleures habitudes de programmation.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
𝗦𝗺𝗮𝗹𝗹𝗲𝗿 𝗖𝗼𝗱𝗲 𝗦𝗶𝘇𝗲
Voyons maintenant la taille du fichier équivalent sans aucune de ces énumérations.
Source sans utiliser d'énumérations (longueur: 1 973 octets (477 octets de moins que le code énuméré!))
Minifié sans utiliser d'énumérations (longueur: 843 octets (238 octets de plus que le code énuméré ))
Comme vu, sans énumérations, le code source est plus court au prix d'un code minifié plus grand. Je ne te connais pas; mais je sais avec certitude que je n'incorpore pas de code source dans le produit final. Ainsi, cette forme d'énumération est bien supérieure dans la mesure où elle se traduit par des tailles de fichier minifiées plus petites.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
𝗖𝗼𝗼𝗽𝗲𝗿𝗮𝘁𝗶𝘃𝗲 🤝 𝗕𝘂𝗴 𝗙𝗶𝘅𝗶𝗻𝗴
Un autre avantage de cette forme d'énumération est qu'elle peut être utilisée pour gérer facilement des projets à grande échelle sans sacrifier la taille du code minifié. Lorsque vous travaillez sur un grand projet avec de nombreuses autres personnes, il peut être avantageux de marquer et d'étiqueter explicitement les noms de variable avec qui a créé le code afin que le créateur d'origine du code puisse être rapidement identifié pour la correction collaborative de bogues.
// 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
}
𝗦𝘂𝗽𝗲𝗿𝗶𝗼𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲
De plus, cette forme de dénombrement est également beaucoup plus rapide après minification. Dans les propriétés nommées normales, le navigateur doit utiliser des hashmaps pour rechercher où se trouve la propriété sur l'objet. Bien que les compilateurs JIT mettent en cache intelligemment cet emplacement sur l'objet, il y a encore une énorme surcharge due à des cas spéciaux tels que la suppression d'une propriété inférieure de l'objet.
Mais, avec les tableaux PACKED_ELEMENTS indexés en nombre entier non épars continus , le navigateur peut ignorer une grande partie de cette surcharge car l'index de la valeur dans le tableau interne est déjà spécifié. Oui, selon la norme ECMAScript, toutes les propriétés sont censées être traitées comme des chaînes. Néanmoins, cet aspect de la norme ECMAScript est très trompeur sur les performances car tous les navigateurs ont des optimisations spéciales pour les index numériques dans les tableaux.
/// Hashmaps are slow, even with JIT juice
var ref = {};
ref.count = 10;
ref.value = "foobar";
Comparez le code ci-dessus au code ci-dessous.
/// 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";
On pourrait s'opposer au code avec des énumérations qui semblent être beaucoup plus longues que le code avec des objets ordinaires, mais les apparences peuvent être trompeuses. Il est important de se rappeler que la taille du code source n'est pas proportionnelle à la taille de sortie lors de l'utilisation du compilateur de fermeture épique. Observer.
/// Hashmaps are slow, even with JIT juice
var a={count:10,value:"foobar"};
Le code minifié sans énumérations est au-dessus et le code minifié avec énumérations est ci-dessous.
/// Arrays, however, are always lightning fast
var a=[10,"foobar"];
L'exemple ci-dessus montre qu'en plus d'avoir des performances supérieures, le code énuméré entraîne également une taille de fichier réduite plus petite.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
𝗘𝗮𝘀𝘆 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴
De plus, la cerise sur le gâteau de celui-ci utilise cette forme d'énumération avec l' éditeur de texte CodeMirror en mode Javascript. Le mode de mise en évidence de la syntaxe Javascript de CodeMirror met en évidence les variables locales dans la portée actuelle. De cette façon, vous savez instantanément quand vous tapez correctement un nom de variable car si le nom de variable a été précédemment déclaré avec le var
mot - clé, alors le nom de variable prend une couleur spéciale (cyan par défaut). Même si vous n'utilisez pas CodeMirror, au moins le navigateur lance un utile[variable name] is not defined
exception lors de l'exécution de code avec des noms d'énumération mal tapés. En outre, les outils JavaScript tels que JSLint et Closure Compiler sont très bruyants pour vous dire quand vous saisissez mal le nom d'une variable d'énumération. CodeMirror, le navigateur et divers outils Javascript réunis rendent le débogage de cette forme d'énumération très simple et très facile.
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
}
Dans l'extrait ci-dessus, vous avez été alerté d'une erreur car il ENUM_COLORENUM_DNE
n'existe pas.
wvwwvw wvwvwvw wvwxvw wvwvwv vwvwvw wvwvvw wvwwvw wvwvwvw wvwvw wvwvwv vwvxwvw wvwvvw wvwwvw wvwvwwvwvv
𝗖𝗼𝗻𝗰𝗹𝘂𝘀𝗶𝗼𝗻 ☑
Je pense qu'il est prudent de dire que cette méthodologie d'énumération est en effet la meilleure voie à suivre non seulement pour la taille de code minifiée, mais aussi pour les performances, le débogage et la collaboration.
Après avoir lu une question utile, je remercie l'auteur d'avoir consacré du temps à son écriture en cliquant sur la flèche vers le haut en haut à gauche dans la zone de question. Chaque boîte de réponse a également l'une de ces flèches vers le haut.
0
comme numéro d'énumération. À moins qu'il ne soit utilisé pour quelque chose qui n'a pas été défini. JS les traitefalse || undefined || null || 0 || "" || '' || NaN
tous comme la même valeur lorsqu'ils sont comparés à l'aide==
.