概要シングルトン パターンはモノマー パターンとも呼ばれ、クラスにはインスタンスが 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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: データベース管理における 19 の MySQL 最適化方法
目次1. ユーザーが作成したスクリプト2. 単語当てゲーム3. ネットワークカードのトラフィック監視...
序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...
問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...
現在、ほとんどの CPU は浮動小数点ユニット (FPU) をサポートしています。FPU は、プロセ...
DockerでGit環境を構成する仕事上、Docker 環境で GitLab リポジトリを操作する必...
序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...
この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...
<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...
目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...
トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...
inline-block について学習しているときに、境界線と inline-block を持つ複数...
1 公式サイトからMySQL8をダウンロードしてインストールするMySQL8 ダウンロードアドレスこ...
序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...