ホームページ > ウェブフロントエンド > jsチュートリアル > プロジェクトのカップリングを改善する

プロジェクトのカップリングを改善する

Mary-Kate Olsen
リリース: 2024-12-24 22:09:11
オリジナル
939 人が閲覧しました

皆さんこんにちは!この投稿は、プロジェクトのデータ型の接続方法を改善し、データ型の信頼性を高め、理解しやすくすることを目的としています。

TLDR 急いでいる人のために: 同じものを参照する型と定数の繰り返しを避け、それらに (単純な文字列や数値であっても) 思わせぶりな名前を付けるようにしてください。これにより、後でコードを簡単に特定、変更、削除できるようになります。


問題

電子商取引 Web サイトを開発していて、製品のタイプを次のように定義していると想像してください。

export type ProductType = {
  id: string;
  name: string;
  price: number;
};
ログイン後にコピー

この種のプロジェクトでは、単純な関数から製品 ID を参照する複数の方法を簡単に見つけることができます。

  • const getProductById = (products: ProductType[], id: string) => {...};
  • const onProductPress = (productId: string) => {...};

プロダクトのデータを状態ストアに保存したり、JS Frameworks の他のコンポーネントに props を渡したりするなど、より高度な状況に


問題点

次に、次のアプローチで問題に対処しましょう:

  1. 製品の ID がこれほどシンプルで覚えやすくなかったらどうでしょうか? ab12-w35-s48-09 (たとえば、vendor-category-product-variant を表す) のようなものだったらどうなるでしょうか?
  2. これが私の重要なポイントですが、プロジェクト全体のすべての製品 ID のタイプを変更する必要がある場合はどうなるでしょうか? 別のファイルで参照するときに別の名前 (productId、product_id、pid、id など) を指定した場合、これは特に困難になる可能性があります。文字列を単に検索することもできません。文字列に関連しないものが多く見つかることは間違いありません。

考えられる解決策

問題 1 に対処するには、テンプレート リテラル タイプ を使用します。これにより、新しい製品 ID のタイプが ${string}-${string}-${string}-${string} になります。複数のファイルにわたってこれを繰り返すのは煩わしいので、次のいずれかを行うことができます:

  • id フィールドのカスタム タイプを作成し、それを ProductType で使用します。
type ProductIdType = `${string}-${string}-${string}-${string}`
ログイン後にコピー

必要に応じて、文字列ごとに異なる型を作成して参照したり、以前に作成した他の型を参照したりすることもできます。最後に、新しい型をそのまま使用します。

(productId : ProductIdType) => {...}
ログイン後にコピー
  • または、ProductType の ID エントリを参照することもできます。
(productId : ProductType['id']) => {...}
ログイン後にコピー

これらのアプローチはどちらも問題 2 を解決します。ProductIdType または ProductType['id'] がどこで見つかっても、製品の ID を扱っていることがわかり、それを置き換える必要があることがわかります。

最初の解決策の方が親しみやすいように思えるかもしれませんが、製品用に 1 つのタイプがあり、ID 用にもう 1 つのタイプがあり、独立して使用できる 2 つの部分に分かれた構造になります。上記の構造の表現例を次に示します:

Improving Coupling in your Project

これは間違いなく小さな問題ですが、ProductType の ID エントリを変更/削除した場合、その変更はプロジェクト全体に反映されません。

しかし、最後のアプローチは、データの結合を高めるため、私が通常従う方法です(これ以上良い言葉がありませんが)。製品データへのすべての参照は、ProductType:

を直接指すようになりました。

Improving Coupling in your Project


結論

すべてのデータに対して常に型を作成する必要があると言っているわけではありません。同じデータ型への参照を繰り返していることに気付いたときは、通常、2 番目のアプローチのように、元のデータ型にアクセスすることを選択します。

ボーナス ヒント 1: 同じロジックを定数にも適用できます。同じマジック ナンバーや文字列を複数の場所で繰り返している場合は、適切な指定を付けて使用するのが最善です。

ボーナス ヒント 2: タイプの複数のエントリを繰り返す代わりに、選択/除外する場合は、選択、省略、除外およびその他のユーティリティ タイプを使用します。

それだけです!私の投稿を気に入っていただければ幸いです。このトピックに関するフィードバックをお気軽に残してください。

以上がプロジェクトのカップリングを改善するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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