Heim  >  Artikel  >  Web-Frontend  >  Lernen Sie JavaScript-Designmuster – Singleton-Pattern_Javascript-Fähigkeiten

Lernen Sie JavaScript-Designmuster – Singleton-Pattern_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:19:161075Durchsuche

1. Definition

Stellen Sie sicher, dass eine Klasse nur eine Instanz hat, und stellen Sie einen globalen Zugriffspunkt darauf bereit.
Wenn Sie auf die Anmeldeschaltfläche klicken, wird auf der Seite ein schwebendes Anmeldefenster angezeigt. Unabhängig davon, wie oft Sie auf die Anmeldeschaltfläche klicken, wird dieses schwebende Anmeldefenster nur einmal erstellt zur Verwendung als Singleton-Muster zum Erstellen.

2. Umsetzungsprinzip

Es ist nicht kompliziert, einen Singleton zu implementieren. Verwenden Sie eine Variable, um zu markieren, ob ein Objekt für eine bestimmte Klasse erstellt wurde. Wenn dies der Fall ist, wird das zuvor erstellte Objekt direkt zurückgegeben, wenn Sie das nächste Mal eine Instanz der Klasse erhalten.

3. Fake Singleton

Globale Variablen befinden sich nicht im Singleton-Modus, aber in der JavaScript-Entwicklung verwenden wir häufig globale Variablen als Singletons.

var a = {};

Reduzieren Sie die durch globale Variablen verursachte Namensverschmutzung
(1) Namespace verwenden

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

(2) Verwenden Sie Abschlüsse, um private Variablen zu kapseln

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

4. Lazy Singleton: Objektinstanzen nur bei Bedarf erstellen

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

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

5. Ergänzung:

(1) Lazy Loading

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

lazyload();

(2) Vorladen

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

preload();

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn