ホームページ > ウェブフロントエンド > jsチュートリアル > [ロースト: 日 - 私の `utils` フォルダー

[ロースト: 日 - 私の `utils` フォルダー

WBOY
リリース: 2024-08-05 15:48:59
オリジナル
431 人が閲覧しました

[Roast: Day  - My `utils` Folder

今日の作業の大部分は昨日からの作業の続きで、アプリケーションのルートにビジネス ロジックを実装するだけです。そこで、この件について書くのをやめて、アプリケーション内で非常に具体的なことを行うために作成した 3 つの関数について話したいと思いました。

utilsフォルダーとは何ですか?

これは、居場所を見つけるのが難しい小さな関数をすべて置くディレクトリですが、アプリケーションはこれらの関数なしでは生きていけません。

utils フォルダーは、多くのアプリケーションの縁の下の力持ちのゴミ捨て場です。

数行以上のコードを必要とするデータの変換を実行する必要があり、それを再利用する必要がある場合は、それを独自のファイルに入れて、アプリケーションの残りの部分。

コピペしてみませんか?これは、DRY と関心の分離という 2 つのプログラミング原則に違反することになります。

同じことを繰り返さないでください

同じことを繰り返すのは単調であるだけでなく、アプリケーション全体で十分に行ったとしても変更するのは面倒です。今日の降水確率を計算するアルゴリズムを想像してください。

人々がどのようにそれを行うのかわからないので、例を示すことはできません。しかし、この計算にアクセスする必要があるさまざまな場所のコード全体にこれをコピーすると、非常にスマートな科学気象委員会が新しい、より正確なアルゴリズムを持って戻ってきたときに非常に動揺するでしょう。

コードの再利用部分を取り出し、それらを 1 か所で更新しながら、複数の場所で使用できるようにパッケージ化する方法を見つけます。

utils フォルダー内の関数はすべて、アプリケーション全体のさまざまな場所で使用されています!

懸念事項の分離

プログラマとして、私たちはさまざまなことを実行する関数を作成したくありません。むしろ、すべてが 1 つのことを実行する関数をたくさん用意したいと考えています。なぜ?そう、これにより、これらの関数がより再利用可能になります!

これは utils フォルダーと何の関係がありますか?さて、これから説明する関数は、実際には getRoastsById のような関数内に入る場所がありません。それは、実際には getRoastsById のような関数ではないからです。何か他のことをする必要があるときは、そのための関数を作成する必要があります。ただし、その関数を論理的に配置する場所がない場合は、それが「ヘルパー」であるため、utils ディレクトリに保存します。

私のユーティリティフォルダー

これまでに 3 つのカスタム ユーティリティがあります:

  • insertStatement
  • updateStatement
  • objectKeysToCamel

彼らの名前を見れば、彼らが何をするのかが明らかだと思いますが、彼らが解決する問題と、彼らがどのように機能するかを簡単に説明しましょう。

挿入ステートメント

問題: アプリケーションのさまざまなサービスの多くでは、データベースに対して INSERT クエリを実行する必要があります。これらのステートメントでは、1) 列の名前と 2) 値を明示的にリストする必要があります。これらを各ルートで入力する必要はないので、それを行う関数を作成しました。

入力: この関数は 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;
ログイン後にコピー

updateステートメント

問題: INSERT ステートメントと同様に、UPDATE ステートメントでは、クエリ内で列名と値の両方を明示的に指定する必要があります。この構文は INSERT ステートメントとは異なります。条件付きロジックを使用して、databaseQueryGenerator 関数を作成できますが、これも関心の分離に違反しているようです。そのような関数は、必要なクエリの種類を決定するのでしょうか、それともそれに基づいて構文を生成するのでしょうか?

入力: この関数は 3 つのパラメーターを受け取ります。 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.

以上が[ロースト: 日 - 私の `utils` フォルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート