説明書なしでレゴセットを組み立てることを想像してみてください。確かに、漠然と宇宙船に似たものが完成するかもしれませんが、おそらく、カラフルなカオスの山が完成するでしょう。コーディングの世界では、デザイン パターンはレゴのマニュアルのようなものです。一般的な問題を解決するための実証済みの青写真が得られ、コードがよりクリーンで効率的、保守しやすくなります。
ただし、これはコーディングの原則に関する無味乾燥な講義ではありませんので、ご安心ください。これは、JavaScript の最も一般的なデザイン パターンのいくつかについての楽しい小さなガイドであり、これらの概念を理解しやすくする現実世界の例えが含まれていると考えてください。
シングルトン パターンは、クラスにインスタンスが 1 つだけ存在することを保証し、そのインスタンスへのグローバル アクセス ポイントを提供します。テレビのリモコンが 1 つあるようなものです。音量の制御、チャンネルの変更、電源オフを行うのに複数のリモコンは必要ありません。必要なのは 1 つのリモコンだけです。
JavaScript では、このパターンはグローバル アプリケーションの状態を管理するためによく使用されます。たとえば、電子商取引 Web サイトにショッピング カートがある場合、カートと対話するすべてのコンポーネント (商品の追加、商品の削除、チェックアウトなど) がカートの同じインスタンスを参照するようにする必要があります。シングルトンは、これらすべてのアクションがカートの別のコピーではなく、同じカートに影響を与えることを保証します。
Observer パターンは、オブジェクトの同期を維持することがすべてです。 1 つのオブジェクトが変更されると、他のオブジェクトもそれを知る必要があります。これはグループ チャットのようなもので、全員が常に最新情報を共有します。誰かが週末の計画を変更すると、グループの全員がメモを受け取ります。
JavaScript では、このパターンはイベント処理システムでよく使用されます。ソーシャル メディア アプリを構築しているとします。誰かが投稿にいいねをした場合、いいね数を更新し、投稿の作成者に通知し、場合によってはアニメーションをトリガーする必要があります。 Observer パターンを使用すると、これらのさまざまなコンポーネントを直接接続せずに最新の状態に保つことができます。
Factory パターンは、作成されるオブジェクトの正確なクラスを指定せずにオブジェクトを作成することを目的としています。クッキー抜き型を想像してみてください。カッターを押し下げるまで、生地がどのような形になるか正確にはわかりませんが、クッキーが得られることはわかっています。
このパターンは、共通のインターフェイスまたは構造を共有しているものの、基礎となる実装が異なるオブジェクトのコレクションがある場合に特に便利です。たとえば、ゲームにはさまざまな種類の敵 (ゾンビ、吸血鬼、狼男) が存在しますが、それらはすべて、体力、速度、攻撃力などの共通の特性を共有しています。ファクトリーを使用すると、特定のタイプを気にせずにこれらの敵を作成できます。
モジュール パターンは、すべてが適切に配置される、整理されたワークスペースのようなものです。これは、コードのさまざまな部分を整理してカプセル化し、グローバル名前空間が乱雑になるのを防ぐのに役立ちます。
このパターンは、JavaScript でパブリックおよびプライベートの変数と関数を作成する場合に特に役立ちます。たとえば、ライブラリやプラグインを構築するとき、特定のメソッドを外部に公開し、他のメソッドを非表示にしたい場合があります。 Module パターンを使用すると、まさにそれが可能になります。
アダプター パターンを使用すると、互換性のないインターフェイスを連携させることができます。海外旅行時に使うプラグアダプターのようなものだと考えてください。ノートパソコンの充電器のプラグが他の国の壁コンセントに差し込まれない場合がありますが、適切なアダプターを使用すれば完璧に機能します。
JavaScript では、アプリケーションの構造と正確に一致しないサードパーティのライブラリまたは API と統合するときに、アダプター パターンを使用することがあります。アダプターは、クラスのインターフェースをクライアントが期待する別のインターフェースに変換し、統合をシームレスに行うことができます。
class OldApi { constructor() { this.data = 'Old API data'; } getData() { return this.data; } } class NewApi { fetchData() { return 'New API data'; } } class ApiAdapter { constructor(oldApi) { this.oldApi = oldApi; } fetchData() { return this.oldApi.getData(); } } const oldApi = new OldApi(); const adapter = new ApiAdapter(oldApi); console.log(adapter.fetchData()); // 'Old API data'
The Composite pattern allows you to treat individual objects and compositions of objects uniformly. It’s like Russian nesting dolls where each doll is part of a larger structure, but you can interact with them both as individual dolls and as a nested set.
This pattern is often used in scenarios where you need to manage a hierarchy of objects. For example, consider a file system where files and folders are represented as objects. A folder can contain multiple files or even other folders, and you want to treat both files and folders similarly when it comes to operations like moving, copying, or deleting.
class File { constructor(name) { this.name = name; } display() { console.log(this.name); } } class Folder { constructor(name) { this.name = name; this.children = []; } add(child) { this.children.push(child); } display() { console.log(this.name); this.children.forEach(child => child.display()); } } const file1 = new File('file1.txt'); const file2 = new File('file2.txt'); const folder = new Folder('MyFolder'); folder.add(file1); folder.add(file2); folder.display(); // Output: // MyFolder // file1.txt // file2.txt
These are just a few of the many design patterns that can make your JavaScript code more robust, maintainable, and, let’s face it, fun to write. Whether you’re building the next big app or just trying to organize your code a bit better, these patterns can be your secret weapon. So next time you’re stuck, remember: there’s probably a pattern for that!
And hey, even if your code doesn’t end up looking like a LEGO spaceship, at least it won’t be a pile of colorful chaos.
Happy coding! ?
以上がソフトウェア設計パターン: すべての優れたアプリの背後にある秘密のソースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
