[Roast：Day - 我的「utils」資料夾-js教程-PHP中文網

[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中文網其他相關文章！