ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript デザイン パターンを学ぶ - singleton pattern_javascript スキル

JavaScript デザイン パターンを学ぶ - singleton pattern_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 15:19:161075ブラウズ

1. 定義

クラスにはインスタンスが 1 つだけあることを保証し、そのインスタンスへのグローバル アクセス ポイントを提供します。
ログイン ボタンをクリックすると、ページ上にログイン フローティング ウィンドウが表示されます。このログイン フローティング ウィンドウは、何度ログイン ボタンをクリックしても 1 回しか作成されません。作成するシングルトンとして使用します。

2. 実装原則

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

3. 偽のシングルトン

グローバル変数はシングルトン モードではありませんが、JavaScript 開発ではグローバル変数をシングルトンとして使用することがよくあります。

var a = {};

グローバル変数によって引き起こされる名前付け汚染を軽減します
(1) 名前空間を使用します

var namespace1 = {
  a: function(){},
  b: 2
}

(2) クロージャを使用してプライベート変数をカプセル化する

var user = (function() {
  var _name = 'lee',
    _age = '25';
  return {
    getUserInfo: function() {
      return _name + ":" + _age;
    }
  };
})();

4. 遅延シングルトン: 必要な場合にのみオブジェクト インスタンスを作成します

var getSingle = function(fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments));
  };
};

// 测试
function testSingle(){}
getSingle(testSingle)() === getSingle(testSingle)();  // true

5. 補足:

(1) 遅延読み込み

var lazyload = function() {
  console.log(1);
  lazyload = function() {
    console.log(2);
  }
  return lazyload();
}

lazyload();

(2) プリロード

var preload = (function() {
  console.log(1);
  preload = function() {
    console.log(2);
  };
  return preload;
})();

preload();

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。