Konzepte und Codebeispiele für JavaScript-Singleton-Muster

Vorwort

Wie andere Programmiersprachen verfügt auch Javascript über viele Entwurfsmuster, wie z. B. Singleton-Modus, Proxy-Modus, Beobachtermodus usw. Kompetente Verwendung von Javascript-Entwurfsmuster können unsere Codelogik klarer und einfacher zu warten und umzugestalten machen.

In diesem Artikel wird der häufigere und praktischere Modus im Javascript-Modus vorgestellt – der Singleton-Modus, der hauptsächlich in Konzepte und Beispiele unterteilt ist. Bei der Einführung von Beispielen werden auch zusätzliche Wissenspunkte im Code erläutert.

Konzept des Singleton-Musters

Was ist zunächst einmal ein Singleton-Muster? Dies kann folgendermaßen verstanden werden: Das Singleton-Muster zielt darauf ab, sicherzustellen, dass eine Klasse nur eine Instanz hat und einen globalen Zugriffspunkt bereitstellt.

Vielleicht verstehen einige Leute das Konzept von Singleton immer noch nicht, also können Sie sich einige Beispiele aus dem Leben vorstellen. Wenn beispielsweise bei der Registrierung eines Kontos das von uns registrierte Konto bereits existiert, werden wir vom System gefragt: „Das Konto existiert bereits. Möchten Sie dieses Konto zum Anmelden verwenden?“ Wir können kein identisches Konto erneut erstellen, es sei denn, wir kündigen das ursprüngliche Konto. Dies ist eine anschauliche Verkörperung des Singleton-Musters.

Ein ähnliches Beispiel ist das Anmelde-Popup-Fenster auf der Webseite. Unabhängig davon, wie oft wir auf die Anmeldeschaltfläche klicken, wird immer nur ein Anmelde-Popup-Fenster auf der Benutzeroberfläche angezeigt man kann nicht erschaffen werden.

In diesem Artikel wird das Anmelde-Popup-Fenster als Beispiel verwendet, um die Verwendung des Singleton-Modus vorzustellen.

Singleton-Modus-Instanz

1.Demo-Anzeige

Die Demo-Adresse lautet: Pop-up-Box-Instanz

2. Codeanzeige

Der Code zum Erstellen einer Popup-Box-Instanz im Singleton-Modus kann von jedem anders geschrieben werden, aber der Zweck ist derselbe: eine weltweit einzigartige und zugängliche Popup-Box zu erstellen. Als nächstes setzen wir dieses Beispiel Schritt für Schritt um.

(1) Holen Sie sich das DOM-Objekt

var $ = function(id) {
    return typeof id === 'string' ? document.getElementById(id) : id; 
};

Um einige nachfolgende Vorgänge am DOM zu erleichtern, verwenden wir zunächst das Funktionsprinzip Programmieren, um die Ziel-ID zu erhalten. Die Elementobjektmethode ist gekapselt und kann direkt mit $(id) abgerufen werden.

(2) Popup-Frame-Konstruktor

var Modal = function(id, html) {
    this.html = html;
    this.id = id;
    this.open = false;
};

Hier deklarieren wir ein Modal als Konstruktor des Popup-Frames und definieren das öffentliche Attribut html darin, id und offen. HTML wird verwendet, um den Inhalt innerhalb des Popup-Felds zu definieren, id wird verwendet, um den ID-Namen für das Popup-Feld zu definieren, und open wird verwendet, um zu bestimmen, ob das Popup-Feld geöffnet ist.

(3) offene Methode

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('p');

        modal.innerHTML = this.html;
        modal.id = this.id;
        document.body.appendChild(modal);

        setTimeout(function() {
            modal.classList.add('show');
        }, 0);

        this.open = true;
    }
};

Wir definieren die Erstellungsmethode in der Prototypenkette von Modal. Innerhalb der Methode erstellen wir eine Popup-Box und fügen sie ein Fügen Sie dem DOM gleichzeitig einen Animationseffekt mit der Klasse „show“ hinzu. Hier ist eine kurze Einführung in classList:

classList ist ein praktischeres Attribut zum Bedienen der Elementklasse als className, ist jedoch hinsichtlich der Kompatibilität nicht mit Versionen unter IE10 kompatibel:

Die bereitgestellten Klassenoperationsmethoden ähneln denen von jQuery und umfassen hauptsächlich

• add(class1, class2, …), um einen oder mehrere Klassennamen hinzuzufügen Das Element entfernt, ähnlich wie addClass()

• remove(class1, class2, …) von jQuery, einen oder mehrere Klassennamen aus dem Element, ähnlich wie removeClass()

  <🎜 von jQuery >
• contains(class) Bestimmt, ob der angegebene Klassenname existiert, ähnlich wie hasClass() von jQuery

Hier verwenden wir die Add-Methode, um die Show-Klasse zu Modal hinzuzufügen .

(4) Close-Methode

Modal.prototype.delete = function() {
    if (this.open) {
        var modal = $(this.id);

        modal.classList.add('hide'); 
        setTimeout(function() {
            document.body.removeChild(modal);
        }, 200);

        this.open = false;
    }
};

Nachdem wir die Open-Methode definiert haben, definieren wir hier eine Methode zum Schließen des Popup-Fensters und fügen die Hide-Klasse hinzu Fügen Sie dem darin enthaltenen Popup-Box-Objekt einen Animationseffekt hinzu und entfernen Sie schließlich das Popup-Objekt auf der Seite.

(5) Erstellen Sie eine Instanz

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '这是一个弹框'))
    }
})();

Dies ist ein wichtiger Teil der Implementierung des Singleton-Musters:

1. Verwenden Sie

   Schließung, um die private Instanzvariable zu kapseln und eine Funktion zurückzugeben

2. Verwenden Sie die ||-Syntax, um festzustellen, ob die Instanz nicht vorhanden ist. Führen Sie die modale Methode der letzten Instanz aus. Wenn sie vorhanden ist, wird die Instanz direkt zurückgegeben, um sicherzustellen, dass nur eine Popup-Instanz vorhanden ist

Die Erstellung dieser Instanz kann auch als Teil verstanden werden des Proxy-Modus.

(6) Schaltflächenbedienung

var operate = {
    setModal: null,
    open: function() {
        this.setModal = createIntance();
        this.setModal.create();
    },
    delete: function() {
        this.setModal ? this.setModal.delete() : '';
    }
};

Hier fügen wir die Schaltflächenbedienung in das Betriebsobjekt ein, damit die Öffnungs- und Schließoperationen dadurch die Instanz setModal erhalten können .

(7) Bindungsereignisse

$('open').onclick = function() {
    operate.open();
};

$('delete').onclick = function() {
    operate.delete();
};

Schließlich binden wir die Methoden zum Öffnen und Löschen an die beiden Schaltflächen. Bisher haben wir es im Singleton-Modus implementiert Popup-Demo ist implementiert.

Bitte sehen Sie sich den vollständigen Code an: Vollständiger Code

Fazit

Das Obige ist der Inhalt des JavaScript-Singleton-Modus-Konzepts und Codebeispiele. Weitere verwandte Inhalte finden Sie hier zur chinesischen PHP-Website (www.php.cn)!