Heim > Web-Frontend > js-Tutorial > Hauptteil

[Roast: Day – Mein „utils'-Ordner

WBOY
Freigeben: 2024-08-05 15:48:59
Original
404 Leute haben es durchsucht

[Roast: Day  - My `utils` Folder

Der Großteil der heutigen Arbeit bestand aus Fortsetzungen der Arbeit von gestern, lediglich der Implementierung von Geschäftslogik auf den Routen meiner Anwendung. Also dachte ich mir, ich mache eine Pause, um über drei Funktionen zu sprechen, die ich erstellt habe, um ganz bestimmte Dinge in meiner Anwendung zu tun.

Was ist ein Utils-Ordner?

Dies ist das Verzeichnis, in dem Sie all Ihre kleinen Funktionen ablegen, die nur schwer ein Zuhause finden, ohne die Ihre Anwendung aber nicht leben könnte.

Ein Utils-Ordner ist die Mülldeponie für die unbesungenen Helden vieler Anwendungen.

Wenn Sie eine Transformation Ihrer Daten durchführen müssen, die mehr als ein paar Codezeilen erfordert, die Sie wiederverwenden müssen, ist es eine gute Idee, sie in einer eigenen Datei abzulegen, die Sie exportieren können Rest Ihrer Bewerbung.

Warum kopieren wir nicht einfach und fügen ein? Nun, das würde gegen zwei Programmierprinzipien verstoßen: DRY und Trennung von Belangen.

Wiederholen Sie sich nicht

Es ist nicht nur eintönig, sich zu wiederholen, es ist auch mühsam, etwas zu ändern, wenn man es während der gesamten Bewerbung oft genug getan hat. Stellen Sie sich einen Algorithmus vor, der die prozentuale Regenwahrscheinlichkeit heute berechnet.

Ich weiß nicht, wie die Leute das machen, daher kann ich Ihnen kein Beispiel zeigen. Aber wenn Sie das alles in Ihrem Code an den verschiedenen Stellen kopieren, die Zugriff auf diese Berechnung haben müssen, werden Sie sehr verärgert sein, wenn das Very Smart Scientific Weather Committee mit einem neuen, genaueren Algorithmus zurückkommt.

Nehmen Sie wiederverwendete Teile Ihres Codes und finden Sie Möglichkeiten, sie so zu verpacken, dass sie an mehreren Stellen verwendet werden können, während sie gleichzeitig an einer Stelle aktualisiert werden.

Alle Funktionen in meinem Utils-Ordner werden an vielen Stellen in meiner Anwendung verwendet!

Trennung von Belangen

Als Programmierer möchten wir auch keine Funktionen erstellen, die VIELE verschiedene Dinge tun. Wir hätten lieber VIELE Funktionen, die alle eine Sache tun. Warum? Nun, es macht diese Funktionen wiederverwendbar!

Was hat das mit einem Utils-Ordner zu tun? Nun, die Funktionen, die ich gleich durchgehen werde, haben keinen Platz in Funktionen wie getRoastsById, weil sie das nicht tun! Wenn wir etwas anderes tun müssen, sollten wir eine Funktion dafür erstellen. Aber wenn wir keinen logischen Platz für diese Funktion haben, weil es ein „Helfer“ ist, legen wir sie in unserem Utils-Verzeichnis ab!

Mein Utils-Ordner

Ich habe bisher drei benutzerdefinierte Dienstprogramme:

  • Anweisung einfügen
  • updateStatement
  • objectKeysToCamel

Hoffentlich ist anhand ihrer Namen klar, was sie tun, aber lassen Sie mich kurz das Problem erläutern, das sie lösen, und wie sie funktionieren.

insertStatement

Problem: In vielen der verschiedenen Dienste meiner Anwendung muss ich eine INSERT-Abfrage an meine Datenbank durchführen. Für diese Anweisungen müssen Sie explizit 1) die Namen der Spalten und 2) die Werte auflisten. Ich sollte diese nicht in jeder Route eintippen müssen, also habe ich eine Funktion erstellt, die das für mich erledigt.

Eingabe: Die Funktion benötigt zwei Parameter: table, eine Zeichenfolge, die mit dem Namen einer Tabelle in der Datenbank übereinstimmt, und obj, ein Javascript-Objekt, das das Modell darstellt, das der Benutzer der Datenbank hinzufügen möchte.

