Ein Artikel bringt Ihnen bei, sauberen JavaScript-Code zu schreiben

// Nicht ❌
const foo = "[email protected]";
const bar = "John";
konstantes Alter = 23;
Konstanten qux = true;

// Tun ✅
const email = "[email protected]";
const Vorname = "John";
konstantes Alter = 23;
const istAktiv = true

// Nicht ❌
const Benutzer = {
  Benutzer-ID: "296e2589-7b33-400a-b762-007b730c8e6d",
  Benutzer-E-Mail: "[email protected]",
  BenutzerVorname: "John",
  BenutzerNachname: "Doe",
  BenutzerAlter: 23,
};

Benutzer.Benutzer-ID;

// Tun ✅
const Benutzer = {
  ID: "296e2589-7b33-400a-b762-007b730c8e6d",
  E-Mail: "[email protected]",
  Vorname: "John",
  Nachname: "Doe",
  Alter: 23,
};

Benutzer-ID;

// Nicht ❌
setTimeout(clearSessionData, 900000);

// Tun ✅
const SESSION_DURATION_MS = 15 * 60 * 1000;

setTimeout(clearSessionData, SESSION_DURATION_MS);

// Nicht ❌
Funktion umschalten() {
  // ...
}

Funktion vereinbart (Benutzer) {
  // ...
}

// Tun ✅
Funktion toggleThemeSwitcher() {
  // ...
}

Funktion didAgreeToAllTerms(Benutzer) {
  // ...
}

// Nicht ❌
Funktion printAllFilesInDirectory(dir) {
  const directory = dir || "./";
  // ...
}

// Tun ✅
Funktion printAllFilesInDirectory(dir = "./") {
  // ...
}

// Nicht ❌
Funktion sendPushNotification(Titel, Nachricht, Bild, isSilent, delayMs) {
  // ...
}

sendPushNotification("Neue Nachricht", "...", "http://...", false, 1000);

// Tun ✅
Funktion sendPushNotification({ Titel, Nachricht, Bild, isSilent, delayMs }) {
  // ...
}

const Benachrichtigungskonfiguration = {
  Titel: "Neue Nachricht",
  Nachricht: "...",
  Bild: "http://...",
  isSilent: false,
  VerzögerungMs: 1000,
};

sendPushNotification(Benachrichtigungskonfiguration);

/ Nicht ❌
Funktion pingUsers(Benutzer) {
  Benutzer.fürJeden((Benutzer) => {
    const userRecord = Datenbank.lookup(Benutzer);
    wenn (!userRecord.isActive()) {
      ping(Benutzer);
    }
  });
}

// Tun ✅
Funktion pingInactiveUsers(Benutzer) {
  Benutzer.filter(!isUserActive).forEach(ping);
}

Funktion isUserActive(Benutzer) {
  const userRecord = Datenbank.lookup(Benutzer);
  gibt userRecord.isActive() zurück;
}

// Nicht ❌
Funktion Dateierstelle(Name, istÖffentlich) {
  if (istÖffentlich) {
    fs.create(`./public/${name}`);
  } anders {
    fs.create(Name);
  }
}

// Tun ✅
Funktion Datei erstellen(Name) {
  fs.erstellen(Name);
}

Funktion erstelleÖffentlicheDatei(Name) {
  Datei erstellen(`./public/${name}`);
}

// Nicht ❌
Funktion renderCarsList(Autos) {
  Autos.fürJedes((Auto) => {
    const Preis = Auto.getPrice();
    const make = car.getMake();
    const Marke = Auto.getBrand();
    const nbOfDoors = car.getNbOfDoors();

    render({ Preis, Marke, Hersteller, Anzahl Türen });
  });
}

Funktion renderMotorcyclesList(Motorräder) {
  Motorräder.fürJedes((Motorrad) => {
    const Preis = Motorrad.getPrice();
    const make = Motorrad.getMake();
    const Marke = Motorrad.getBrand();
    const seatHeight = Motorrad.getSeatHeight();

    render({ Preis, Marke, Hersteller, Anzahl Türen });
  });
}

