JavaScript-Grundlagenreihe: Funktionen und Methoden

1. Der Unterschied zwischen Funktionen und Methoden

• Funktion: Eine Funktion ist ein JavaScript-Codeausschnitt mit einem Namen und Parametern, der einmal definiert und mehrfach aufgerufen werden kann.
• Methode: Wenn eine Funktion und ein Objekt zusammen geschrieben werden, wird die Funktion zu einer „Methode“. Wenn beispielsweise einer Eigenschaft eines Objekts eine Funktion zugewiesen wird, nennen wir dies eine „Methode“.

2. So schreiben Sie eine gute Funktion

In JS werden neben Variablen wahrscheinlich am häufigsten Funktionen verwendet, die die ersten Bewohner von Javascript sind.

2.1 Genaue Benennung

2.1.1 Funktionsbenennung

Der Funktionsname muss eindeutig und semantisch klar sein und die Funktionalität der Funktion einfach zusammenfassen. Wir sollten den Funktionsnamen nicht in der Hoffnung kürzen, den Code zu verkürzen. Dies verbessert weder die Leistung noch die Effizienz. Im Gegenteil, wenn ein Funktionsname nicht klar genug ist, können andere ihn oft nicht verstehen.

Versuchen Sie, so oft wie möglich Verben zu verwenden, z. B.: getXxxxx, setXxxxx. Wenn Sie das Verb an den Anfang stellen, wird die Semantik klarer.

2.1.2 Parameterbenennung

Durch die Betonung der Semantik ermöglicht die Parameterbenennung dem Anrufer, klarer zu erkennen, was zu übergeben ist und welchen Parametern es entspricht. Natürlich sind auch einige gebräuchliche Namen akzeptabel, wie etwa Callback und Fn. Auch ohne die Kommentare zu lesen, weiß ich oft, wofür die Parameter hier sind und was zu übergeben ist.

2.2 Funktionsanmerkungen

/**
 * Zeitformatierungstoolfunktion * 
 * @param { (Datum | Zahl) } Datum - Uhrzeit * @param { string } Einheit - Umrechnungsformat */
export const timeFormat = (Datum: Datum | Zahl | Zeichenfolge, Einheit: Zeichenfolge) => {
  wenn (!Datum) {
    zurückkehren ''
  }
  wenn (Typ des Datums === 'Zeichenfolge') Datum zurückgeben;
  wenn (Typ des Datums === 'Zahl') {
    Datum = neues Datum(Datum);
  }
  const year = date.getFullYear();
  const Monat = Datum.getMonth() + 1;
  const Tag = Datum.getDate();
  const Stunde = Datum.getHours();
  const minute = date.getMinutes();
  const Sekunde = date.getSeconds();
  wenn (Einheit === 'Jahr') returniere `${year}`;
  wenn (Einheit === 'Monat') returniere `${Jahr}-${Monat}`;
  wenn (Einheit === 'Tag') returniere `${Jahr}-${Monat}-${Tag}`;
  wenn (Einheit === 'Stunde') return ‚${Jahr}-${Monat}-${Tag} ${Stunde}‘;
  wenn (Einheit === 'Minute') return ‚${Jahr}-${Monat}-${Tag} ${Stunde}:${Minute}‘;
  if (Einheit === 'Sekunde') return ‚${Jahr}-${Monat}-${Tag} ${Stunde}:${Minute}:${Sekunde}‘;
}

2.2.1 Parameteranmerkungen

/**
 * Zeitformatierungstoolfunktion * 
 * @param { (Datum | Zahl) } Datum - Uhrzeit * @param { string } Einheit - Umrechnungsformat */

@param { Typ } Parameter - Parametererklärung: Typ gibt den Typ des Parameters an, z. B. Zeichenfolge, Zahl. Wenn mehrere Parametertypen vorhanden sind, können sie als { (Zeichenfolge|Zeichenfolge[]) } markiert werden, was angibt, dass dieser Parameter eine Zeichenfolge oder ein Zeichenfolgenarray sein kann.

Objekteigenschaften: Jede Eigenschaft des Objekts muss erklärt werden

/**
 * Funktion zum Zuweisen von Projekten an Mitarbeiter * 
 * @param {Object} employee - Projektmitarbeiter * @param {string} employee.name - Name des Projektmitarbeiters * @param {string} employee.department - Abteilung des Projektmitarbeiters */
 Projekt.prototype.assign = Funktion(Mitarbeiter) {
   // ...
 };

Optionale Parameter:

/**
 * Zeitformatierungstoolfunktion * 
 * @param { (Datum | Zahl | Zeichenfolge) } Datum - Uhrzeit * @param { Zeichenfolge } [Einheit] - Konvertierungsformat */
export const timeFormat = (Datum: Datum | Zahl | Zeichenfolge, Einheit: Zeichenfolge) => {
  // ...
}

Standardwert:

/**
 * Zeitformatierungstoolfunktion * 
 * @param { (Datum | Zahl) } Datum - Uhrzeit * @param { Zeichenfolge } [Einheit = 'Sekunde'] - Konvertierungsformat */
export const timeFormat = (Datum: Datum | Zahl | Zeichenfolge, Einheit = 'Sekunde') => {
  // ...
}

2.3 Funktionsparameter

2.3.1 Standardparameterwerte

export const timeFormat = (Datum: Datum, Einheit = 'Sekunde') => {
  // ...
}

2.3.2 Objektparameter

asynchrone Funktion printer_proxy_print(
  html_str: Zeichenfolge,
  Dateipfad: Zeichenfolge,
  Gerät: Zeichenfolge | undefiniert,
  Ausrichtung: Zahl,
  Druckermodus: Zeichenfolge,
  Breite: Zahl,
  Höhe: Zahl,
  Maßstab: Zahl,
  von: Nummer,
  an: Nummer,
  left_offset: Zahl,
  top_offset: Zahl,
  pdf_tools: Zeichenfolge | nicht definiert,
  begin_page = 1,
  end_page = 1,
  Wiederholungszahlen = 1,
  print_type: Zeichenfolge
) {
    // ...
}

Sie können Parametern Standardwerte zuweisen, sodass Sie nur die ersten paar erforderlichen Parameter übergeben müssen, wie folgt.

asynchrone Funktion printer_proxy_print(
  html_str: Zeichenfolge,
  Dateipfad: Zeichenfolge,
  Gerät = "PC",
  Ausrichtung = "xxx",
  Druckermodus = "xxx",
  Breite = 123,
  Höhe = 123,
  Maßstab = 123,
  von = 123,
  bis = 123,
  linker_Offset = 123,
  top_offset = 123,
  pdf_tools = 123,
  begin_page = 1,
  end_page = 1,
  Wiederholungszahlen = 1,
  Drucktyp = "base64"
) {
    // ...
}

warte auf printer_proxy_print(html_str, file_path);

Die obige Methode scheint machbar. Tatsächlich muss ich alle Parameter vor diesem Parameter erneut übergeben, wenn ein bestimmter Parameter in der Mitte anders ist. Dies ist offensichtlich nicht machbar. Wenn also viele Parameter vorhanden sind, müssen wir sie durch Objektdekonstruktion übergeben.

asynchrone Funktion printer_proxy_print({
  html_str,
  Dateipfad,
  Gerät = "PC",
  Ausrichtung = "xxx",
  Druckermodus = "xxx",
  Breite = 123,
  Höhe = 123,
  Maßstab = 123,
  von = 123,
  bis = 123,
  linker_Offset = 123,
  top_offset = 123,
  pdf_tools = 123,
  begin_page = 1,
  end_page = 1,
  Wiederholungszahlen = 1,
  Drucktyp = "base64"
}) {
    // ...
}

warte auf printer_proxy_print({html_str, file_path});

Der Vorteil der Destrukturierung besteht darin, dass ich eine beliebige Anzahl Parameter übergeben kann, ohne mir Gedanken über die Reihenfolge machen zu müssen. Bei Funktionen mit so vielen Parametern treten jedoch häufig Probleme auf (spezifische Probleme erfordern spezifische Analysen). Das ist das Problem der unten genannten Anzahl von Parametern.

2.3.3 Anzahl der Parameter

Je weniger Parameter eine Funktion hat, desto besser. Es sollten höchstens 3 sein. Mehr Parameter bedeuten oft mehr Beziehungen und mehr logische Schnittpunkte. Bei der Durchführung von Tests ist es oft schwierig, alle Bedingungen abzudecken und die Wahrscheinlichkeit von Problemen steigt.

Viele Parameter bedeuten manchmal auch viele Funktionen, was gegen das Prinzip der Einzelfunktion verstößt.

2.3.4 Parametertyp-Verteidigung