Ausgabe: Ein Objekt mit 1) einer eigenschaftsformatierten INSERT-Zeichenfolge mit Platzhalterwerten und 2) einem Array der Werte, die in einer parametrisierten Abfrage verwendet werden sollen.

const { snakeCase } = require('change-case-commonjs');

function insertStatement(table, obj) {
  const keys = Object.keys(obj);
  const values = Object.values(obj);

  let statement = `INSERT INTO ${table} (`;

  // Add snake_case keys to the statement
  const keyString = keys.map((key, i) => snakeCase(key)).join(', ');
  statement += `${keyString}) VALUES (`;

  // Add placeholders for the values
  const placeholders = keys.map((_, i) => `$${i + 1}`).join(', ');
  statement += `${placeholders}) RETURNING *;`;

  // Return the query string and the values array
  return {
    text: statement,
    values: values
  };
}

module.exports = insertStatement;
Nach dem Login kopieren

updateStatement

Problem: Ähnlich wie bei der INSERT-Anweisung erfordert die UPDATE-Anweisung, dass Sie in Ihrer Abfrage explizit sowohl Spaltennamen als auch Werte angeben. Diese Syntax unterscheidet sich von einer INSERT-Anweisung. Durch bedingte Logik könnte ich eine DatenbankQueryGenerator-Funktion erstellen, aber auch dies verstößt offenbar gegen die Interessenstrennung. Würde eine solche Funktion entscheiden, welche Art von Abfrage Sie möchten, oder eine darauf basierende Syntax generieren?

Eingabe: Die Funktion benötigt drei Parameter. obj, ein JavaScript-Objekt, das den aktualisierten Datensatz darstellt. table , eine Zeichenfolge, die mit einer Tabelle in der Datenbank übereinstimmen sollte. id , eine Ganzzahl, die dem Datensatz entspricht, der mit den neuen Informationen aktualisiert werden soll.

Ausgabe: Ein Objekt mit 1) einer eigenschaftsformatierten UPDATE-Zeichenfolge mit Platzhalterwerten und 2) einem Array der Werte, die in einer parametrisierten Abfrage verwendet werden sollen.

const { snakeCase } = require('change-case-commonjs');

function updateStatement(obj, table, id) {
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  let statement = `UPDATE ${table} SET `;

  keys.forEach((key, index) => {
    statement += `${snakeCase(key)} = $${index + 1}, `;
  });

  // Remove the last comma and space
  statement = statement.slice(0, -2);

  // Determine the correct ID column based on the table
  const idColumn = table === 'users' ? 'username' : table === 'roasts' ? 'roast_id' : '';

  // Finalize the statement with the WHERE clause
  statement += ` WHERE ${idColumn} = $${keys.length + 1} RETURNING *;`;

  return {
    text: statement,
    values: [...values, id]
  };
}

module.exports = updateStatement
Nach dem Login kopieren

objectKeysToCamel

Problem: The style of my database is different from the style of my JavaScript. However, I'm not willing to compromise in either area. In my JS files, my naming convention uses camelCase, where in my database it uses snake_case. All property names of returned objects are the same, but formatted differently. To maintain this case standard, I would have to access properties in my JS using snake_case, but I don't like this.

Input: The function takes only one parameter, an obj JavaScript object that should have its keys transformed into camelCase formatting.

Output: The same object, with camelCase formatted keys.

const { camelCase } = require('change-case-commonjs');

function objectKeysToCamel(obj) {
  // Extract the keys and values
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  let camel = {}

  // Change the formatting of each key, assigning it the proper value
  keys.forEach((key, i) => {
    const camelKey = camelCase(key);
    camel[camelKey] = values[i]
  })

  // Return the new object
  return camel;
}

module.exports = objectKeysToCamel;
Nach dem Login kopieren

Check Out the Project

If you want to keep up with the changes, fork and run locally, or even suggest code changes, here’s a link to the GitHub repo!

https://github.com/nmiller15/roast

The frontend application is currently deployed on Netlify! If you want to mess around with some features and see it in action, view it on a mobile device below.

https://knowyourhomeroast.netlify.app

Note: This deployment has no backend api, so accounts and roasts are not actually saved anywhere between sessions.

Das obige ist der detaillierte Inhalt von[Roast: Day – Mein „utils'-Ordner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!