Maison > interface Web > js tutoriel > le corps du texte

[Rôti : Jour - Mon dossier `utils`

WBOY
Libérer: 2024-08-05 15:48:59
original
404 Les gens l'ont consulté

[Roast: Day  - My `utils` Folder

La majorité du travail d'aujourd'hui est la continuation du travail d'hier, consistant simplement à implémenter une logique métier sur les itinéraires de mon application. J’ai donc pensé faire une pause dans mes écrits pour parler de trois fonctions que j’ai créées pour faire des choses très spécifiques dans mon application.

Qu'est-ce qu'un dossier utils ?

C'est le répertoire dans lequel vous mettez toutes vos petites fonctions qui ont du mal à trouver leur place, mais dont votre application ne pourrait pas vivre sans.

Un dossier utils est le dépotoir pour les héros méconnus de nombreuses applications.

Lorsque vous devez effectuer une transformation de vos données qui va prendre plus que quelques lignes de code, que vous devrez réutiliser, c'est une bonne idée de les mettre dans son propre fichier que vous pourrez exporter vers le reste de votre candidature.

Pourquoi ne faisons-nous pas simplement un copier-coller ? Eh bien, cela violerait deux principes de programmation, DRY et séparation des préoccupations.

Ne vous répétez pas

Non seulement se répéter est monotone, mais c'est aussi difficile de changer si vous l'avez suffisamment fait tout au long de votre candidature. Imaginez un algorithme qui calcule le pourcentage de probabilité qu'il pleuve aujourd'hui.

Je ne sais pas comment les gens font ça, donc je ne peux pas vous montrer d'exemple. Mais, si vous copiez tout cela tout au long de votre code aux différents endroits qui doivent avoir accès à ce calcul, vous allez être très contrarié lorsque le Comité météorologique scientifique très intelligent reviendra avec un nouvel algorithme plus précis. 🎜>

Prenez des parties réutilisées de votre code et trouvez des moyens de les empaqueter pour qu'elles soient utilisées à plusieurs endroits, tout en étant mises à jour au même endroit.

Toutes les fonctions de mon dossier utils sont utilisées à de nombreux endroits dans mon application !

Séparation des préoccupations

En tant que programmeurs, nous ne voulons pas non plus créer de fonctions qui font BEAUCOUP de choses différentes. Nous préférerions avoir BEAUCOUP de fonctions qui font toutes une seule chose. Pourquoi? Eh bien, cela rend ces fonctions plus réutilisables !

Qu'est-ce que cela a à voir avec un dossier utils ? Eh bien, les fonctions que je suis sur le point de passer en revue n'ont pas vraiment leur place dans les fonctions comme getRoastsById car ce n'est pas ce qu'elles font ! Lorsque nous devons faire autre chose, nous devons créer une fonction correspondante. Mais, quand nous n'avons pas de place logique pour cette fonction, parce que c'est un "helper", nous la mettons dans notre répertoire utils !

Mon dossier utils

J'ai jusqu'à présent trois utilitaires personnalisés :

    insertStatement
  • mise à jourDéclaration
  • objectKeysToCamel
J'espère que leurs noms montrent clairement ce qu'ils font, mais permettez-moi de partager brièvement le problème qu'ils résolvent et comment ils fonctionnent.

insertStatement

Problème : Dans de nombreux services différents de mon application, je devrai effectuer une requête INSERT sur ma base de données. Ces instructions nécessitent que vous listiez explicitement 1) les noms des colonnes et 2) les valeurs. Je ne devrais pas avoir à les saisir dans chaque itinéraire, j'ai donc créé une fonction pour le faire pour moi.

Entrée : La fonction prend deux paramètres, table une chaîne qui correspond au nom d'une table dans la base de données et obj, un objet Javascript qui représente le modèle que l'utilisateur souhaite ajouter à la base de données.

Sortie : Un objet avec 1) une chaîne INSERT formatée par une propriété avec des valeurs d'espace réservé et 2) un tableau des valeurs à utiliser dans une requête paramétrée.

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;
Copier après la connexion
déclaration de mise à jour

Problème : Semblable à l'instruction INSERT, l'instruction UPDATE vous oblige à indiquer explicitement les noms et les valeurs des colonnes dans votre requête. Cette syntaxe est différente d'une instruction INSERT. Grâce à la logique conditionnelle, je pourrais créer une fonction databaseQueryGenerator, mais cela semble également violer la séparation des préoccupations. Une fonction comme celle-ci déciderait-elle du type de requête que vous souhaitez ou générerait-elle une syntaxe basée sur cela ?

Entrée : La fonction prend trois paramètres. obj, un objet JavaScript qui représente l'enregistrement mis à jour. table , une chaîne qui doit correspondre à une table de la base de données. id , un entier qui correspond à l'enregistrement à mettre à jour avec les nouvelles informations.

Sortie : Un objet avec 1) une chaîne UPDATE formatée par une propriété avec des valeurs d'espace réservé et 2) un tableau des valeurs à utiliser dans une requête paramétrée.

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
Copier après la connexion

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;
Copier après la connexion

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!