Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:19:16
Original
1075 Leute haben es durchsucht

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 = {};

Nach dem Login kopieren

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

var namespace1 = {
  a: function(){},
  b: 2
}
Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

5. Ergänzung:

(1) Lazy Loading

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

lazyload();
Nach dem Login kopieren

(2) Vorladen

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

preload();
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!