"Klasse" in JavaScript

KasselJulian · 06.08.2013

Hi,

ich habe eine Frage:
Auf einer Webapp laufen mehrere Overlays mit jQuery. Wenn jetzt ein neues Overlay angeklickt wurde während ein anderes noch aktiv ist, soll dieses geschlossen werden.
Da ich nicht immer manuell die Elemente abfragen möchte (bei jedem Overlay einzeln) ob diese offen sind, suche ich eine Lösung:
In PHP würde ich eine Klasse erstellen an die jeder Overlay beim Start eine Information sendet, dass der Overlay nun offen ist. Bei Klick auf einen anderen Overlay fragt der Overlay ab, ob noch andere Overlays offen sind und wenn ja, werden diese geschlossen. Somit ist gewährleistet, dass niemals zwei Overlays auf einmal auf sind.

Gibt es eine Möglichkeit das ähnlich mit JS bzw. jQuery zu realisieren?

Def. Overlay: Ein Widget das sich über die Seite legt.

Duddle · 06.08.2013

AW: "Klasse" in JavaScript

Schließe doch einfach alle Overlays, bevor du ein neues aufmachst? So garantierst du ebenfalls, dass nie zwei Overlays gleichzeitig aktiv sind.

Duddle

KasselJulian · 06.08.2013

AW: "Klasse" in JavaScript

Duddle schrieb:
Schließe doch einfach alle Overlays, bevor du ein neues aufmachst? So garantierst du ebenfalls, dass nie zwei Overlays gleichzeitig aktiv sind.

Sorry aber dieser Post war jetzt echt ein Witz oder? Das habe ich doch ausführlich in meinem ersten Post beschrieben? Es geht nur um das wie und da möchte ich was elegantes finden.
Ich möchte eben nicht bei jedem Overlay einzeln prüfen ob alle Overlays geschlossen sind sondern das soll eine Funktion für mich tun. Jeder Overlay gibt beim Öffnen der Funktion die Information das er jetzt geöffnet ist. Dann (wenn z.B. jemand einen zweiten Overlay öffnen ohne den vorigen zu schließen) weiß die Funktion beim nächsten Aufruf direkt welche Overlays sie schließen muss ohne es zu prüfen.

Das Problem, warum ich "Klasse" in den Titel geschrieben habe ist, dass eine Funktion ja keine $this-> -Variablen wie in PHP hat. Wie das also alternativ lösen?

Myhar · 06.08.2013

AW: "Klasse" in JavaScript

Das war sehr wohl eine sinnvolle Antwort, die Lösung ist sehr wohl elegant.
Angenommen, jedes Overlay hat die Klasse overlay, dann brauchst du lediglich $(".overlay").hide() verwenden, um alle Overlays auszublenden.

Duddle · 06.08.2013

AW: "Klasse" in JavaScript

Es geht nur um das wie und da möchte ich was elegantes finden.

Jau, und für mich ist es eleganter, alle Lichtschalter auszuschalten, bevor ich das Licht im Wohnzimmer einschalte, als bei jedem Schalter erstmal zu gucken ob er noch eingeschaltet ist. Die erste Variante benötigt keinerlei Fallabfragen und keine zusätzlichen Informationen, die andere schon.

Duddle

KasselJulian · 06.08.2013

AW: "Klasse" in JavaScript

Also Freunde, wir reden hier um den heißen Brei.

Code:

// JS:
/**
 * Klasse steuert Overlays
*/
function Overlay(closeCallback){
    
    this.callbackFunc = closeCallback;
    this.closeOtherOverlays = function() {
        // Hier schließe ich alle Overlays die aktiv sind
    };
}

Ich stelle mir das folgendermaßen vor:
Jedes Overlay ruft die oben genannte Klasse mit einem Paramter zu einer Funktion auf, die das Overlay schließt (bevor der Overlay geöffnet wird).

Warum der Parameter zu der Funktion die das Overlay schließt? Weil Overlays animiert geschlossen werden können und es nicht einfach mit hide() getan ist. Die Animation kann das Overlay selber steuern.

Wie bereits beschrieben ruft jeder Overlay bevor er geöffnet wird die obige Klasse auf. Diese Klasse schließt dann alle Overlays in dem sie alle Close-Funktionen aufruft, die alle Overlays übergeben haben.

Das, was unklar ist: Wo speichere ich die Funktionsnamen der Overlays, weil die this-Variablen gehen ja immer verloren denn jedes Overlay initialisiert ja ein neues Klassenobject?

mindraper · 06.08.2013

AW: "Klasse" in JavaScript

moin,

easy-peasy mit closures:

Code:

;(function (window, $, undefined) {

    /*** CONSTANTS */
    var ACTIVE_OVERLAY = null;

    /*** CLASS CONSTRUCTOR */
    function Overlay (closeFnIn) {
        this.closeFn = closeFnIn !== undefined && typeof closeFnIn === 'function' ?
                       closeFnIn : 
                       this.closeFn;

        // do whatever needs to be done

        ACTIVE_OVERLAY && ACTIVE_OVERLAY.closeFn();
        ACTIVE_OVERLAY = this;
        
        return this; // optional, enables you to chain method calls
    }

    Overlay.prototype = {
        constructor: Overlay
    }

    Overlay.prototype.closeFn = function () {
        // basic method to close the overlay
        // will be overridden on initialization
    }

    window.Overlay = Overlay;

})(this, this.jQuery, (void 0));

KasselJulian · 06.08.2013

AW: "Klasse" in JavaScript

Hi,
sorry ich verstehe so gut wie nichts von deinem Code, aber das mag an meinem mangelnden Wissen bezüglich Closures liegen.
Wie ruft denn ein Overlay, der alle anderen Overlays über Closures schließen möchte diese Funktion auf?
Was soll diese Zeile bedeuten?

Code:

ACTIVE_OVERLAY && ACTIVE_OVERLAY.closeFn();         ACTIVE_OVERLAY = this;

Ich suche nach dieser Zeile die die Speicherung der Overlay-Close-Funktionen speichert.

Curanai · 07.08.2013

AW: "Klasse" in JavaScript

+1 für Duddle ... der Rest ist "Kanone auf Spatzen".

KasselJulian · 07.08.2013

AW: "Klasse" in JavaScript

Das mag bei dir und Duddle vielleicht so gehen, aber wenn du mehrere Overlays mit verschiedenen Animationstechniken hast, kommst du da nicht mehr hin.

Curanai · 07.08.2013

AW: "Klasse" in JavaScript

Aber mich stören die Animationstechniken überhaupt nicht?! Setze Dir je Overlay schlichtweg einen mehrfach einsetzbaren Klassenbezeichner und das war's ... das geht nicht nur bei Duddle und mir, da geht auch bei Dir.

Duddle · 07.08.2013

AW: "Klasse" in JavaScript

Das mag bei dir und Duddle vielleicht so gehen, aber wenn du mehrere Overlays mit verschiedenen Animationstechniken hast, kommst du da nicht mehr hin.

Dann musst du deine "Klasse" besser definieren.

Bei einem Feuerwerk hat jede Rakete verschiedenste Muster und Farben in der Explosion, aber jede Rakete hat dennoch nur eine Zündschnur. Der Operator muss lediglich durch seine Sequenz gehen und sagen "feuer diese Rakete", die Farben und Muster übernimmt die Rakete selbst.

Es sollte der Anwendung egal sein, welche Animation ein Overlay benutzt. Die Anwendung muss nur wissen, dass jedes Overlay einen "schließe dieses Overlay"-Knopf hat.

Duddle

P.S.: ich verstehe nicht wirklich etwas von modernen Feuerwerken; meine Beschreibung basiert auf der Extrapolation von Wissen angeeignet über viele Silvester-Nächte

KasselJulian · 07.08.2013

AW: "Klasse" in JavaScript

Curanai schrieb:
Setze Dir je Overlay schlichtweg einen mehrfach einsetzbaren Klassenbezeichner und das war's ...

Duddle schrieb:
Es sollte der Anwendung egal sein, welche Animation ein Overlay benutzt. Die Anwendung muss nur wissen, dass jedes Overlay einen "schließe dieses Overlay"-Knopf hat

Eure Sätze sind schlicht nicht ausgereift überlegt

Animation = Kann fadeIn, fadeOut, toggle, animation() oder sonst irgendeine Methode sein. Weißt du die? Nein, welche das Overlay verwendet weiß nur das Overlay.
Ihr denkt, ich möchte die Overlays einfach nur schließen? Falsch! Ich möchte Sie so schließen wie es das Overlay vorsieht. Deshalb muss eine Klasse her, die speichert wie die Funktion heißt die das Overlays schließt. Diese Klasse wird dann vor jedem Öffnen eines Overlays aufgerufen und führt eben alle Schließ-Funktionen aus, die die Overlays exakt so schließen wie vorgesehen. Damit ist gewährleistet:
-... dass alle Overlays so geschlossen werden wie es die Overlays vorsehen (mit eigener Animationstechnik ggf.)
-... dass keine Overlays offen sind wenn ein anderes geöffnet wird

Ist jetzt Klarheit da?

So und nun das praktisch umsetzen.

Duddle · 07.08.2013

AW: "Klasse" in JavaScript

Entweder reden wir extrem aneinander vorbei, oder einer von uns beiden will den anderen nicht verstehen.

Ich komme nochmal auf das Beispiel der Raketen zurück. Ich hoffe, wir sind uns einige, dass diese Situation analog ist. Wenn nicht: Objekt A hat ein nach aussen nicht sichtbares Attribut sowie eine Methode, die auf dieses Attribut zugreift. Übertragen:

Eine Rakete A hat ein nach aussen nicht sichtbares Attribut namens "Explosionsmuster" sowie eine Methode "zünden", die auf dieses Attribut zugreift ("Wenn gezündet, explodiere mich mit dem Muster $Explosionsmuster").
Ein Overlay A hat ein nach aussen nicht sichtbares Attribut namens "Schließanimation" sowie eine Methode "schließen", die auf dieses Attribut zugreift ("Wenn aufgerufen, schließe mich mit der Animation $Schließanimation").

Wenn nun ein Sprengmeister zum Dresdner Stadtfest Johann Sebastian Bach aus seinen Boxen spielt und auf den großen, roten "PARTY"-Knopf drückt, ist ihm völlig egal in welchem Muster Rakete 42 explodiert - das hat irgendjemand vorher geplant, dem Sprengmeister ist es egal. Er will nur, dass Rakete 42 gezündet wird und sie explodiert.
Die Rakete selbst weiß, wie sie zu explodieren hat. Ob sie nun blaue Punkte, silberne Kristalle oder rote Streifen erzeugt ist nur der Rakete selbst bekannt.

Wenn eine Anwendung auf dresdner-stadtfest.com in einem Flashplayer Bach's "Minuet in G" abspielt und auf den großen, roten "OVERLAYS WECHSELN"-Knopf drückt, ist es ihr völlig egal, in welchem Muster Overlay 42 geschlossen wird - das hat jemand vorher festgelegt, der Anwendung ist es egal. Sie will nur, dass Overlay 42 geschlossen wird.
Das Overlay selbst weiß, wie es zu schließen ist. Ob es nun ausfadet, in Stücke gerissen wird oder aus dem Bild dreht ist nur dem Overlay selbst bekannt.

Was genau ist daran so schwer zu verstehen?

Duddle

KasselJulian · 07.08.2013

AW: "Klasse" in JavaScript

Hi,
das ist doch genau das was ich versuche zu beschreiben. Jedoch und Myhar meinen, es würde mit .hide() getan sein. Ist es aber ja nicht, weil ich dann die schon vorbestimmte Explosion der Rakete unterbinde und sie auf meine Art und Weise explodieren lasse (in dem Fall schließen lasse).
Ich bin ja nur der Sprengmeister und weiß nicht wie die Rakete explodiert, deshalb rufe ich ja die Funktion auf die das für mich macht.

Jedoch: ich muss die Funktion die das Schließen des jeweiligen Overlays übernimmt ja aufrufen. Woher weiß ich wie diese heißt? Das kann ich nur wissen, wenn der Overlay mir vorher den Funktionsnamen übergeben hat, den ich dann aufrufen soll, wenn ein neuer Overlay geöffnet wird. Wo speichere ich den jedoch?

Myhar · 07.08.2013

AW: "Klasse" in JavaScript

Meines war auch nur ein Beispiel, da war noch lange nicht die Rede von unterschiedlichen Arten, das Overlay auszublenden, die Rede. Das konnte ich (und die anderen) noch nicht wissen, was deine genauen Anforderungen sind. Hier ein erweitertes Beispiel mit verschiedenen Animationstechniken:
Deine Overlays haben alle die Klasse overlay und zusätzlich eine Klasse, welche die Animation beschreibt. Dann kann ein overlay zB folgende Klassen haben: "overlay fade-out" oder "overlay shatter" oder "...." Du kannst dann mit jQuery alle overlays holen und dann eben nicht mit .hide() sondern je nach Klassenname eine andere jQuery Funktion aufrufen.
Alternativ kannst du zu jedem Overlay diese Informationen auch im JS speichern. In jQuery gibt es hier zB die .data() Funktion