// Tun ✅
Funktion renderVehiclesList(Fahrzeuge) {
  Fahrzeuge.fürJedes((Fahrzeug) => {
    const Preis = Fahrzeug.getPrice();
    const make = Fahrzeug.getMake();
    const Marke = Fahrzeug.getBrand();

    const data = { Preis, Marke, Marke };

    Schalter (Fahrzeugtyp) {
      Fall "Auto":
        Daten.AnzahlTüren = Fahrzeug.getNbTüren();
        brechen;
      Fall „Motorrad“:
        Daten.Sitzhöhe = Fahrzeug.getSeatHeight();
        brechen;
    }

    rendern(Daten);
  });
}

// Nicht ❌
let Datum = "21.08.2021";

Funktion splitIntoDayMonthYear() {
  Datum = Datum.split("-");
}

splitInTagMonatJahr();

// Eine andere Funktion könnte ein Datum als Zeichenfolge erwarten
konsole.log(Datum); // ['21', '8', '2021'];

// Tun ✅
Funktion splitIntoDayMonthYear(Datum) {
  Rückgabedatum.Split("-");
}

konstantes Datum = "21.08.2021";
const newDate = splitIntoDayMonthYear(Datum);

// Originalwert bleibt erhalten
console.log(Datum); // '21.08.2021';
console.log(neuesDatum); // ['21', '8', '2021'];

// Nicht ❌
Funktion enrollStudentInCourse(Kurs, Student) {
  course.push({ Student, Einschreibungsdatum: Datum.jetzt() });
}

// Tun ✅
Funktion enrollStudentInCourse(Kurs, Student) {
  return [...Kurs, {Student,Einschreibungsdatum: Datum.jetzt()}];
}

// Nicht ❌
Funktion isUserNotVerified(Benutzer) {
  // ...
}

if (!isUserNotVerified(Benutzer)) {
  // ...
}

// Tun ✅
Funktion isUserVerified(Benutzer) {
  // ...
}

if (isUserVerified(Benutzer)) {
  // ...
}

// Nicht ❌
wenn (istAktiv === wahr) {
  // ...
}

if (Vorname !== "" && Vorname !== null && Vorname !== undefiniert) {
  // ...
}

const isUserEligible = user.isVerified() und user.didSubscribe() ? true : false;

// Tun ✅
wenn (istAktiv) {
  // ...
}

if (!!Vorname) {
  // ...
}

const isUserEligible = user.isVerified() und user.didSubscribe();

// Nicht ❌
Funktion addUserService(db, Benutzer) {
  wenn (!db) {
    wenn (!db.isConnected()) {
      wenn (!Benutzer) {
        return db.insert("Benutzer", Benutzer);
      } anders {
        throw new Error("Kein Benutzer");
      }
    } anders {
      throw new Error("Keine Datenbankverbindung");
    }
  } anders {
    throw new Error("Keine Datenbank");
  }
}

// Tun ✅
Funktion addUserService(db, Benutzer) {
  if (!db) throw new Error("Keine Datenbank");
  if (!db.isConnected()) throw new Error("Keine Datenbankverbindung");
  if (!user) throw new Error("Kein Benutzer");

  return db.insert("Benutzer", Benutzer);
}

// Nicht ❌
const getColorByStatus = (status) => {
  Schalter (Status) {
    Fall „Erfolg“:
      "grün" zurückgeben;
    Fall „Misserfolg“:
      gib "rot" zurück;
    Fall „Warnung“:
      gebe "gelb" zurück;
    Fall „Laden“:
    Standard:
      gebe "blau" zurück;
  }
};

// Tun ✅
const statusColors = {
  Erfolg: "grün",
  Fehler: "rot",
  Warnung: "gelb",
  Laden: "blau",
};

const getColorByStatus = (status) => statusColors[status] || "blau";

const Benutzer = {
  E-Mail: "[email protected]",
  Abrechnung:
    iban: "...",
    schnell: "...",
    Adresse:
      Straße: "Ein Straßenname",
      Staat: "CA",
    },
  },
};

