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

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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript のシングルトン デザイン パターン
  • JavaScript ベースのシングルトン モードの実装
  • jsデザインパターンにおけるシングルトンパターンの原理と使用法の詳細な説明
  • JS デザインパターン: シングルトンパターン (I)
  • jsデザインパターンにおけるシングルトンパターンの簡単な説明

<<:  データベース管理における 19 の MySQL 最適化方法

>>:  LinuxテキストエディタVimの詳しい説明

推薦する

Linux ユーザー スクリプトの作成/推測ゲーム/ネットワーク カード トラフィック監視の紹介

目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

Linuxカーネルの浮動小数点演算のサポートに関する簡単な説明

現在、ほとんどの CPU は浮動小数点ユニット (FPU) をサポートしています。FPU は、プロセ...

DockerでGit環境を構築して構成するプロセス

DockerでGit環境を構成する仕事上、Docker 環境で GitLab リポジトリを操作する必...

MySQL に大量のデータを挿入する 4 つの方法の例

序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

MySQLクエリの文字セットの不一致の問題を解決する方法

問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...

MySQL 8.0.20 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

inline-block について学習しているときに、境界線と inline-block を持つ複数...

Win10にMySQL8圧縮パッケージ版をインストールするチュートリアル

1 公式サイトからMySQL8をダウンロードしてインストールするMySQL8 ダウンロードアドレスこ...

MySQL アカウント情報をエレガントにバックアップする方法

序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...