概要シングルトン パターンはモノマー パターンとも呼ばれ、クラスにはインスタンスが 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 最適化方法
Linux の scp コマンド (Windows では scp は使用できません) と、mysql...
Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...
最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...
ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...
目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...
docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...
目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...
vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...
こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲...
目次序文: 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文: MySQL ...
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...
序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...
DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、...