Rumah  >  Artikel  >  hujung hadapan web  >  [Panggang: Hari - Folder `utils` saya

[Panggang: Hari - Folder `utils` saya

WBOY
WBOYasal
2024-08-05 15:48:59382semak imbas

[Roast: Day  - My `utils` Folder

Majoriti kerja hari ini adalah kesinambungan kerja dari semalam, hanya melaksanakan logik perniagaan pada laluan permohonan saya. Jadi, saya fikir saya akan berhenti menulis tentang perkara itu untuk bercakap tentang tiga fungsi yang saya cipta untuk melakukan perkara yang sangat khusus dalam aplikasi saya.

Apakah itu folder utils?

Ini ialah direktori tempat anda meletakkan semua fungsi kecil anda yang sukar mencari rumah, tetapi aplikasi anda tidak boleh hidup tanpanya.

Folder utils ialah tempat pembuangan untuk wira yang tidak didendang dari banyak aplikasi.

Apabila anda perlu melakukan transformasi data anda yang akan mengambil lebih daripada beberapa baris kod, yang anda perlu gunakan semula, adalah idea yang baik untuk memasukkannya ke dalam failnya sendiri yang boleh anda eksport ke selebihnya permohonan anda.

Kenapa kita tidak copy paste sahaja? Nah, ini akan melanggar dua prinsip pengaturcaraan, KERING dan pengasingan kebimbangan.

Jangan Ulangi Sendiri

Bukan sahaja mengulangi diri anda membosankan, ia juga sukar untuk diubah jika anda telah melakukannya dengan cukup sepanjang permohonan anda. Bayangkan algoritma yang mengira peratus kemungkinan hujan hari ini.

Saya tidak tahu bagaimana orang melakukannya, jadi saya tidak dapat menunjukkan contoh kepada anda. Tetapi, jika anda menyalin ini sepanjang kod anda di tempat berbeza yang perlu mempunyai akses kepada pengiraan ini, anda akan berasa sangat kecewa apabila Jawatankuasa Cuaca Saintifik Sangat Pintar kembali dengan algoritma baharu yang lebih tepat.

Ambil bahagian kod anda yang digunakan semula dan cari cara untuk membungkusnya untuk digunakan di berbilang tempat, sementara masih dikemas kini di satu tempat.

Semua fungsi dalam folder utils saya digunakan di banyak tempat sepanjang aplikasi saya!

Pemisahan Kebimbangan

Sebagai pengaturcara, kami juga tidak mahu mencipta fungsi yang melakukan BANYAK perkara yang berbeza. Kami lebih suka mempunyai BANYAK fungsi yang semuanya melakukan satu perkara. kenapa? Nah, ia menjadikan fungsi ini, lebih boleh digunakan semula!

Apakah kaitan ini dengan folder utils? Nah, fungsi yang akan saya bahas sebenarnya tidak mempunyai tempat dalam fungsi seperti getRoastsById kerana bukan itu yang mereka lakukan! Apabila kita perlu melakukan sesuatu yang lain, kita harus membuat fungsi untuknya. Tetapi, apabila kami tidak mempunyai tempat yang logik untuk fungsi itu, kerana ia adalah "pembantu", kami meletakkannya dalam direktori utils kami!

Folder utils saya

Saya mempunyai tiga kegunaan tersuai setakat ini:

  • masukkanPenyata
  • Kenyataan kemas kini
  • objectKeysToCamel

Mudah-mudahan, dengan nama mereka jelas apa yang mereka lakukan, tetapi izinkan saya berkongsi secara ringkas masalah yang mereka selesaikan dan cara mereka bekerja.

insertStatement

Masalah: Dalam kebanyakan perkhidmatan aplikasi saya yang berbeza, saya akan dikehendaki melakukan pertanyaan INSERT ke pangkalan data saya. Pernyataan ini memerlukan anda menyenaraikan 1) nama lajur dan 2) nilai secara eksplisit. Saya tidak sepatutnya menaip ini dalam setiap laluan, jadi saya mencipta fungsi untuk melakukannya untuk saya.

Input: Fungsi mengambil dua parameter, jadualkan rentetan yang sepadan dengan nama jadual dalam pangkalan data dan obj, objek Javascript yang mewakili model yang pengguna ingin tambahkan pada pangkalan data.

Output: Objek dengan 1) rentetan INSERT yang diformatkan sifat dengan nilai pemegang tempat dan 2) tatasusunan nilai untuk digunakan dalam pertanyaan berparameter.

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;

kemas kiniPenyata

Masalah: Sama seperti pernyataan INSERT, pernyataan UPDATE memerlukan anda menyatakan secara eksplisit kedua-dua nama lajur dan nilai dalam pertanyaan anda. Sintaks ini berbeza daripada pernyataan INSERT. Melalui logik bersyarat, saya boleh mencipta fungsi databaseQueryGenerator, tetapi ini juga nampaknya melanggar pengasingan kebimbangan. Adakah fungsi seperti itu akan menentukan jenis pertanyaan yang anda mahukan atau menjana sintaks berdasarkan itu?

Input: Fungsi ini mengambil tiga parameter. obj, objek JavaScript yang mewakili rekod yang dikemas kini. table , rentetan yang sepatutnya sepadan dengan jadual dalam pangkalan data. id , integer yang sepadan dengan rekod untuk dikemas kini dengan maklumat baharu.

Output: Objek dengan 1) rentetan KEMASKINI yang diformatkan sifat dengan nilai pemegang tempat dan 2) tatasusunan nilai untuk digunakan dalam pertanyaan berparameter.

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.

Atas ialah kandungan terperinci [Panggang: Hari - Folder `utils` saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn