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の詳しい説明

推薦する

ローカルのMySQLをサーバーデータベースに移行する方法

Linux の scp コマンド (Windows では scp は使用できません) と、mysql...

Nginx が Apache より優れている理由

Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...

Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

VueはExcelデータをエクスポートするパブリック関数メソッドをカプセル化します

vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...

複数ページ通信を実現する JavaScript の sharedWorker の詳細な例

こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲...

MySQL のロック待機とデッドロック問題の分析

目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...

MySQL ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

12個のJavascriptテーブルコントロール(DataGrid)が整理されています

DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...