Vor der TS-Entwicklung wissen wir nicht, was der Benutzer eingeben wird, was häufig zu Typfehlern führt. Oder wir möchten Kompatibilität erreichen, wie beispielsweise die vorherige timeFormat-Funktion. Wir hoffen, dass der Benutzer beim Aufrufen das Zeitobjekt oder den Zeitstempel formatieren möchte. In diesem Fall müssen wir einen Abwehrprozess durchführen.

  wenn (!Datum) {
    zurückkehren ''
  }
  wenn (Typ des Datums === 'Zeichenfolge') Datum zurückgeben;
  wenn (Typ des Datums === 'Zahl') {
    Datum = neues Datum(Datum);
  }

Es ist jedoch erwähnenswert, dass wir Parametertypprobleme in den meisten Fällen tatsächlich vermeiden können, auch wenn wir TS verwenden. Dies ist jedoch nicht absolut der Fall, da wir manchmal die von der Schnittstelle zurückgegebenen Daten direkt akzeptieren.

Wir sagen oft, dass wir Benutzereingaben niemals vertrauen sollten. Ebenso vertraue ich den von der Schnittstelle zurückgegebenen Daten nicht. Wir können nicht garantieren, dass das Backend keine Fehler macht. Der vereinbarte Parameter ist vom Array-Typ. Wie kommt es, dass Sie mir null geben, wenn er leer ist?

Natürlich erfordern diese Situationen manchmal Versuch und Irrtum, und manchmal können wir über die Möglichkeiten nachdenken. Seien Sie also nicht faul und schreiben Sie die Art der Beurteilung auf.

2.4 Funktionsrückgabe

2.4.1 Idempotente Funktionen

Was ist Idempotenz? Einfach ausgedrückt sind Eingabe und Ausgabe festgelegt. Die Eingabeparameter bestimmen die Ausgabeparameter. Unabhängig davon, wie oft es aufgerufen wird, sollte das Ergebnis gleich bleiben, solange die Eingabe gleich ist.

  Funktion Summe(a: Zahl, b: Zahl) {
    gib a + b zurück;
  }

Idempotente Funktionen sind wartbar und relativ einfach mit Unit-Tests zu testen.

2.4.2 Reine Funktionen

Von reinen Funktionen wird gefordert, dass sie keine Nebeneffekte haben und zudem idempotent sind.

  const Hund = {
    Name: 'Welpe',
    Alter: 2,
    Gewicht: 30,
  }

  wenn (!Hund.Farbe) {
    console.log('hat keine Farbe');
  }

  Funktion addColor(Hund) {
    Hund.Farbe = "weiß";
  }

  Farbe hinzufügen(Hund);
  console.log(Hund); // {Name: "Welpe", Alter: 2, Gewicht: 30, Farbe: "weiß"}

Wie Sie sehen, ändert die Funktion addColor die Eigenschaften des Hundeobjekts, was bedeutet, dass sie einen Nebeneffekt hat.

  Funktion addColor(Hund) {
    let copyDog = Object.assign({}, Hund);
    copyDog.color = "weiß";
    Kopie zurückgebenDog;
  }

Auf diese Weise werden die Eigenschaften des Hundeobjekts nicht geändert und die Funktion addColor ist eine reine Funktion.

2.4.3 return null

Null ist relativ schwierig zu verarbeiten und erfordert Urteilsvermögen, was zu zusätzlichem Code führt. Es sollte ein Nullobjekt oder ein leeres Array zurückgeben oder eine Ausnahme auslösen.

Unterschied zwischen Funktion und Methode

1) Eine Funktion ist ein Codestück, das mit Namen aufgerufen wird. Es kann einige Daten (Parameter) zur Verarbeitung übergeben und dann einige Daten (Rückgabewert) zurückgeben, oder es kann keinen Rückgabewert haben.

2) Eine Methode ist eine JavaScript-Funktion, die über ein Objekt aufgerufen wird. Mit anderen Worten: Methoden sind auch Funktionen, nur eben spezielle. Es ist mit einem Objekt verknüpft. Angenommen, es gibt eine Funktion fn und ein Objekt obj, können Sie eine Methode definieren:

obj.Methode = fn;
obj.methode();

3) Funktionsdaten werden explizit übergeben

4) Daten in Methoden werden implizit übergeben; Methoden beziehen sich auf Objekte.

Zusammenfassen

Damit ist dieser Artikel der JavaScript-Grundlagenreihe: Funktionen und Methoden abgeschlossen. Weitere Informationen zu JavaScript-Funktionen und -Methoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!