JavaScript eval() syntax

Question

J'ai un ancien script pour changer la taille de police d'un site Web en ajoutant un nom de classe à l'étiquette du corps, et une partie de sa fonctionnalité est de supprimer la classe existante avant de la changer pour l'autre paramètres. Le problème est qu'il y a une ligne eval qui supprime toute instance des mots "grand", "moyen" ou "petit" des autres classes sur l'étiquette du corps qui agissent comme des identifiants uniques de la page, ce qui interfère avec d'autres scripts que je suis en utilisant. Comment puis-je changer la ligne eval dans le code suivant afin qu'elle ne corresponde qu'à des mots entiers?

/* Override CSS with global font size selected by user */ 
 
function changeFontSize(size) { 
 
var oldClasses, currentClass; 
 

 
/*sets key words to be eliminated*/ 
 
oldClasses = eval("/large|medium|small/ig"); 
 

 
/*gets the current class names*/ 
 
currentClass = document.body.className; 
 

 
/*eliminates key words from string, then adds new size*/ 
 
document.body.className = currentClass.replace(oldClasses, "") + " " + size; 
 
}

Answer 1

Il n'y a pas de bonne raison d'utiliser l'opération ici eval(...). Comme beaucoup mentionné ici, eval est une mauvaise pratique.

En savoir plus ici: what does eval do and why its evil?

Faire eval("/large|medium|small/ig") est le même que var pattern = /large|medium|small/ig/. Le premier évaluera le string pour comprendre ce que cette expression signifie avant de le dériver en tant que littéral d'expression régulière. Alors que cette dernière est une déclaration simple, elle est essentiellement plus efficace lorsque vous ignorez les étapes d'évaluation. Comme le modèle de police est statique (ne change pas), il est toujours préférable de le déclarer comme un objet d'expression régulière et de continuer à l'utiliser.

Exemple:

var FONT_SIZE_NAMES_PATTERN = new RegExp(/\b(large|medium|small)\b/ig); 
 

 
function changeFontSize(size) { 
 
    var oldClasses, currentClass; 
 

 
    /*gets the current class names*/ 
 
    currentClass = "large"; 
 

 
    /*eliminates key words from string, then adds new size*/ 
 
    // document.body.className = currentClass.replace(FONT_SIZE_NAMES_PATTERN, "") + " " + size; 
 
    console.log("New class name = " + currentClass.replace(FONT_SIZE_NAMES_PATTERN, "") + " " + size); 
 
} 
 

 
changeFontSize("VERY LARGE");