Javascriptでシングルトンパターンを実装する方法

概要

シングルトンパターンはモノマーパターンとも呼ばれ、クラスにはインスタンスが 1 つだけ存在し、グローバルアクセスポイントを提供することを規定します。

この記事を読む前は、シングルトンパターンの概念が漠然としていたり、不明瞭だったりするかもしれませんが、実際には、日常の開発でシングルトンパターンを使用したことがあるはずです。

JavaScript にはクラス定義がありません。シングルトンパターンの特徴は「ユニーク」かつ「グローバルアクセス」なので、JavaScript ではグローバルオブジェクトを考えることができます。ES6 の let の繰り返し宣言を許可しない機能は、まさにこの 2 つの特徴を満たしています。そうです、グローバルオブジェクトは最もシンプルなシングルトンパターンです。

obj = {
    名前:"塩漬け魚",
    getName:関数(){}
}

上記のコードから、obj はシングルトンパターンの 2 つの特性、「一意」と「グローバルにアクセス可能」を満たしているため、obj はシングルトンであることがわかります。

ただし、グローバルオブジェクト/グローバル変数にはいくつかの欠点があるため、この方法でシングルトンを実装することはお勧めしません。

名前空間を汚染する（変数名の競合が起きやすい）し、メンテナンス時に制御しにくい（注意しないと直接上書きされてしまう）

コードの実装

シングルトンパターンの簡易版

分析: インスタンスは 1 つしか存在しないため、if ブランチを使用して判断する必要があります。すでに存在する場合は、直接戻ります。存在しない場合は、新しいインスタンスを作成します。

let シングルトン = 関数(名前){
    this.name = 名前;
    this.instance = null; 
}

シングルトン.プロトタイプ.getName = 関数(){
    コンソールにログ出力します。
}

シングルトン.getInstance = 関数(名前){
    if (this.instance) {
        this.instance を返します。 
    }
    this.instance = new Singleton(name); を返します。
}

let winner = Singleton.getInstance("winner"); //勝者
コンソールにログ出力します。
let sunner = Singleton.getInstance("sunner"); //勝者
コンソールログ(sunner.getName())

上記のコードでは、変数インスタンスの値を使用して、インスタンスがすでに存在するかどうかを判断します。存在する場合は、this.instance を直接返します。存在しない場合は、新しいインスタンスを作成し、それを instance に割り当てます。

しかし、上記のコードには、オブジェクトを作成する操作とインスタンスを判断する操作が結合されており、「単一責任の原則」に準拠していないため、依然として問題があります。

改良版

アイデア: インスタンスを判断する操作を実装するにはクロージャを使用します。

クロージャの警告: クロージャを理解していない学生は、まずクロージャを学ぶ必要があります

シングルトンの作成 = (関数(){
    インスタンスを null にします。
    関数名を返す{
        this.name = 名前;
        if(インスタンス){
            インスタンスを返す
        }
        インスタンス = this を返します。
    }
})()


CreateSingleton.prototype.getName = 関数(){
        コンソールにログ出力します。
}

let winner = new CreateSingleton("winner"); //勝者
コンソールにログ出力します。
let sunner = new CreateSingleton("sunner"); //勝者
コンソールログ(sunner.getName())

プロキシバージョンシングルトンモード

プロキシの形式を通じて、オブジェクトの作成操作とインスタンスの判断操作が分離および分割され、より細かい粒度の分割が実現され、「単一責任の原則」に準拠します。

ProxyCreateSingleton = (function(){
    インスタンスを null にします。
    関数名を返す{
        if(インスタンス){
            インスタンスを返す
        }
        戻り値: インスタンス = 新しい Singlton(name);
    }
})();

let Singlton = function(name){
    this.name = 名前;
} 

シングルトン.プロトタイプ.getName = 関数(){
    コンソールにログ出力します。
}

勝者 = 新しい ProxyCreateSingleton("勝者");
コンソールにログ出力します。
sunner = new ProxyCreateSingleton("sunner"); を作成します。
コンソールにログ出力します。

上記のコードでは、ProxyCreateSingleton() はインスタンスの判断のみを担当し、Singlton はオブジェクトの作成と値の割り当てのみを担当します。

遅延シングルトンパターン

次のようなシナリオによく遭遇します。ページが複数回呼び出され、ポップアッププロンプトが表示されますが、プロンプトの内容は異なります。

このとき、すぐにシングルトンモードを思いつくことができます。ポップアップウィンドウはシングルトンインスタンスであり、プロンプトの内容はパラメータの受け渡しです。これを実装するには、遅延シングルトンモードを使用できます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<本文>
    <div id="loginBtn">夢を抱く塩漬けの魚</div>
</本文>
<スクリプト>
getSingleton = function(fn) {
    var 結果;
    関数()を返す{
        return result || (result = fn.apply(this, arguments)); // this コンテキストを決定し、パラメータを渡す}
}
createAlertMessage = function(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    div.style.display = 'なし';
    ドキュメントのbodyに子要素を追加します。
    div を返します。
}

createSingleAlertMessage = getSingleton(createAlertMessage); を作成します。
    document.getElementById('loginBtn').onclick=関数(){
        let alertMessage = createSingleAlertMessage('本当にバカみたいだ');
        alertMessage.style.display = 'ブロック';
    }
</スクリプト>
</html>

遅延シングルトンとは、ページの読み込み開始時にインスタンスが作成されないことを意味します。インスタンスは、ページの div をクリックした後にのみ作成されます (オンデマンドで作成)。これにより、Web ページのパフォーマンスが向上し、ページのレンダリングが高速化されます。

以上がJavascriptでシングルトンパターンを実装する方法の詳細です。Javascriptシングルトンパターンの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

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