Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code

Es besteht eine inhärente Beziehung zwischen Mustern und Refactoring. Aus einer bestimmten Perspektive besteht der Zweck von Entwurfsmustern darin, Ziele für viele Refactoring-Aktivitäten bereitzustellen.

1. Extrahieren von Funktionen

Bei der JavaScript-Entwicklung beschäftigen wir uns die meiste Zeit mit Funktionen. Daher hoffen wir, dass diese Funktionen gute Namen haben und die im Funktionskörper enthaltene Logik klar ist. Wenn eine Funktion zu lang ist und mehrere Kommentare benötigt, um sie leichter lesbar zu machen, ist ein Refactoring dieser Funktionen erforderlich.
Wenn es in einer Funktion einen Codeabschnitt gibt, der isoliert werden kann, ist es am besten, diesen Code in eine andere, unabhängige Funktion einzufügen. Dies ist eine sehr häufige Optimierungsaufgabe und die Vorteile hiervon sind hauptsächlich folgende.

• Vermeiden Sie sehr große Funktionen.
• Separate Funktionen erleichtern die Wiederverwendung von Code.
• Unabhängige Funktionen können leichter überschrieben werden.
• Wenn eine unabhängige Funktion einen guten Namen hat, dient sie selbst als Kommentar.

Beispielsweise müssen wir in einer Funktion, die für das Abrufen von Benutzerinformationen zuständig ist, auch Protokolle drucken, die mit den Benutzerinformationen in Zusammenhang stehen. Daher kann die Anweisung zum Drucken von Protokollen in einer separaten Funktion gekapselt werden:

var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', Funktion( Daten ){
    console.log( 'Benutzer-ID: ' + Daten.Benutzer-ID );
    console.log( 'Benutzername: ' + data.userName );
    console.log( 'Spitzname: ' + data.Spitzname );
  });
};

Zu:

var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', Funktion( Daten ){
    printDetails(Daten);
  });
};

var printDetails = Funktion(Daten){
  console.log( 'Benutzer-ID: ' + Daten.Benutzer-ID );
  console.log( 'Benutzername: ' + data.userName );
  console.log( 'Spitzname: ' + data.Spitzname );
};

2. Doppelte bedingte Snippets zusammenführen

Wenn eine Funktion in ihrem Hauptteil einige bedingte Verzweigungsanweisungen hat und innerhalb dieser bedingten Verzweigungsanweisungen einige doppelte Codes verstreut sind, ist es notwendig, die doppelten Codes zusammenzuführen und zu entfernen. Angenommen, wir haben eine Paging-Funktion paging, die einen Parameter currPage erhält, der die Seitennummer darstellt, zu der gesprungen werden soll. Um zu verhindern, dass currPage zu kleine oder zu große Zahlen übergibt, müssen wir vor dem Springen den Wert manuell korrigieren, wie im folgenden Pseudocode gezeigt:

var Paging = Funktion (aktuelle Seite) {
  wenn ( aktuelleSeite <= 0 ) {
    aktuelleSeite = 0;
    jump( aktuelleSeite ); // springen }sonst wenn ( aktuelleSeite >= Gesamtseite ){
    aktuelleSeite = Gesamtseite;
    jump( aktuelleSeite ); // springen }else{
    Sprung( aktuelleSeite ); // Sprung }
};

Wie Sie sehen, erscheint der für das Springen verantwortliche Code jump(currPage) in jedem bedingten Zweig, sodass dieser Code abgetrennt werden kann:

var Paging = Funktion (aktuelle Seite) {
  wenn ( aktuelleSeite <= 0 ) {
    aktuelleSeite = 0;
  }sonst wenn ( aktuelleSeite >= Gesamtseite ){
    aktuelleSeite = Gesamtseite;
  }
  jump( currPage ); // trenne die Sprungfunktion };

3. Extrahieren Sie bedingte Verzweigungsanweisungen in Funktionen

In der Programmierung sind komplexe bedingte Verzweigungsanweisungen ein wichtiger Grund dafür, dass Programme schwer zu lesen und zu verstehen sind und leicht zu einer großen Funktion führen können. Angenommen, es besteht die Anforderung, eine getPrice-Funktion zu schreiben, um den Preis eines Produkts zu berechnen. Für die Berechnung des Produkts gilt nur eine Regel: Wenn es Sommer ist, werden alle Produkte mit 20 % Rabatt verkauft. Der Code lautet wie folgt:

var getPrice = Funktion( Preis ) {
var date = neues Datum();
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // Sommer-Rückgabepreis * 0,8;
}
Rücksendepreis;
};

Beachten Sie diesen Code:

wenn ( date.getMonth() >= 6 und date.getMonth() <= 9 ){
// ...
}

Die Bedeutung dieses Codes ist ganz einfach: Er bestimmt, ob es Sommer ist (Juli bis Oktober). Obwohl dieser Code kurz ist, besteht immer noch eine gewisse Distanz zwischen der durch den Code ausgedrückten Absicht und dem Code selbst. Personen, die den Code lesen, müssen mehr Mühe aufwenden, um die darin vermittelte Absicht zu verstehen. Tatsächlich kann dieser Code zu einer separaten Funktion verfeinert werden, die nicht nur die Bedeutung des Codes genauer ausdrücken kann, sondern auch der Funktionsname selbst als Kommentar dienen kann. Der Code lautet wie folgt:

var istSommer = function(){
  var date = neues Datum();
  gibt date.getMonth() >= 6 und date.getMonth() <= 9 zurück;
};

var getPrice = Funktion( Preis ) {
  if ( isSummer() ){ // Sommer-Rückgabepreis * 0,8;
  }
  Rücksendepreis;
};

4. Verwenden Sie Schleifen angemessen

Wenn im Funktionskörper einige Codes tatsächlich für sich wiederholende Arbeiten verantwortlich sind, kann die rationale Verwendung von Schleifen nicht nur dieselbe Funktion ausführen, sondern auch die Codemenge reduzieren. Unten sehen Sie einen Codeabschnitt zum Erstellen eines XHR-Objekts. Um das Beispiel zu vereinfachen, berücksichtigen wir nur IE-Browser unter Version 9. Der Code lautet wie folgt:

var createXHR = function(){
  var xhr;
  versuchen{
    xhr = neues ActiveXObject( "MSXML2.XMLHttp.6.0" );
  }fangen(e){
    versuchen{
      xhr = neues ActiveXObject( "MSXML2.XMLHttp.3.0" );
    }fangen(e){
      xhr = neues ActiveXObject('MSXML2.XMLHttp');
    }
  }
  xhr zurückgeben;
};

var xhr = erstelleXHR();
``
Jetzt können wir Schleifen flexibel verwenden, um den gleichen Effekt wie mit dem obigen Code zu erzielen:
```js
var createXHR = function(){
var Versionen = [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
  für (var i = 0, Version; Version = Versionen[i++];){
    versuchen{
      gibt neues ActiveXObject(Version) zurück;
    }fangen(e){

    }
  }
};

var xhr = erstelleXHR();

5. Beenden Sie die Funktion frühzeitig, anstatt bedingte Zweige zu verschachteln

Viele Programmierer haben diese Vorstellung: „Jede Funktion kann nur einen Eingang und einen Ausgang haben.“ Moderne Programmiersprachen beschränken Funktionen auf nur einen Eingang. Aber zu der Frage „Eine Funktion hat nur einen Ausgang“ gibt es oft unterschiedliche Meinungen.

Der folgende Pseudocode ist ein typischer Code, der der Regel „Funktion hat nur einen Ausgang“ entspricht:

var del = Funktion(Objekt){
  varret;
  if ( !obj.isReadOnly ){ // Kann nur gelöscht werden, wenn es nicht schreibgeschützt ist if ( obj.isFolder ){ // Wenn es ein Ordner ist ret = deleteFolder( obj );
    }else if ( obj.isFile ){ // Wenn es eine Datei ist ret = deleteFile( obj );
    }
  }
  Rückkehr ret;
};

Verschachtelte bedingte Verzweigungsanweisungen sind definitiv ein Albtraum für Code-Betreuer. Für Leute, die den Code lesen, sind verschachtelte if- und else-Anweisungen schwieriger zu lesen und zu verstehen als einfache if- und else-Anweisungen. Manchmal liegen die linke und die rechte Klammer eines äußeren if-Zweiges 500 Meter auseinander. Um es mit den Worten des „Refactorings“ auszudrücken: Verschachtelte bedingte Verzweigungen werden oft von Programmierern geschrieben, die fest davon überzeugt sind, dass „jede Funktion nur einen Ausgang haben kann“. Wenn Sie an der restlichen Funktion jedoch nicht interessiert sind, sollten Sie das Programm in Wirklichkeit sofort beenden. Wenn Sie die Leser auf andere, nutzlose Abschnitte verweisen, wird das ihr Verständnis des Programms nur beeinträchtigen.

Wir können also einige bedingte Verzweigungen auswählen und die Funktion unmittelbar nach dem Eintritt in diese bedingten Verzweigungen beenden. Hierfür gibt es einen gängigen Trick: Wenn wir mit einem verschachtelten if-Zweig konfrontiert sind, können wir den äußeren if-Ausdruck umkehren. Die rekonstruierte del-Funktion lautet wie folgt:

var del = Funktion(Objekt){
  if ( obj.isReadOnly ){ // If-Ausdruck umkehren return;
  }
  wenn ( obj.isFolder ) {
    gibt Ordner löschen(Objekt) zurück;
  }
  wenn ( obj.isFile ) {
    gibt Datei löschen(Objekt) zurück;
  }
};

6. Übergeben Sie Objektparameter anstelle langer Parameterlisten

Manchmal kann eine Funktion mehrere Parameter erhalten. Je mehr Parameter vorhanden sind, desto schwieriger ist die Funktion zu verstehen und zu verwenden. Wer diese Funktion verwendet, muss sich zunächst über die Bedeutung aller Parameter im Klaren sein. Bei der Verwendung muss darauf geachtet werden, dass kein Parameter fehlt oder die Positionen zweier Parameter vertauscht werden. Wenn wir zwischen dem dritten und vierten Parameter einen neuen Parameter hinzufügen möchten, sind zahlreiche Codeänderungen erforderlich. Der Code lautet wie folgt:

var setUserInfo = function( id, name, address, sex, mobile, qq ){
  Konsole.log('id=' + ID);
  Konsole.log('Name=' +Name);
  console.log( 'Adresse= ' + Adresse );
  console.log( 'Geschlecht= ' + Geschlecht );
  Konsole.log('mobile=' + mobile);
  Konsole.log('qq= ' + qq);
};

setUserInfo( 1314, 'sven', 'shenzhen', 'männlich', '137********', 377876679 );

Zu diesem Zeitpunkt können wir alle Parameter in ein Objekt einfügen und das Objekt dann an die Funktion setUserInfo übergeben. Die von der Funktion setUserInfo benötigten Daten können selbst aus dem Objekt abgerufen werden. Jetzt müssen Sie sich keine Gedanken mehr über die Anzahl und Reihenfolge der Parameter machen. Stellen Sie einfach sicher, dass die den Parametern entsprechenden Schlüsselwerte unverändert bleiben:

var setUserInfo = Funktion( Objekt ){
  Konsole.log('id=' + Objekt-ID);
  Konsole.log( 'Name= ' + Objektname );
  console.log( 'Adresse= ' + Objekt.Adresse );
  Konsole.log('Geschlecht=' + Objekt.Geschlecht);
  console.log( 'mobile= ' + obj.mobile );
  Konsole.log('qq=' + obj.qq);
};

setUserInfo({
  ID: 1314,
  Name: 'sven',
  Adresse: 'shenzhen',
  Geschlecht: 'männlich',
  Handy: '137********',
  QQ: 377876679
});

7. Minimieren Sie die Anzahl der Parameter

Wenn Sie beim Aufrufen einer Funktion mehrere Parameter übergeben müssen, ist diese Funktion eine Herausforderung. Wir müssen herausfinden, was diese Parameter darstellen, und sie sorgfältig und in der richtigen Reihenfolge an die Funktion übergeben. Wenn eine Funktion ohne Übergabe von Parametern verwendet werden kann, ist dieser Funktionstyp sehr beliebt. Bei der tatsächlichen Entwicklung ist die Übergabe von Parametern an Funktionen unvermeidlich, wir sollten jedoch versuchen, die Anzahl der von der Funktion empfangenen Parameter zu reduzieren. Hier ist ein sehr einfaches Beispiel. Es gibt eine Zeichenfunktion draw, die jetzt nur noch ein Quadrat zeichnen kann. Sie erhält drei Parameter, nämlich Breite, Höhe und Quadrat der Figur:

var draw = function(Breite, Höhe, Quadrat){};

Da sich aber die Fläche des Quadrats tatsächlich aus der Breite und Höhe berechnen lässt, können wir den Parameter Quadrat aus der Zeichenfunktion entfernen:

var draw = Funktion(Breite, Höhe){
  var Quadrat = Breite * Höhe;
};

Vorausgesetzt, dass diese Zeichenfunktion in Zukunft das Zeichnen von Kreisen unterstützt, müssen wir die Parameter Breite und Höhe durch den Radius ersetzen. Das Flächenquadrat der Figur sollte jedoch niemals vom Client übergeben werden, sondern innerhalb der Zeichenfunktion berechnet werden, indem den übergebenen Parametern bestimmte Regeln hinzugefügt werden. An diesem Punkt können wir das Strategiemuster verwenden, um die Zeichenfunktion zu einer Funktion zu machen, die das Zeichnen mehrerer Grafiken unterstützt.

8. Vermeiden Sie die Verwendung ternärer Operatoren

Einige Programmierer verwenden gerne in großem Umfang ternäre Operatoren, um herkömmliche if- und else-Anweisungen zu ersetzen. Der Grund dafür ist, dass der ternäre Operator eine hohe Leistung aufweist und wenig Code erfordert. Allerdings sind beide Gründe schwer haltbar.

Selbst wenn wir annehmen, dass der ternäre Operator tatsächlich effizienter ist als if und else, ist dieser Unterschied völlig vernachlässigbar. Selbst wenn ein Codeabschnitt eine Million Mal wiederholt wird, ist der Zeitaufwand bei der Verwendung des ternären Operators in der tatsächlichen Entwicklung genauso hoch wie bei der Verwendung von „if“ und „else“.
Ebenso ist die durch den ternären Operator eingesparte Codemenge im Vergleich zum Verlust an Lesbarkeit und Wartbarkeit des Codes vernachlässigbar. Es gibt viele Möglichkeiten, das Laden von JS-Dateien zu beschleunigen, z. B. Komprimierung, Zwischenspeicherung, Verwendung von CDN und unterschiedlichen Domänennamen. Sich nur auf die Anzahl der durch die Verwendung des ternären Operators eingesparten Zeichen zu konzentrieren, ist so, als würde ein 135 kg schwerer Mensch Schuppen für sein Gewicht verantwortlich machen.

Wenn die bedingte Verzweigungslogik einfach und klar ist, ist die Verwendung des ternären Operators kein Problem:

var global = Fenstertyp !== "undefiniert" ? Fenster: dies;

Wenn die bedingte Verzweigungslogik jedoch sehr komplex ist, wie im folgenden Code gezeigt, ist es die beste Lösung, if und else Schritt für Schritt zu schreiben. Die if- und else-Anweisungen haben viele Vorteile. Erstens sind sie relativ einfach zu lesen. Zweitens sind sie leichter zu ändern, als den Code rund um den ternären Operator zu ändern:

wenn ( !aup || !bup ) {
  gibt ein === doc zurück? -1:
    b === Dokument? 1:
    aup? -1:
    bup? 1:
    sortInput?
    (indexOf.call(sortInput, a) - indexOf.call(sortInput, b)):
    0;
}

9. Kettenanrufe richtig nutzen

Programmierer, die häufig jQuery verwenden, sind es gewohnt, Methodenaufrufe zu verketten. In JavaScript ist es einfach, verkettete Methodenaufrufe zu implementieren, d. h. das Objekt selbst nach Abschluss des Methodenaufrufs zurückzugeben, wie im folgenden Code gezeigt:

var Benutzer = function(){
  diese.id = null;
  dieser.name = null;
};

Benutzer.prototype.setId = Funktion (ID) {
  diese.id = ID;
  gib dies zurück;
};

Benutzer.prototype.setName = Funktion(Name){
  dieser.name = Name;
  gib dies zurück;
};

console.log( neuer Benutzer().setId( 1314 ).setName( 'sven' ) );

oder:

var Benutzer = {
  ID: null,
  Name: null,
  setId: Funktion( id ) {
    diese.id = ID;
    gib dies zurück;
  },
  setName: Funktion( Name ){
    dieser.name = Name;
    gib dies zurück;
  }
};

console.log( User.setId( 1314 ).setName( 'sven' ) );

Die Verwendung der Kettenaufrufmethode verursacht keine allzu großen Leseschwierigkeiten und kann tatsächlich einige Zeichen und Zwischenvariablen einsparen, die Anzahl der eingesparten Zeichen ist jedoch ebenfalls vernachlässigbar. Der Nachteil von Kettenaufrufen besteht darin, dass sie beim Debuggen sehr unpraktisch sind. Wenn wir wissen, dass in einer Kette ein Fehler aufgetreten ist, müssen wir die Kette zunächst zerlegen und einige Debugprotokolle oder Haltepunkte hinzufügen, um den Fehler zu lokalisieren.

Wenn die Struktur der Kette relativ stabil ist und später nicht leicht geändert werden kann, ist an der Verwendung von Kettenaufrufen nichts auszusetzen. Wenn die Kette jedoch anfällig für Änderungen ist, was das Debuggen und die Wartung erschwert, wird empfohlen, die normale Aufrufform zu verwenden:

var Benutzer = neuer Benutzer();

Benutzer.setId( 1314 );
Benutzer.setName( 'sven' );

10. Große Klassen aufteilen

In der ersten Version der HTML5-Version von Street Fighter ist die Spirit-Klasse, die für die Erstellung von Spielcharakteren verantwortlich ist, sehr groß. Sie ist nicht nur für die Erstellung von Charakter-Sprites verantwortlich, sondern umfasst auch die Angriffs-, Verteidigungs- und anderen Aktionsmethoden des Charakters. Der Code lautet wie folgt:

var Spirit = Funktion(Name){
  dieser.name = Name;
};

Spirit.prototype.attack = Funktion (Typ) { // Angriff, wenn (Typ === 'waveBoxing') {
    console.log(this.name + ': Hadouken verwenden');
  }sonst wenn( Typ === 'whirlKick' ){
    console.log(this.name + ': Wirbelwindkick verwenden');
  }
};

var spirit = neuer Spirit('RYU');

spirit.attack( 'waveBoxing' ); // Ausgabe: RYU: Benutze Hadouken spirit.attack( 'whirlKick' ); // Ausgabe: RYU: Benutze WhirlKick

Später stellte sich heraus, dass die Implementierung der Methode Spirit.prototype.attack zu groß war und es tatsächlich unbedingt notwendig war, sie als separate Klasse zu haben. Objektorientiertes Design fördert die Verteilung des Verhaltens auf eine angemessene Anzahl kleinerer Objekte:

var Angriff = Funktion (Geist) {
  dieser.Geist = Geist;
};

Attack.prototype.start = Funktion(Typ){
  gib dies zurück.Liste[Typ].Aufruf(dies);
};

Angriff.Prototyp.Liste = {
  waveBoxing: Funktion(){
    console.log(this.spirit.name + ': Hadouken verwenden');
  },
  whirlKick: Funktion(){
    console.log(this.spirit.name + ': Wirbelwindkick verwenden');
  }
};

Die Spirit-Klasse ist nun deutlich einfacher und beinhaltet nicht mehr eine Vielzahl von Angriffsmethoden. Stattdessen delegiert sie die Angriffsaktionen an Objekte der Attack-Klasse. Dieser Code ist ebenfalls eine Anwendung des Strategiemusters:

var Spirit = Funktion(Name){
  dieser.name = Name;
  this.attackObj = neuer Angriff(dieses);
};

Spirit.prototype.attack = Funktion (Typ) { // Angriff this.attackObj.start (Typ);
};

var spirit = neuer Spirit('RYU');

spirit.attack( 'waveBoxing' ); // Ausgabe: RYU: Benutze Hadouken spirit.attack( 'whirlKick' ); // Ausgabe: RYU: Benutze Whirlwind

11. Verwenden Sie die Eingabetaste, um mehrere Schleifen zu verlassen

Angenommen, der Funktionskörper enthält eine Anweisung mit doppelter Schleife. Wir müssen die innere Schleife beurteilen und die äußere Schleife verlassen, wenn ein bestimmter kritischer Zustand erreicht ist. Meistens führen wir eine Steuerflagvariable ein:

var func = funktion(){
  var flag = falsch;
  für (var i = 0; i < 10; i++) {
    für (var j = 0; j < 10; j++) {
      wenn (i * j >30){
        Flagge = wahr;
        brechen;
      }
    }
    wenn ( flag === wahr ) {
      brechen;
    }
  }
};

Der zweite Ansatz besteht darin, das Loop-Flag zu setzen:

var func = funktion(){
  äußere Schleife:
  für (var i = 0; i < 10; i++) {
    innerer Loop:
    für (var j = 0; j < 10; j++) {
      wenn (i * j >30){
        äußere Schleife unterbrechen;
      }
    }
  }
};

Beide Ansätze sind zweifellos schwindelerregend, und ein einfacherer Ansatz besteht darin, die gesamte Methode einfach zu verlassen, wenn Sie die Schleife beenden müssen:

var func = funktion(){
  für (var i = 0; i < 10; i++) {
    für (var j = 0; j < 10; j++) {
      wenn (i * j >30){
        zurückkehren;
      }
    }
  }
};

Natürlich bringt die Verwendung von „return“, um die Methode direkt zu beenden, ein Problem mit sich. Was ist, wenn nach der Schleife noch Code ausgeführt werden muss? Wenn wir die gesamte Methode vorzeitig beenden, kann dieser Code nicht ausgeführt werden:

var func = funktion(){
  für (var i = 0; i < 10; i++) {
    für (var j = 0; j < 10; j++) {
      wenn (i * j >30){
        zurückkehren;
      }
    }
  }
  console.log( i ); // Es besteht keine Chance, dass dieser Code ausgeführt wird};

Um dieses Problem zu lösen, können wir den Code nach der Schleife nach der Rückgabe einfügen. Wenn es viele Codes gibt, sollten sie in eine separate Funktion verfeinert werden:

var drucken = Funktion(i){
  konsole.log( i );
};

var func = funktion(){
  für (var i = 0; i < 10; i++) {
    für (var j = 0; j < 10; j++) {
      wenn (i * j >30){
        drucke zurückgeben(i);
      }
    }
  }
};

Funktion();

Damit ist dieser Artikel über 11 erstaunliche Best Practices für JavaScript-Code-Refactoring abgeschlossen. Weitere relevante Inhalte zum JavaScript-Code-Refactoring finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!