// Nicht ❌
const email = (Benutzer && Benutzer.E-Mail) || "N/A";
const Straße =
  (Benutzer &&
    Benutzer.Abrechnung &&
    Benutzer.Rechnungsadresse &&
    Benutzer.Rechnungsadresse.Straße) ||
  "N / A";
konstanter Zustand =
  (Benutzer &&
    Benutzer.Abrechnung &&
    Benutzer.Rechnungsadresse &&
    Benutzer.Rechnungsadresse.Bundesstaat) ||
  "N / A";

// Tun ✅
const email = Benutzer?.email ?? "N/A";
const street = Benutzer?.Rechnung?.Adresse?.Straße ?? "N/A";
const street = Benutzer?.Abrechnung?.Adresse?.Bundesstaat ?? "N/A";

// Nicht ❌
getUser(Funktion (err, Benutzer) {
  getProfile(Benutzer, Funktion (err, Profil) {
    getAccount(Profil, Funktion (err, Konto) {
      getReports(Konto, Funktion (Fehler, Berichte) {
        sendStatistics(Berichte, Funktion (Fehler) {
          Konsole.Fehler(Fehler);
        });
      });
    });
  });
});

// Tun ✅
getUser()
  .then(Profil abrufen)
  .dann(Konto abrufen)
  .then(getReports)
  .then(sendStatistics)
  .catch((err) => console.error(err));

// oder mit Async/Await ✅✅

asynchrone Funktion sendUserStatistics() {
  versuchen {
    const Benutzer = warte auf getUser();
    const profile = warte auf getProfile(Benutzer);
    const Konto = warte auf getAccount(Profil);
    const Berichte = warte auf getReports(Konto);
    gibt sendStatistics(Berichte) zurück;
  } fangen (e) {
    Konsole.Fehler(Fehler);
  }
}

/ Nicht ❌
versuchen {
  // Möglicher fehlerhafter Code
} fangen (e) {
  konsole.log(e);
}

// Tun ✅
versuchen {
  // Möglicher fehlerhafter Code
} fangen (e) {
  // Befolgen Sie die am häufigsten (oder alle) zutreffenden Angaben:
  // 1- Geeigneter als console.log
  konsole.fehler(e);

  // 2- Benutzer ggf. benachrichtigen
  Fehlerbenutzeralarm(e);

  // 3- Dem Server melden
  Fehler an Server melden(e);

  // 4- Verwenden Sie einen benutzerdefinierten Fehlerhandler
  wirf einen neuen CustomError(e);
}

// Nicht ❌
Funktion generateHash(str) {
  // Hash-Variable
  lass hash = 0;

  //Länge des Strings ermitteln
  lass Länge = str.Länge;

  // Wenn der String leer ist, returnieren Sie
  wenn (!Länge) {
    Hash zurückgeben;
  }

  // Durchlaufe alle Zeichen im String
  für (sei i = 0; i < Länge; i++) {
    // Zeichencode abrufen.
    const char = str.charCodeAt(i);

    // Erstelle den Hash
    Hash = (Hash << 5) – Hash + Zeichen;

    // In 32-Bit-Integer konvertieren
    Hash &= Hash;
  }
}

// Tun ✅
Funktion generateHash(str) {
  lass hash = 0;
  lass Länge = str.Länge;
  wenn (!Länge) {
    Hash zurückgeben;
  }

  für (sei i = 0; i < Länge; i++) {
    const char = str.charCodeAt(i);
    Hash = (Hash << 5) – Hash + Zeichen;
    hash = hash & hash; // In 32-Bit-Ganzzahl konvertieren
  }
  Hash zurückgeben;
}

// Nicht ❌
/**
 * 21.07.2021: Sonderfall behoben
 * 15.07.2021: Verbesserte Leistung
 * 10.07.2021: Mehrere Benutzertypen verarbeitet
 */
Funktion generateCanonicalLink(Benutzer) {
  // const session = getUserSession(Benutzer)
  const session = Benutzer.getSession();
  // ...
}

// Tun ✅
Funktion generateCanonicalLink(Benutzer) {
  const session = Benutzer.getSession();
  // ...
}