js デザイン パターン: シングルトン パターンとは何ですか? JSシングルトンモードの概要

この記事では、JS デザイン パターンに関するコンテンツをお届けします: シングルトン パターンとは何ですか? js シングルトン モードの導入には一定の参考価値があります。必要な方は参考にしていただければ幸いです。

シングルトン パターンとは何ですか?

定義: 1 インスタンスは 1 つだけです。 2. グローバルにアクセス可能

主な解決策: グローバルに使用されるクラスは頻繁に作成および破棄されます。

js シングルトン モードを使用する場合: インスタンスの数を制御し、システム リソースを節約したい場合。

解決方法: システムにこのシングルトンが既に存在するかどうかを確認し、存在する場合はそれを返し、存在しない場合は作成します。

js シングルトン モードの利点: 1. メモリ内にインスタンスが 1 つだけあるため、特にインスタンスが頻繁に作成および破棄される場合 (ホームページ ページのキャッシュの管理など)、メモリのオーバーヘッドが軽減されます。 2. リソースの複数の占有（ファイルの書き込み操作など）を避けます。

シングルトン パターンの欠点: インターフェイス、継承がなく、単一責任の原則と矛盾します。クラスは、外部でインスタンスを作成する方法ではなく、内部ロジックのみを考慮する必要があります。

js シングルトン モードの使用シナリオ: 1. グローバル キャッシュ。 2. ポップアップ ウィンドウ

は js シングルトン モードを実装します:

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 のシングルトン モード

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 デザイン パターンシングルトン パターン コード、PHP デザイン パターン

以上がjs デザイン パターン: シングルトン パターンとは何ですか? JSシングルトンモードの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。