今日の作業の大部分は昨日からの作業の続きで、アプリケーションのルートにビジネス ロジックを実装するだけです。そこで、この件について書くのをやめて、アプリケーション内で非常に具体的なことを行うために作成した 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 サイトの他の関連記事を参照してください。

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

JavaScriptプログラミング、プロトタイプチェーンの関数パラメーターの理解と操作のJavaScriptのプロトタイプチェーンの関数のパラメーターを取得する方法は、一般的で重要なタスクです...

WeChatアプレットWeb-ViewでVue.jsを使用する動的スタイルの変位障害がvue.jsを使用している理由の分析...


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

SublimeText3 中国語版
中国語版、とても使いやすい
