JavaScript eval() -Syntax

Question

Ich habe ein altes Skript zum Ändern der Schriftgröße einer Website durch Hinzufügen eines Klassennamens zum body-Tag, und ein Teil seiner Funktionalität besteht darin, die vorhandene Klasse zu entfernen, bevor Sie sie zu einem anderen ändern die Einstellungen. Das Problem ist, dass es eine eval Zeile gibt, die jede Instanz der Wörter "large", "medium" oder "small" aus anderen Klassen des Body-Tags entfernt, die als eindeutige Bezeichner der Seite fungieren und andere Skripte stören verwenden. Wie kann ich die Eval-Zeile im folgenden Code ändern, sodass sie nur ganzen Wörtern entspricht?

/* 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

Es gibt keinen guten Grund, hier den eval(...) Betrieb zu verwenden. Wie viele hier erwähnt, eval ist eine schlechte Praxis.

Lesen Sie mehr darüber hier: what does eval do and why its evil?

Doing eval("/large|medium|small/ig") ist die gleiche wie var pattern = /large|medium|small/ig/. Ersteres würde das string auswerten, um herauszufinden, was dieser Ausdruck bedeutet, bevor er als ein Literal für reguläre Ausdrücke abgeleitet wird. Während letzteres eine einfache Erklärung ist, ist es im Grunde effizienter, da Sie die Bewertungsschritte überspringen.

Da das Schriftmuster statisch ist (sich nicht ändert), ist es immer besser, es als ein reguläres Ausdrucksobjekt zu deklarieren und es weiterhin zu verwenden.

Beispiel:

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");