Matthias Scharwies: Self-Wiki: OOP in JS

SELF-Forum

Self-Wiki: OOP in JS

Matthias Scharwies (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Guten Morgen!

Dies soll eine Diskussion über unseren OOP in JS-Kurs werden, bei der ich die weitere, gemeinsame Vorgehensweise diskutieren möchte.

  1. Ist der Artikel nötig?
  2. Ist der inhaltliche Aufbau ok? (Überschriften, Kontextualisierung)
  3. Ist der Text sachlich richtig und sprachlich ansprechend? (Hilfe:Wie sehen gute Tutorials aus?)
  4. Wie findet man den Artikel?

Zu 1.

JavaScript/Tutorials/OOP soll Fortgeschrittenen nach dem DOM-Tutorial Objekte und den Umgang damit näherbringen. Das ist kein Randthema, sondern zentral für modernes Arbeiten mit JavaScript. Da müssen wir etwas Vorzeigbares haben!

Ein solches ES6-OOP-Tutorial - und das auch noch in Deutsch!- wäre etwas, was es noch nicht gibt! Selbst im Englischen beschränkt es sich oft auf eine schnelle Einführung ohne Best Practice-Tipps!

Grundlage waren Texte, die @molily 2006-2008 in SELFHTML-Aktuell als "Organisation von JavaScripten" veröffentlichte. [1] Einiges findet sich mittlerweile woanders:

Seit 2016 gibt es Ansätze, das neu zu schreiben. Viele Versuche sind in Benutzernamensräumen und im Test-Wiki stecken geblieben. Im Nov 2021 hatte Benutzer:WiKo versucht, was zu class zu schreiben - er war von unserem Stammtisch enttäuscht, da dort nur geplaudert wurde (er hatte wohl eine Redaktionsssitzung erwartet) und wir haben es wieder liegen gelassen! :-(

zu 3. Ist-Zustand

JavaScript/Tutorials/OOP

  1. Der Einstieg ist nun auf der Portalseite integriert und erfordert nun einen Klick weniger.

  2. Objekte und ihre Eigenschaften @Rolf B hatte sich in den letzten Wochen erneut darüber hergemacht. Er möchte es künftig noch glattziehen; ich finde es aber so schon vorzeigbar! Vielen Dank!!

  3. Klassen und Vererbung - Das Tuturial führt zuerst class ein; die Beispiele sind kontextualisiert. [2] Nach der „neuen “ ES6-Syntax folgt das gekürzte Vorgehen in ES3. Das ToDo zeigt erst am Ende, was noch zu verbessern ist. Imho ist es auch so zumindest nicht falsch und bietet Nutzern Information.

  1. Module und Kapselung - Es erklärt die Syntax; benötigt aber ein durchgehendes Beispiel.Was böte sich da an? Das ToDo am Ende beschreibt unsere Ziele.

Fragen

Sind die Kapitel 1-4 ok so? Was könnten wir verbesssern? Kleinere Edits sind willkommen; größere Änderungen bitte erst hier vorschlagen, diskutieren und dann nach gemeinsamen Beschluss tätig werden.

zu 2. inhaltlicher Aufbau

Wir haben immer wieder das Thema Getter und Setter angefangen - ich habe alle Bruchstücke mal auf diese Seite kopiert: Getter und Setter

Ausgehend von dieser Gliederung - wo würdet Ihr die Getter und Setter behandeln?

  1. Zu Klassen und Vererbung

  2. Vor die Closures in Objektverfügbarkeit_und_this

  3. Als eigenständiges Kapitel - evtl zu Funktionen??

  4. Closures werden in Kapitel 5 besprochen: Objektverfügbarkeit_und_this . Gibt es da einen besseren Titel?

Wie gesagt: 2016 haben wir angefangen; mittlerweile sind wir weiter; aber im Mai möchte ich es endlich einmal vorzeigbar kriegen! (Und 2028 werden unsere Nachfolger dann eben etwas völlig neues schreiben!

Herzliche Grüße

Matthias Scharwies

  1. https://molily.de/js/ ↩︎

  2. Unterrichtsstunden und Tutorials sollten einen Roten Faden haben und nicht nur ein techn. Problem, sondern eben auch ein Thema durchziehen. Deshalb sollten alle Beispiele aufeinander aufbauen! ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Self-Wiki: OOP in JS

    Rolf B (Versionen)
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Hallo Matthias,

    Closures finde ich als Unterkapitel von "Objektverfügbarkeit und this" fehlplatziert, das Thema ist so komplex, dass es einen eigenene Artikel verdient hat. Da hirne ich noch, wie man das balanciert.

    • Funktionen
    • Scopes
    • this
    • Closures
    • Non-ES6 Module

    Das überschneidet sich alles thematisch und wird in zig Artikeln immer wieder angesprochen und teils auch neu erklärt. Das ist sehr mühsam zu pflegen.

    Einen Artikel zu Scopes habe ich angefangen, der ist noch unverlinkt und in Arbeit. Wenn der mal was taugt, möchte ich die viefältigen Erklärungen zu Scopes im Wiki möglichst weit ausdünnen und auf den Scopes-Artikel verweisen. Das bedeutet natürlich, dass dieser Artikel eine anfängergerechte Einführung braucht, aber dann auch einen Teil 2, der das Thema komplett diskutiert.

    Die ES6-Module brauchen auch mehr Aufmerksamkeit. Den Module-Scope habe ich schon beschrieben, Eigenheiten von script type="module" stehen beim Script-Element. Der richtige Umgang mit import und export muss ausgebaut werden und dann muss man noch auf Tools zum Bündeln eingehen - denn ein mit ES6-Modulen aufgebautes System ohne Bündeler kann man nicht produktiv betreiben.

    Zum Thema Getter/Setter: das sind spezielle Typen von Objekteigenschaften, die mit Hilfe von Funktionen realisiert sind.

    {get [ausdruck]() { ... } }

    sieht obskur aus, entspricht aber der Objektliteral-Syntax für Eigenschaften mit Namen, die aus einer Variablen stammen.

    const währung = "$";
const obj = {
   get €() { return 17.50; },         // Fehler
   get '€'() { return 17.50; },       // Erzeugt die Eigenschaft €
   get [währung]() { return 12.34; }  // Erzeugt die Eigenschaft $
}

    Das sind vertiefende Aspekte von Objekteigenschaften, aber eigentlich Syntaxzucker für das Anlegen von speziellen Eigenschaften mit Propertydeskriptoren. Das gehört also zusammen. Bis auf den Fehler erzeugen die folgenden Zeilen das Gleiche wie oben:

    const obj = {};
Object.defineProperty(obj, '€', { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 17.50; } });
Object.defineProperty(obj, währung, { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 12.34; } });
//                Dieser Doppelpunkt ↑ ist richtig und wichtig!

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Self-Wiki: OOP in JS

      Matthias Scharwies (Versionen)
      – Informationen zu den Bewertungsregeln

      problematische Seite

      Servus! Mir ging es vor allem drum, alle unfertigen Seiten zu erfassen, damit wir jetzt keine Dopplungen haben und sich evtl. über eine künftige Struktur Gedanken zu machen.

      Closures finde ich als Unterkapitel von "Objektverfügbarkeit und this" fehlplatziert, das Thema ist so komplex, dass es einen eigenene Artikel verdient hat. Da hirne ich noch, wie man das balanciert.

      • Funktionen
      • Scopes
      • this
      • Closures
      • Non-ES6 Module

      Das überschneidet sich alles thematisch und wird in zig Artikeln immer wieder angesprochen und teils auch neu erklärt. Das ist sehr mühsam zu pflegen.

      ok!

      Einen Artikel zu Scopes habe ich angefangen, der ist noch unverlinkt und in Arbeit. Wenn der mal was taugt, möchte ich die viefältigen Erklärungen zu Scopes im Wiki möglichst weit ausdünnen und auf den Scopes-Artikel verweisen. Das bedeutet natürlich, dass dieser Artikel eine anfängergerechte Einführung braucht, aber dann auch einen Teil 2, der das Thema komplett diskutiert.

      Super - da freu ich mich schon drauf!

      Die ES6-Module brauchen auch mehr Aufmerksamkeit. Den Module-Scope habe ich schon beschrieben, Eigenheiten von script type="module" stehen beim Script-Element. Der richtige Umgang mit import und export muss ausgebaut werden und dann muss man noch auf Tools zum Bündeln eingehen - denn ein mit ES6-Modulen aufgebautes System ohne Bündeler kann man nicht produktiv betreiben.

      Ja! Ich schau mal nach den Verlinkungen!

      Zum Thema Getter/Setter: das sind spezielle Typen von Objekteigenschaften, die mit Hilfe von Funktionen realisiert sind.

      {get [ausdruck]() { ... } }

      sieht obskur aus, entspricht aber der Objektliteral-Syntax für Eigenschaften mit Namen, die aus einer Variablen stammen.

      const währung = "$";
const obj = {
   get €() { return 17.50; },         // Fehler
   get '€'() { return 17.50; },       // Erzeugt die Eigenschaft €
   get [währung]() { return 12.34; }  // Erzeugt die Eigenschaft $
}

      Das sind vertiefende Aspekte von Objekteigenschaften, aber eigentlich Syntaxzucker für das Anlegen von speziellen Eigenschaften mit Propertydeskriptoren. Das gehört also zusammen. Bis auf den Fehler erzeugen die folgenden Zeilen das Gleiche wie oben:

      const obj = {};
Object.defineProperty(obj, '€', { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 17.50; } });
Object.defineProperty(obj, währung, { enumerable: true, 
                                  configurable: true,
                                  get: function() { return 12.34; } });
//                Dieser Doppelpunkt ↑ ist richtig und wichtig!

      Evtl. kann man den Kurs mit einer ol sortieren und dann nach 2 Leerzeilen einen Text: „noch nicht einsortiert“ und die halbfertigen / noch nicht überarbeiteten Kapitel / Artikel in einer ul listen.

      Herzliche Grüße

      Matthias Scharwies

      --
      Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln