English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

JavaScriptのシンプルモードの例を共有

伝統的な単例パターン

あるクラスがたった一つのインスタンスを持つことを保証し、それにアクセスするためのグローバルなポイントを提供します。

単例の核心思想

それは、あるクラスがすでにオブジェクトを作成したかどうかを示す変数を使って、次にそのクラスのインスタンスを取得する際に、前に作成されたオブジェクトを直接返すという考え方です。以下に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クラスのユニークなオブジェクトを取得するのは問題ないですが、JavaScript自体にはクラスという概念がありませんので、私たちは伝統的な単例の考え方を使って実現することは意味がありません。そのコードは悪臭で長く（実際には自分が見て不快に感じる）、以下のようにJavaScriptのクロージャを使って単例を実現します：

var CreateDiv = (function() { 　　　　　　var instance;
　　　　　　var CreateDiv = function(html) { 　　　　　　　　　　if (instance) {
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function() {
var div = document.createElement('div');
div.innerHTML = this.html; 
document.body.appendChild(div);
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv('sven');1'); var b = new CreateDiv('sven');2');
alert(a === b); // true

実際には、私たちはクロージャを使って単例を実現していますが、このコードは非常に高くて密接に結びついています。CreateDivの構造関数は実際には二つのことを行っています。一つはオブジェクトの作成と初期化initメソッドの実行、もう一つはオブジェクトが一つだけであることを保証することです。このコードは責任が明確でないため、これら二つの作業を分離し、構造関数はオブジェクトの構築に責任を持ちます。既存のオブジェクトを返すか、新しいオブジェクトを構築して返すかの判断は、別の関数に任せます。これは、単一の責任原則を満たすためです。このようなコードはより良い解耦を提供します。以下のコードをご覧ください：

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      };
      return instance;
    };
  })();
  var a = new ProxySingletonCreateDiv('sven');1');
  var b = new ProxySingletonCreateDiv('sven');2');
  alert(a === b); //true

今や、私たちの構造関数CreateDivは、オブジェクトの構築にしか責任を持ちません。既存のオブジェクトを返すか、新しいオブジェクトを構築して返すかの決定は、プロキシクラスproxySingletonCreateDivに任せています。このようなコードは見ていても快適（zhuang）い（bi）感じがしますね！

最後に、非常に抽象化されたシンプルなパターンのコードを貼り付けます。遅延シンプルなシンプルの本質です！

//シンプルなパターンを抽象化し、オブジェクトの作成関数とオブジェクトが既に作成されているかどうかを判断する関数を分離します
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

引数fnは私たちの構築関数であり、必要な構築関数をいかなるものでも入力すると、新しい遅延シンプルなシンプルを生成できます。例えば、新しい恋人の構築関数を入力し、getSingle()を呼び出すと、新しい恋人が生成されます。getSingle()をもう一度呼び出しても、最初に作成した恋人が返されます。新しい恋人については、存在しません。

シンプルな使用シナリオ

ユニークなオブジェクトを生成する必要がある場合、例えば、ページのログインボックスは常に1つだけ存在する場合、シンプルな考え方で実現できます。もちろん、シンプルな考え方で実現することもできますが、その結果、ログインボックスを表示するたびに新しいログインボックスが生成され表示される（パフォーマンスに影響を与える）か、意図せずに2つのログインボックスが表示される可能性があります。

これで、私たちが皆さんに共有したJSでのシンプルモードの実現に関する学習の成果がすべてです。呐喊チュートリアルへのご支援を感謝します。

声明：本文の内容はインターネットから取得しており、著作権者はすべての権利を保有しています。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容が見つかった場合は、メールを送信して：notice#oldtoolbag.com（メール送信時は、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）

基礎教程
おすすめ