Detaillierte Erläuterung des klassischen JavaScript-Designmusters Singleton-Muster

Peter Seibel, der Autor von „Practical Common Lisp“, sagte einmal: Wenn man ein Muster braucht, muss etwas falsch sein. Das Problem, auf das er sich bezieht, besteht darin, dass er aufgrund der inhärenten Mängel der Sprache eine universelle Lösung finden und zusammenfassen muss.

Ob es sich um schwach typisierte oder stark typisierte, statische oder dynamische Sprache, imperative oder deklarative Sprache handelt, jede Sprache hat ihre inhärenten Vor- und Nachteile. Ein jamaikanischer Athlet hat einige Vorteile beim Sprinten und sogar beim Boxen, ihm fehlen jedoch einige beim Praktizieren von Yoga.

Hexenmeister und Schattenpriester können leicht eine hervorragende Unterstützung sein, aber ein feindlicher Magier, der mit Macon auf dem Rücken über die Karte fliegt, wird etwas unbeholfen sein. Wenn man zu einem Programm wechselt, kann es viel Aufwand erfordern, Dekoratoren in statischen Sprachen zu implementieren, aber js kann jederzeit Methoden auf Objekte werfen, sodass das Dekoratormuster zum Standard geworden ist in js. Es ist geschmacklos.

Es gibt relativ wenige Bücher, die sich mit Javascript Design Patterns befassen JavaScript Design „Patterns“ ist ein relativ klassisches Buch, aber die darin enthaltenen Beispiele sind ziemlich lang, daher werde ich mein Verständnis basierend auf den Codes, die ich bei der Arbeit geschrieben habe, zusammenfassen. Sollte es Abweichungen in meinem Verständnis geben, können Sie mich jederzeit korrigieren.

一Singleton-Muster

Die Definition des Singleton-Musters besteht darin, die einzige Instanz einer Klasse zu generieren, aber js selbst ist ein „klassenloses“ "Sprache. Viele Artikel, die sich mit js-Entwurfsmustern befassen, verwenden {} als Singleton, was kaum Sinn ergibt. Da es viele Möglichkeiten gibt, Objekte in js zu generieren, werfen wir einen Blick auf einen anderen aussagekräftigeren Singleton.

Es gibt eine so häufige Anforderung, dass beim Klicken auf eine Schaltfläche eine Maskenebene auf der Seite angezeigt werden muss. Wenn Sie beispielsweise klicken, um sich bei web.qq.com anzumelden.

Der Code zum Generieren einer grauen Hintergrundmaskenebene ist einfach zu schreiben.

var createMask = function(){
return document,body.appendChild(  document.createElement(p)  );
}
$( ‘button’ ).click( function(){
Var mask  = createMask();
mask.show();
})

Das Problem besteht darin, dass diese Maskenebene global einzigartig ist, sodass bei jedem Aufruf von createMask ein neues p erstellt wird. Sie können es zwar entfernen, wenn Sie die Maskenebene ausblenden, aber dies ist offensichtlich unvernünftig > Schauen wir uns die zweite Option an. Erstellen Sie dann eine

Variable

, um darauf zu verweisen In diesem Fall wird auf der Seite nur eine Maskenebene p erstellt, aber möglicherweise wird diese Maskenebene nie benötigt, und dann wird jede Operation am DOM-Knoten sehr geizig sein.

var mask = document.body.appendChild( document.createElement( ”p’ ) );
$( ”button’ ).click( function(){
mask.show();
} )

Was wäre, wenn wir eine Variable verwenden könnten, um festzustellen, ob p erstellt wurde?

Es sieht gut aus. Hier haben wir tatsächlich eine Funktion fertiggestellt, die ein einzelnes Spaltenobjekt generiert Mit dem Code stimmt etwas nicht. Erstens hat diese Funktion bestimmte Nebenwirkungen, die innerhalb des Funktionskörpers geändert werden Unsichere Funktion. Andererseits ist die globale Variablenmaske nicht erforderlich.

var mask;
var createMask = function(){
if ( mask ) return mask;
else{
mask = document,body.appendChild(  document.createElement(p)  );
return mask;
}
}

verwendet einen einfachen

Verschluss

, um die Variablenmaske zu umschließen createMask-Funktion, es ist geschlossen.

var createMask = function(){
var mask;
return function(){
return mask || ( mask = document.body.appendChild( document.createElement(‘p’) ) )
}
}()

Sie können dies sehen und das Gefühl haben, dass das Singleton-Muster tatsächlich sehr einfach ist, auch wenn Sie dem Konzept der Designmuster nie Beachtung geschenkt haben , im täglichen Code habe ich auch einige Designmuster verwendet, ohne es zu wissen. Als ich vor vielen Jahren verstand, was der Kinderwagen des alten Mannes war, dachte ich auch, dass dies der Kinderwagen des alten Mannes sei , ist ebenfalls ein Muster, das schon lange existiert und immer wieder in der Softwareentwicklung verwendet wird. Wenn dem

Programmierer nicht klar ist, dass er bestimmte Muster verwendet hat, kann es sein, dass er beim nächsten Mal ein passenderes Design übersieht (diese Passage). Aus „Yukihiro Matsumotos Programmierwelt“).

Zurück zum Thema: Der vorherige Singleton weist immer noch Mängel auf. Er kann nur zum Erstellen einer Maskenebene verwendet werden das einzige xhr-Objekt? Können Sie einen universellen Singleton-Wrapper finden?

Funktion in js ist der erste Typ, was bedeutet, dass die Funktion auch als Parameter übergeben werden kann.

Verwenden Sie eine Variable, um den ersten Rückgabewert zu speichern. Wenn er bereits zugewiesen wurde, wird die Variable bei nachfolgenden Aufrufen zuerst zurückgegeben. Der Code, der die Maskenebene tatsächlich erstellt, erfolgt über die Callback-Funktion

wird an den Singleton-Wrapper übergeben. Über den Bridge-Modus werde ich etwas später sprechen.

Die Singleton-Funktion ist jedoch vorhanden nicht perfekt. Ja, es braucht immer noch ein variables Ergebnis, um die Referenz von p zu speichern. Leider reichen die funktionalen Eigenschaften von js nicht aus, um Deklarationen und Anweisungen vollständig zu eliminieren:

Detaillierte Erklärung des klassischen JavaScript-Entwurfsmusters, des Strategiemusters

Das klassische einfache Factory-Muster-Codebeispiel des JavaScript-Entwurfsmusters

Javascript-Design Detaillierte Einführung in den Beobachtermodus

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des klassischen JavaScript-Designmusters Singleton-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!