So gestalten Sie Ihre JavaScript-Funktionen eleganter

Ich werde eine Reihe zu JS-Kenntnissen schreiben, die hauptsächlich darin besteht, verschiedene praktische Tipps und Tricks zu JS zusammenzufassen. In diesem Artikel wird hauptsächlich untersucht, wie wir unsere Funktionen klarer gestalten können.

Objektparameter durch Destrukturierung

Wenn Ihre Funktion viele Argumente (mehr als zwei) annehmen soll, sollten Sie ein Objekt verwenden. Auf dieser Grundlage können die erforderlichen Parameter mittels Dekonstruktionssyntax extrahiert werden.

Normales Schreiben

const greet = (obj) => {
  gibt `${obj.greeting}, ${obj.firstName}${obj.lastName}` zurück;
}

umschreiben

const grüßen = ({
  Gruß,
  Vorname,
  Nachname
}) => {
  gibt `${greeting}, ${firstName}${lastName}` zurück;
}

Die Verwendung der Dekonstruktion ist eleganter, wir können weniger sich wiederholende Dinge schreiben und die Benennung ist klarer.

Callback-Funktionen benennen

Eine gute Benennung erleichtert das Lesen des Codes. Das Gleiche gilt für die Benennung von Rückruffunktionen.

Normales Schreiben

const arr = [1, 2, 3].map(a => a * 2);

umschreiben

Konstante Doppelzahl = a => a * 2;
const arr = [1, 2, 3].map(double);

Durch die separate Benennung ist die Bedeutung des Codes auf einen Blick leichter zu erkennen, wie oben gezeigt: Aus dem Namen geht hervor, dass die Rückruffunktion verwendet wird, um jedes Element des ursprünglichen Arrays zu verdoppeln.

Konditionale beschreibend gestalten

Für komplexe bedingte Urteile können wir ausschließlich Funktionen verwenden, um sie auszudrücken, wodurch die bedingte Aussage aussagekräftiger wird.

Normales Schreiben

if (Punktzahl === 100 || verbleibendeSpieler === 1 || verbleibendeSpieler === 0) {
    Spiel beenden();
  }

umschreiben

const winnerExists = () => {
  Rückgabewert === 100 ||
    verbleibendeSpieler === 1 ||
    verbleibendeSpieler === 0
}
wenn (GewinnerExistiert()) {
  Spiel beenden();
}

In der ursprünglichen Schreibweise haben wir einen langen Ausdruck in Klammern, aber es ist schwer zu sagen, was er beurteilt. Nach dem Umschreiben fügen wir es in eine benannte Funktion ein und können die Bedeutung des Ausdrucks anhand des Namens grob verstehen.

Ersetzen Sie Switch-Anweisungen durch Map oder Object

Wenn Ihre Switch-Anweisung lang ist, bedeutet das, dass Sie Ihren Code vereinfachen sollten.

Normales Schreiben

const getValue = (Eigenschaft) => {
  Schalter (Eigenschaft) {
    Fall 'a': {
      Rückgabe 1;
    }
    Fall 'b': {
      Rückgabe 2;
    }
    Fall 'c': {
      Rückgabe 3;
    }
  }
}
Konstantenwert = getValue('a');

Objektumschreiben

const obj = {
  ein: 1,
  b: 2,
  c: 3
}
Konstante val = obj['a'];

Wir verwenden switch, um mehrere Blöcke mit mehreren return-Anweisungen zu verschachteln, nur um den Rückgabewert für einen gegebenen Prop-Wert zu erhalten, aber wir können denselben Effekt mit nur einem Objekt erzielen.

Kartenneuerstellung

const map = neue Map([['a', 1], ['b', 2], ['c', 3]])
const val = map.get('a')

Bei Verwendung von Map ist der Code auch viel kürzer. Wir übergeben ein Array, in dem jedes Element einen Schlüssel und einen Wert enthält. Dann verwenden wir einfach die Get-Methode der Map-Instanz, um den Wert aus dem Schlüssel zu erhalten. Ein Vorteil von Map gegenüber Object besteht darin, dass wir andere Werte wie Zahlen, Boolesche Werte oder Objekte als Schlüssel verwenden können. Objekte können nur Zeichenfolgen oder Symbole als Schlüssel haben.

Verwenden von Object.assign zum Festlegen von Standardeigenschaften

Normales Schreiben

const Menükonfiguration = {
  Titel: null,
  Körper: 'Bar'
};
Funktion Menü erstellen(Konfiguration) {
  Konfigurationstitel = Konfigurationstitel || 'Foo';
  config.body = config.body || 'Leiste';
}
Menü erstellen(Menükonfiguration);

umschreiben

const Menükonfiguration = {
  Titel: 'Bestellung',
  Text: „Senden“
};
Funktion Menü erstellen(Konfiguration) {
  config = Objekt.assign({
    Titel: 'Foo',
    Körper: 'Bar'
  }, Konfiguration);
  // Konfiguration: {Titel: "Bestellung", Text: "Bar"}
  // ...
}
Menü erstellen(Menükonfiguration);

Löschen Sie doppelten Code, führen Sie ähnliche Funktionen zusammen und löschen Sie veralteten Code.

Schlechtes Schreiben

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 }
};

umschreiben

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

Extraktionsfunktion

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.

Beispiel

Beispielsweise müssen wir in einer Funktion, die für das Abrufen von Benutzerinformationen verantwortlich ist, auch Protokolle im Zusammenhang mit Benutzerinformationen drucken.

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

umschreiben

Wir können die Anweisung zum Drucken des Protokolls in einer separaten Funktion kapseln.

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

Referenz: Tipps zum Refactoring von JavaScript – Funktionen klarer und übersichtlicher gestalten „JavaScript-Entwurfsmuster und Entwicklungspraktiken“

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie Sie Ihre JavaScript-Funktion eleganter gestalten können. Weitere verwandte Inhalte zu eleganten JavaScript-Funktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!