JavaScript のシングルトンデザインパターン

デザインパターンは、経験豊富なオブジェクト指向ソフトウェア開発者が一般的に採用しているベストプラクティスを表します。デザインパターンは、ソフトウェア開発プロセス中にソフトウェア開発者が直面する一般的な問題に対する解決策です。これらのソリューションは、かなりの期間にわたって多数のソフトウェア開発者が試行錯誤した結果です。

現在、デザインパターンを学んでいるのですが、皆さんも一緒に学んでみませんか?

1. デザインパターンとは何ですか?

ソフトウェア設計において、特定の問題に対する簡潔かつエレガントな解決策。

これまでの経験を要約し、それを特定のシナリオに合理的に適用することで、実際の問題を解決できます。

2. デザインパターンの5つの設計原則（SOLID）

S-単一責任原則

つまり、プログラムは 1 つのことだけを適切に実行します。

O-オープンクローズ原則

拡張は可能だが、変更は不可能

L-リスコフ置換原理

サブクラスは親クラスをオーバーライドし、親クラスが表示される場所に表示されます。

I-インターフェース独立原則

インターフェースを単一かつ独立に保つ

D-依存性は原則につながる

使用方法はインターフェースのみに焦点を当てており、特定のクラスの実装には焦点を当てていません。

3. デザインパターンはなぜ必要なのでしょうか?

読みやすさ

デザインパターンを使用すると、コードの可読性が向上し、その後の開発効率が向上します。

スケーラビリティ

デザインパターンを使用してコードを分離すると、コードの変更可能性と拡張性が大幅に向上します。

再利用性

デザインパターンを使用すると、同じ作業を繰り返さずに既存のソリューションを再利用できます。

信頼性

デザインパターンを使用すると、システムの堅牢性が向上し、コードの記述が真にエンジニアリング指向になります。

4. シングルトンパターン

定義:ユニークかつグローバルにアクセス可能。クラスにインスタンスが 1 つだけあることを確認し、そのインスタンスへのグローバルアクセスポイントを提供します。

もう 1 つのマルチインスタンスパターンは、1 つのクラスを通じて複数の異なるインスタンスを構築することです。これがマルチインスタンスパターンです。
シングルトンモードとマルチインスタンスモードの最も重要な違いは、インスタンスの数です。
シングルトンパターンには常にインスタンスが 1 つだけ存在し、それをキャッシュして再利用できます。

アプリケーションシナリオ:ログインポップアップウィンドウなど、キャッシュできるコンテンツ。

これがプロジェクト内で 2 回以上使用される可能性がある場所であれば、これを試してみると、コードを大幅に削減できると思います。

次の疑似コードを見てみましょう:

const creatLoginLayer = () => {
    div 要素を document.createElement("div");
    div.innerHtml = "ログインフローティングウィンドウ";
    div.style.display = "なし";
    ドキュメントのbodyに子要素を追加します。
    div を返します。
};

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "ブロック";
};

creatLoginLayerの機能は、ログインポップアップウィンドウを作成し、そのノードをbodyに追加することです。以下は、ログインボタンのクリックイベントです。ログインボタンをクリックすると、ログインポップアップウィンドウが作成され、 display noneからblockに変更して表示します。

このロジックには何の問題もありませんが、考えてみてください。これらのコードは、ログインボタンがクリックされるたびに実行されます。プロジェクト内にこれを必要とする場所が多数ある場合はどうなるでしょうか。上に挙げた行はほんの数行です。もしそれが何百、何千、あるいは何万もあったらどうなるでしょうか?パフォーマンスが大幅に低下しませんか? このようなときに、シングルトンモードが役立ちます。

シングルトンパターンを使用した後:

const getSingle = (fn) => {
    結果を出す;
    戻り値 (...残り) => {
        結果を返します || (result = fn.apply(this.rest));
    };
};

const creatLoginLayer = () => {
    div 要素を document.createElement("div");
    div.innerHtml = "ログインフローティングウィンドウ";
    div.style.display = "なし";
    ドキュメントのbodyに子要素を追加します。
    div を返します。
};

シングルログインレイヤーを作成します。

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = createSingleLoginLayer();
    loginLayer.style.display = "ブロック";
};

ご覧のとおり、 getSingle関数が追加されています。ここではクロージャの概念があります。 result変数は参照されている限り破棄されず、キャッシュの役割を果たします。関数のパラメータはfunctionです。 resultがnullまたはundefined場合、後続のロジックが実行され、渡された関数の戻り値、つまり div がresultに割り当てられます。このように、後続の関数は 1 回だけ実行する必要があります。次に呼び出されたときには、 resultに値があるため、後続のロジックを実行せずに直接返されます。

これで、 JavaScriptのシングルトンパターン設計パターンに関するこの記事は終了です。JavaScript JavaScriptシングルトンパターンの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: