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

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

WBOY

Freigeben： 2016-05-16 16:52:05

Original

1281 Leute haben es durchsucht

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?