Daten in Tabellen im Browser speichern

Objektorientiert programmieren mit JavaScript

Ja, es gibt localStorage. In diesem kleinen Beitrag möchte ich einmal mehr darüber schreiben. Ziel war es, eine Klasse zu entwerfen welche die Anwendung extrem vereinfacht, etwa so:

ce = new Cells(['Name','eMail','Telefon'], '/cells.html', 600);

Wobei nur noch die Templates für die Tabellen zu erstellen sind. Was dabei herausgekommen ist, sehen Sie obenstehend. Sie dürfen das gerne testen, die eingegebenen Daten werden nur lokal auf Ihrem eigenen PC gespeichert.

Objektorientierte Programmierung

Diese Art zu Programmieren ist mit JavaScript sowohl möglich als auch einfach. Als Erstes stellt sich natürlich die Fage nach dem Warum und angesichts obenstehender Anwendung sehen wir schon warum es sich lohnt, sich damit zu befassen: Die Anwendung vereinfacht sich dahingehend, als daß sämtliche Funktionen und Variablen in einer Klasse gekapselt sind. Dadurch wird die Anwendung nicht nur übersichtlicher sondern auch wartungsfreundlicher, also wenn später einmal Erweiterungen einzubauen sind, ist das in Kürze erledigt. Ebenso auch eine etwaige Fehlersuche.

Klassen, Instanzen, Eigenschaften und Methoden

In JavaScript (JS) ist, wie in anderen Programmiersprachen auch, eine Instanz ein Objekt daß weiß zu welcher Klasse es gehört. Diese Klassenzugehörigkeit erlaubt dem Objekt das Ausführen von Methoden (Funktionen) welche die Klasse (und nur diese) für Instanzen bereitstellt. Das besondere an JS ist, daß hier eine Funktion als Klasse und auch als Konstruktor betrachtet wird. So erzeugt:

// Klasse und Konstruktor
function Cell( cols ){
    // weise eine Eigenschaft zu
    this.cols = cols;

    // definiere eine Methode
    this.showcols = function(){
        console.log( JSON.stringify(this.cols,null,2) );    
    };
}

let ce = new Cell(['Name','eMail','Telefon']);

in ce eine Instanz der Klasse Cell Wobei der Funktion Cell als Konstruktor ein Array mit Namen übergeben wird welches sich als Eigenschaft in der Instanz wiederfindet. Der Aufruf der Methode:

ce.showcols();

zeigt die JSON-Version des Arrays in der Console an. Eine Übergabe des Arrays ist nicht erforderlich, denn es ist ja bereits als Eigenschaft an die Instanz gebunden. Merke: In jeder Methode stehen mit der Instanz alle Eigenschaften zur Verfügung. So kann mit ce.render() eine ganze Tabelle im Browser ausgegeben werden, vorausgesetzt die dazugehörigen Daten liegen als Eigenschaft in der Instanz vor.

Alle zur Anwendung benötigten Daten als Eigenschaften an eine Instanz zu binden welche über Methoden verfügt die den Umgang mit diesen Daten ermöglichen, das ist der eigentliche Sinn einer objektorientierten Programmierung.

Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.