Erfahrungsaustausch und Tipps zur Vermeidung der wiederholten Ausführung von Code in JavaScript_Javascript-Tipps

Ich gehe gerne auf einige große Websites und schaue mir deren Originalcode an, in der Hoffnung, einige Muster zu finden, die ich auf meinen eigenen Code anwenden kann, oder einige Tools und Techniken zu entdecken, von denen ich noch nie zuvor gehört habe. Wenn ich mir jedoch den Quellcode dieser großen Websites ansehe, stelle ich häufig ein Problem fest, nämlich wiederholte Codeausführung und wiederholte funktionale Anwendungen. Im Folgenden sind einige Probleme aufgeführt, die beim Anzeigen des Quellcodes aufgetreten sind. Ich teile diese mit Ihnen und hoffe, dass Sie JavaScript-Code präziser und effizienter schreiben können.
Doppelte Sammlungselemente

Das häufigste Problem, das ich in ihrem JavaScript-Code sehe, sind doppelte Sammlungselemente. Obwohl die Ausführungsgeschwindigkeit der jQuery-Auswahl-Engine oder von querySelectorAll sehr hoch ist, nehmen wiederholte Arbeiten mehr Zeit und Ressourcen in Anspruch. Dieses Problem ist sehr einfach und die Lösung lautet wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt:

//
$$(".items").addClass("hide");
// ... und später...
$$(".items") .removeClass("hide") ;

//
var items = $$(".items");
// ... Verwenden Sie ab hier

Ja, wir verurteilen Programmierer, die jeden Tag sich wiederholenden Code schreiben, aber wir müssen ihn trotzdem stärken. Natürlich sind einige wiederholte Aktionen unvermeidbar (z. B. das Laden der Seite durch Ajax), aber in diesen Situationen ist es am besten, Ereignis-Proxys zu verwenden, anstatt Inhalte direkt abzurufen.
Doppelte bedingte Auswertungen

Doppelte bedingte Auswertungen sind häufig, aber es gibt normalerweise ein allgemeines Muster, um sie zu vermeiden. Möglicherweise sehen Sie einen Code, der so geschrieben ist:

Kopieren Sie den Code Der Code lautet wie folgt:

var performMiracle = function() {
// Wenn der Browser Funktion A unterstützt...
if(features.someFeature) {

}
// ... If es unterstützt nicht
else {

}
}

Dies funktioniert, ist aber nicht der effizienteste Code, die obige Bedingung kann mehrmals ausgewertet werden. Es wäre besser, es so zu schreiben:

Kopieren Sie den Code Der Code lautet wie folgt:

var performMiracle = Features .someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff

Es gibt nur eine Bedingung. Und wenn die bedingte Berechnung abgeschlossen ist, wurde die Methode oder Variable als Ergebnis zurückgegeben!
Erstellung doppelter Objekte

Im Vergleich zu wiederholten Vorgängen ist die wiederholte Objekterstellung schwerer zu erkennen und äußert sich normalerweise in regulären Ausdrücken. Schauen Sie sich den Code unten an:

Kopieren Sie den Code Der Code lautet wie folgt:

function cleanText(dirty ) {
// SCRIPT-Tags entfernen
clean = dirty.replace(/]*>([sS]*?)/gi, "");

// Noch etwas bereinigen, vielleicht Leerzeichen usw.

return clean

Der obige Code wird wiederholt erstellt Wenn Sie in diesem Fall dieses Objekt außerhalb dieser Funktion erstellen, können Sie diese Situation vermeiden:

Code kopieren Der Code lautet wie folgt: var scriptRegex = /]*>([sS]*?)function cleanText(dirty) {

// SCRIPT-Tags entfernen
clean = dirty.replace(scriptRegex, ""); usw.

return clean;
}


Im obigen Beispiel wird das reguläre Ausdrucksobjekt nur einmal erstellt, aber mehrmals verwendet – das spart viel CPU-Verarbeitung .

Dies sind nur einige der Beispiele, die ich oft für wiederholte Probleme sehe, die von anderen Programmierern geschrieben wurden. Finden Sie das auch?

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn