Beispiel für JavaScript-Designmuster-Singleton-Muster_Javascript-Kenntnisse

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

Ob es sich um eine schwach typisierte oder stark typisierte Sprache, eine statische oder dynamische Sprache, eine imperative oder deklarative Sprache handelt, jede Sprache hat ihre inhärenten Vor- und Nachteile. Ein jamaikanischer Athlet hat einige Vorteile im Sprinten und sogar im Boxen, aber es mangelt ihm an 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. Beim Wechsel zu einem Programm ist die Implementierung von Dekoratoren in statischen Sprachen möglicherweise sehr aufwändig. Da js jedoch jederzeit Methoden auf Objekte werfen kann, ist das Dekoratormuster in js unbrauchbar geworden.

Es gibt relativ wenige Bücher, die über JavaScript-Designmuster sprechen. „Pro JavaScript Design Patterns“ ist ein Klassiker, aber die darin enthaltenen Beispiele sind ziemlich ausführlich, daher habe ich sie mit den Codes kombiniert, die ich bei der Arbeit geschrieben habe zusammenfassen. Sollte es Abweichungen in meinem Verständnis geben, können Sie mich jederzeit korrigieren.

1. Singleton-Modus

Die Definition des Singleton-Musters besteht darin, eine eindeutige Instanz einer Klasse zu erzeugen, aber js selbst ist eine „klassenlose“ 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. Zum Beispiel, wenn Sie klicken, um sich auf web.qq.com anzumelden.

Dieser Code zum Generieren einer grauen Hintergrundmaskenebene ist sehr einfach zu schreiben.

Code kopieren Der Code lautet wie folgt:

var createMask = function(){
return document,body.appendChild( document.createElement(div) );
}
$( '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 Div erstellt wird. Sie können es zwar entfernen, wenn Sie die Maskenebene ausblenden, aber dies ist offensichtlich unvernünftig

Sehen wir uns die zweite Option an. Erstellen Sie dieses Div am Anfang der Seite. Verwenden Sie dann eine Variable, um darauf zu verweisen.

Code kopieren Der Code lautet wie folgt:

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

Auf diese Weise wird nur ein Maskenebenen-Div auf der Seite erstellt, aber es entsteht ein weiteres Problem. Möglicherweise werden wir diese Maskenebene nie benötigen, wodurch ein weiteres Div verschwendet wird, und jede Operation auf dem DOM-Knoten wird durchgeführt sehr geizig.

Was wäre, wenn Sie eine Variable verwenden könnten, um festzustellen, ob das Div erstellt wurde?

Code kopieren Der Code lautet wie folgt:

var mask;
var createMask = function(){
if (mask) return mask;
sonst{
mask = document,body.appendChild( document.createElement(div) );
Rückgabemaske;
}
}

Es sieht gut aus, hier haben wir tatsächlich eine Funktion fertiggestellt, die ein einzelnes Spaltenobjekt generiert. Schauen wir uns genauer an, was an diesem Code falsch ist.

Zuallererst hat diese Funktion bestimmte Nebenwirkungen. In einem Mehrpersonen-Kollaborationsprojekt ist createMask eine unsichere Funktion Eine Maske ist nicht unbedingt notwendig. Lasst es uns noch einmal verbessern.

Code kopieren Der Code lautet wie folgt:

var createMask = function(){
var mask;
Rückgabefunktion(){
Rückgabemaske ||. ( mask = document.body.appendChild( document.createElement('div') )
}
}()

Ein einfacher Verschluss wird verwendet, um die Variablenmaske einzuschließen, zumindest für die createMask-Funktion ist sie geschlossen.

Sie sehen das vielleicht und denken, dass das Singleton-Muster zu einfach ist. Auch wenn Sie dem Konzept der Designmuster nie Beachtung geschenkt haben, verwenden Sie einige davon immer noch unwissentlich Code. Genau wie vor vielen Jahren, als ich verstand, was der Kinderwagen des alten Mannes war, stellte sich heraus, dass dies der Kinderwagen des alten Mannes war

Bei den 23 Entwurfsmustern in GOF handelt es sich ebenfalls um Muster, die schon lange existieren und immer wieder in der Softwareentwicklung verwendet werden. Wenn dem Programmierer nicht klar ist, dass er bestimmte Muster verwendet hat, kann es sein, dass ihm beim nächsten Mal ein passenderes Design entgeht (Dies Die Passage stammt aus „Yukihiro Matsumotos Programmierwelt“).

Zurück zum Thema: Der vorherige Singleton kann nur zum Erstellen von Maskenebenen verwendet werden. Kann ich einen universellen Singleton finden? 🎜>

Funktionen in js sind vom ersten Typ, was bedeutet, dass Funktionen auch als Parameter übergeben werden können.

Code kopieren Der Code lautet wie folgt:

var singleton = function( fn ){

var result;
Rückgabefunktion(){
Rückgabeergebnis ||. ( result = fn .apply( this, arguments ) );
}
}
var createMask = singleton( function(){
return document.body.appendChild( document.createElement('div') );
})

Verwenden Sie eine Variable, um den ersten Rückgabewert zu speichern. Bei nachfolgenden Aufrufen wird die Variable zuerst zurückgegeben. Der Code, der die Maskenebene tatsächlich erstellt, wird über die Rückruffunktion übergeben Wrapper. Über den Bridge-Modus werde ich etwas später sprechen Die Singleton-Funktion ist jedoch nicht perfekt, um die Referenz des div zu speichern. Leider reichen die funktionalen Eigenschaften von js nicht aus, um Deklarationen und Anweisungen vollständig zu eliminieren.