JSでシングルトンモードを実装する手順の詳細な説明

今回はJSでシングルケースモードを実装する手順について詳しく説明します。JSでシングルトンモードを実装する場合の注意点は何ですか。以下に実際のケースを示します。

伝統的なシングルトンパターン

クラスのインスタンスが 1 つだけであることを確認し、そのインスタンスへのグローバル アクセス ポイントを提供します。

シングルトンの核となるアイデアを実装します

これは、変数を使用して特定のクラスのオブジェクトが作成されたかどうかをマークすることに他なりません。そうであれば、次回そのクラスのインスタンスが取得されるときに、以前に作成されたオブジェクトが直接返されます。 次に、

JavaScript を使用します。 このアイデアを強制的に実装するには、コードを参照してください:

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){   alert ( this.name );
};
Singleton.getInstance = (function(){   var instance = null;
  return function( name ){
          if ( !instance ){
            instance = new Singleton( name );
          }
        return instance;       }
})();

Singleton.getInstance を使用して Singleton クラスの唯一のオブジェクトを取得します。これは確かに問題ありませんが、js 自体にはクラスの概念がないため、従来のシングルトンのアイデアで実装するのは意味がありません。臭いし長い（実際見ていて不快な気分になる）。以下では

JavaScript を使用して クロージャを使用してシングルトンを実装しています。コードを参照してください:

var Createp = (function(){       var instance;
      var Createp = function( html ){           if ( instance ){
            return instance;           }
          this.html = html; this.init();
          return instance = this;
};
Createp.prototype.init = function(){
var p = document.createElement( 'p' );
p.innerHTML = this.html; 
document.body.appendChild( p );
      };
      return Createp; })();
var a = new Createp( 'sven1' ); var b = new Createp( 'sven2' );
alert ( a === b ); // true

ご覧のとおり、実際にクロージャを使用してシングルトンを実装しましたが、このコードは依然として高度に結合されており、実際には 2 つの役割を担っています。 1 つ目は、

オブジェクトを作成し、初期化 init メソッドを実行することです。2 つ目は、オブジェクトが 1 つだけ存在することを確認することです。このようなコードの役割は明確ではありません。ここでは、コンストラクターがオブジェクトを構築するか、新しいオブジェクトを構築して返すかを判断する必要があります。実際、それはプログラミングの考え方、つまり単一責任の原則を満たすためです。この種のコードはより適切に分離できます。次のコードを参照してください:

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement('p');
    p.innerHTML = this.html;
    document.body.appendChild(p);
  };
  var ProxySingletonCreatep = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new Createp(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreatep('sven1');
  var b = new ProxySingletonCreatep('sven2');
  alert(a === b); //true

ご覧のとおり、コンストラクター Createp はオブジェクトの構築のみを担当します。既存のオブジェクトを返すか、新しいオブジェクトを構築して返すかについては、この問題をプロキシ クラス proxySingletonCreatep に任せます。見てください（荘）従ってください（ビ）！ 最後に、Lazy Singleton の本質である抽象度の高いシングルトン パターン コードを投稿します。

りー

仮パラメータ fn はコンストラクタです。新しい遅延シングルトンを生成するために必要なコンストラクタを渡すだけです。たとえば、ガールフレンドを作成するコンストラクターを渡して getSingle() を呼び出すと、新しいガールフレンドを生成できます。今後 getSingle() を呼び出すと、作成したばかりのガールフレンドのみが返されます。新しいガールフレンドについては、彼女は存在しません。

シングルトンの一般的なシナリオ

ページ ログイン ボックスなど、固有のオブジェクトを生成する必要があるだけの場合、ログイン ボックスは 1 つしか存在できないため、シングルトン アイデアを使用して実装できます。もちろん、シングルトン アイデアを使用する必要はありません。その結果、ログイン ボックスを表示するたびにログイン ボックスを再生成して表示する必要が生じたり (パフォーマンスを消費)、誤って 2 つのログイン ボックスを表示したりする可能性があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Jackson が JSON 文字列を解析するときに最初の文字の大文字と小文字を変換する方法

Vue で localstorage と sessionstorage を使用する方法

以上がJSでシングルトンモードを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。