首页  >  文章  >  web前端  >  [Roast:Day - 我的'utils”文件夹

[Roast:Day - 我的'utils”文件夹

WBOY
WBOY原创
2024-08-05 15:48:59415浏览

[Roast: Day  - My `utils` Folder

今天的大部分工作都是昨天工作的延续,只是在我的应用程序的路由上实现业务逻辑。因此,我想我应该在撰写此内容时休息一下,谈谈我创建的三个函数,这些函数是为了在我的应用程序中执行非常具体的操作。

什么是 utils 文件夹?

这是您放置所有很难找到家的小功能的目录,但您的应用程序没有它们就无法生存。

utils 文件夹是许多应用程序中无名英雄的垃圾场。

当您必须执行数据转换而需要多行代码且必须重复使用时,最好将其放入自己的文件中,您可以将其导出到申请的其余部分。

我们为什么不直接复制粘贴呢?好吧,这违反了两个编程原则:DRY 和关注点分离。

不要重复自己

重复自己不仅单调,而且如果你在整个申请过程中做得足够多,也很难改变。想象一个计算今天下雨的百分比的算法。

我不知道人们是如何做到这一点的,所以我无法向您展示示例。但是,如果您将这些内容复制到需要访问此计算的不同位置的整个代码中,那么当非常智能科学天气委员会带着新的、更准确的算法回来时,您会感到非常沮丧。

获取代码中重复使用的部分,并找到方法将它们打包以便在多个地方使用,同时仍然在一个地方进行更新。

我的 utils 文件夹中的所有函数都在我的应用程序的许多地方使用!

关注点分离

作为程序员,我们也不想创建做很多不同事情的函数。我们宁愿有很多功能都只做一件事。为什么?嗯,它使这些函数更加可重用!

这与 utils 文件夹有什么关系?好吧,我要介绍的函数在 getRoastsById 这样的函数中并没有真正的位置,因为这不是它们所做的!当我们需要做其他事情时,我们应该为其创建一个函数。但是,当我们没有该函数的逻辑位置时,因为它是一个“助手”,我们将它放在我们的 utils 目录中!

我的 utils 文件夹

到目前为止我有三个自定义实用程序:

  • 插入语句
  • 更新声明
  • objectKeysToCamel

希望通过他们的名字就可以清楚地知道他们在做什么,但让我简要分享一下他们解决的问题以及他们如何工作。

插入语句

问题:在我的应用程序的许多不同服务中,我将需要对我的数据库执行 INSERT 查询。这些语句要求您明确列出 1) 列的名称和 2) 值。我不必在每条路线中输入这些内容,因此我创建了一个函数来为我完成此操作。

输入: 该函数采用两个参数,table 是与数据库中表名称匹配的字符串,obj 是表示用户想要添加到数据库的模型的 Javascript 对象。

输出: 一个对象,其中包含 1) 具有占位符值的属性格式化 INSERT 字符串和 2) 要在参数化查询中使用的值的数组。

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;

更新语句

问题:与 INSERT 语句类似,UPDATE 语句要求您在查询中明确说明列名和值。此语法与 INSERT 语句不同。通过条件逻辑,我可以创建一个databaseQueryGenerator函数,但这似乎也违反了关注点分离。像这样的函数会决定你想要什么样的查询,或者基于它生成语法吗?

输入: 该函数采用三个参数。 obj,表示更新记录的 JavaScript 对象。 table ,一个应与数据库中的表匹配的字符串。 id ,一个与要使用新信息更新的记录匹配的整数。

输出: 一个对象,其中包含 1) 具有占位符值的属性格式化 UPDATE 字符串和 2) 要在参数化查询中使用的值的数组。

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

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;

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.

以上是[Roast:Day - 我的'utils”文件夹的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn