ホームページ > 記事 > ウェブフロントエンド > js デザイン パターン: シングルトン パターンとは何ですか? JSシングルトンモードの概要
この記事では、JS デザイン パターンに関するコンテンツをお届けします: シングルトン パターンとは何ですか? js シングルトン モードの導入には一定の参考価値があります。必要な方は参考にしていただければ幸いです。
定義: 1 インスタンスは 1 つだけです。 2. グローバルにアクセス可能
主な解決策: グローバルに使用されるクラスは頻繁に作成および破棄されます。
js シングルトン モードを使用する場合: インスタンスの数を制御し、システム リソースを節約したい場合。
解決方法: システムにこのシングルトンが既に存在するかどうかを確認し、存在する場合はそれを返し、存在しない場合は作成します。
js シングルトン モードの利点: 1. メモリ内にインスタンスが 1 つだけあるため、特にインスタンスが頻繁に作成および破棄される場合 (ホームページ ページのキャッシュの管理など)、メモリのオーバーヘッドが軽減されます。 2. リソースの複数の占有(ファイルの書き込み操作など)を避けます。
シングルトン パターンの欠点: インターフェイス、継承がなく、単一責任の原則と矛盾します。クラスは、外部でインスタンスを作成する方法ではなく、内部ロジックのみを考慮する必要があります。
js シングルトン モードの使用シナリオ: 1. グローバル キャッシュ。 2. ポップアップ ウィンドウ
const singleton = function(name) { this.name = name this.instance = null } singleton.prototype.getName = function() { console.log(this.name) } singleton.getInstance = function(name) { if (!this.instance) { // 关键语句 this.instance = new singleton(name) } return this.instance } // test const a = singleton.getInstance('a') // 通过 getInstance 来获取实例 const b = singleton.getInstance('b') console.log(a === b)
JavaScript はクラスレス言語であり、JS のグローバル オブジェクトはシングルトン モードの 2 つの条件を満たしているためです。多くの場合、グローバル オブジェクトをシングルトン モードとして使用します
var obj = {}
ポップアップを実装する 1 つの方法は、最初にポップアップを作成してから非表示にすることです。これにより、不必要な時間が無駄になります。 DOM オーバーヘッドについては、ポップアップ ボックスが必要なときに作成し、シングルトン モードと組み合わせてインスタンスを 1 つだけ実現することで、DOM オーバーヘッドの一部を節約できます。以下は、ログイン ボックスのコードの一部です:
//弹框层的实践 const createLoginLayer = function() { const myDiv = document.createElement('div') myDiv.innerHTML = '登入浮框' // myDiv.style.display = 'none' document.body.appendChild(myDiv); return myDiv } //使单例模式和创建弹框代码解耦 const getSingle = function(fn) { let result = null; return function() { if(!result){ result = fn.apply(this, arguments); } return result; } } const createSingleLoginLayer = getSingle(createLoginLayer) document.getElementById('loginBtn').onclick = function() { createSingleLoginLayer() }
関連する推奨事項:
JS デザイン パターンのコンストラクター パターンの詳細な説明
php デザイン パターンシングルトン パターン コード、PHP デザイン パターン
以上がjs デザイン パターン: シングルトン パターンとは何ですか? JSシングルトンモードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。