JavaScriptでシングルトンパターンを実装する方法

この記事では、主にシングルトン モードの JavaScript 実装の例とコードの説明を紹介します。必要な読者は参照してください。

従来のシングルトン パターン

では、クラスのインスタンスが 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

実際にクロージャーを使用してシングルトンを実装していることがわかりますが、このコードは依然として高度に結合されています。二つのこと。 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 に引き渡しました。この種のコードは快適 (zhuang) かつ説得力がある (bi) ように見えます。

最後に、Lazy Singleton の本質である抽象度の高いシングルトン パターン コードを投稿します。

//单例模式抽象，分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

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

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

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

上記は私があなたのためにまとめたものです。

関連記事:

nodejs+expressでファイルアップロードを実装する方法

Vue+SpringBootでブログ管理プラットフォームを実装する方法

nodejsでの最大コールスタックエラーの超過を解決する方法

Vueの非同期コンポーネントの例があります

Vue.jsでコンポーネント間の循環参照を実装する方法

アニメーション効果とコールバック関数を実装する方法

jQueryを使用してテーブルを操作してセルを実現する方法マージ

vue-router で渡すルートパラメータを実装する方法

以上がJavaScriptでシングルトンパターンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。