KasselJulian · 07.08.2013

AW: "Klasse" in JavaScript

Hi,
das ist schon konkreter aber immer noch eine Alternativlösung zu dem was ich brauche. stell dir mal eine 100% individuelle Animation vor: Breite, Höhe, Farbe, Schrift, weiß der Geier! Das kannst du in kein Attribut der Welt packen, da siehst du bei mehreren Veränderungen alt aus, denn das geht ordentlich in die Länge.
Deshalb die Funktion die das übernimmt (von mir aus auch eine anonyme).

Duddle · 07.08.2013

AW: "Klasse" in JavaScript

Zum Zeitpunkt von myhars Beitrag hast du noch nicht erwähnt, dass die Objekte verschieden geschlossen werden können. Curanai hat .hide() nie erwähnt und, wenn ich ihn recht verstehe, nur bestätigt dass mein "Alle schließen, bevor das neue geöffnet wird"-Ansatz gut genug ist. Auch ich habe übrigens nie .hide() erwähnt, sondern nur den Ansatz, die Schließen-Funktion für jedes Overlay aufzurufen, bevor das neue geöffnet wird.

ich muss die Funktion die das Schließen des jeweiligen Overlays übernimmt ja aufrufen.

Du musst nur die nach aussen gezeigte Schließen-Funktion aufrufen. Intern weiß das Objekt selbst, was für eine Schließen-Animation benutzt wird. Schau dir mal folgendes Beispiel an:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Overaketenlays</title>
</head>
<body>
  <script>
    function foo() {
      alert("foo");
    }
    function bar() {
      alert("bar");
    }
    function Overlay(closeFn) {
      this.closer = closeFn;
      this.schliessen = function() {
        this.closer()
      }
    }
    function go() {
      var f = new Overlay(foo);
      var b = new Overlay(bar);
      f.schliessen();
      b.schliessen();
    }
    window.onload = go();
  </script>
</body>
</html>

Dort weiß nur das Overlay selbst, welche Schließ-Funktion es nutzt. Die Anwendung ruft nur die .schliessen()-Funktion des Objektes auf, alles andere regelt das Objekt selbst.

Duddle

KasselJulian · 07.08.2013

AW: "Klasse" in JavaScript

Duddle schrieb:
Dort weiß nur das Overlay selbst, welche Schließ-Funktion es nutzt. Die Anwendung ruft nur die .schliessen()-Funktion des Objektes auf, alles andere regelt das Objekt selbst.

Das ist soweit richtig, aber und das ist das worum es seit Anfang an geht: Ich weiß nicht, welche Overlays innerhalb meines Scripts geöffnet werden. Da können von mir aus 100 Millionen Overlays sein, doch alle sollen was gemeinsam haben: Alle rufen die Funktion auf die bei dir go() heißt und diese schließt alle Overlays. Das hast du auch richtig mit einbezogen. Doch weißt du in der Funktion go() schon wie die Overlays heißen und da bist du mir einen Schritt voraus. Jedes Overlay muss deshalb irgendwo in einer "Klasse" hinterlegen, welche Funktion sie zum schließen gerne aufrufen möchte.

Also Ablaufplan für ein Overlay:
1.) Overlay ruft Klasse close() auf mit einem Parameter: Dem Funktionsnamen der aufgerufen werden soll, wenn alle Overlays schließen sollen.
2.) Overlay ruft die Methode go() auf bevor sie das Overlay öffnet. Klasse go() hat ggf. noch von anderen Overlays hinterlegte Funktionsnamen. Diese ruft sie alle der Reihe nach auf, sodass alle Overlays geschlossen sind. Anschließend ist der Rückgabewert ein boolean

Duddle · 07.08.2013

AW: "Klasse" in JavaScript

Hey, ich habe dich endlich verstanden, prima.
Du brauchst dafür keine extra Klasse. Ein Array reicht für diese Zwecke. Bevor ein Overlay sich öffnet, ruft es irgendeine Hilfsfunktion auf, welche durch das Array der bekannten Overlays geht und jedes schließt.

Wenn du das unbedingt einkapseln willst, schau dir das Observer-Pattern an.

Duddle