Object Orientierte Programmierung in Javascript

Vor 10 Jahren hielt ich immer Abstand von Javascript. Nur wenn es sein musste habe ich mich mit JS beschäftigt. Das waren mir zu viel geschweifte Klammern und Callbacks und es haftete an Javascript ein schlechtes Image, was die Sicherheit anging, an. Um auch ganz ehrlich zu sein, ich hatte Probleme Javascript Code richtig zu lesen. Heute sieht die Welt ganz anders aus. Mittlerweile liebe ich Javascript! Damals nutzte ich für meine Arbeiten dann auch Jquery, da es mir übersichtlicher erschien. Heute nutze ich kein Jquery dafür ausgereifte Javascript Frameworks wie Vue Js oder einfach nur Vanilla JS. Das ich konsequent in meine Projekte umsetze. Ich mache beim Kunden auch kein Hehl aus meiner „Abneigung“ zu Jquery. Es ist zwar nicht wirklich eine Abneigung im klassischen Sinn. Ich nutzte es halt nicht mehr gerne. Unnötiger „Perfomancefresser“.

Das schöne ist, man kann mit JS auch Objekt orientiert entwickeln. Im folgenden Zeige ich Euch ein einfaches Beispiel wie man sauber ein Javascript Objekt erstellt und nutzt.

Ich werde nun ein Warenkorb Objekt erstellen.

Anforderung:

  • wir wollen Produkte zu einem Warenkrob (Cart) hinzufügen (addToCart)
  • wir wollen Produkte aus dem Warenkrob löschen (removeFromCart)
  • der Warenkorb soll im Browser LocalStorage gespeichert werden (save)
  • wir wollen die aktuelle Anzahl der Produkte ermitteln (getCartCount)
  • wir wollen die aktuelle Warenkorb Preis / Summe ermitteln (getCartSum)
class Cart {
        constructor(cart_name) {
            this._cart_name = cart_name;                    
            this._cart;
            this.init();            
        }

        init() 
        {
            let _storage = localStorage.getItem(this.cart_name);
            if (_storage === null) 
            {
                // create new basket Element with an empty array                
                localStorage.setItem(this.cart_name, JSON.stringify([]));
            }  
            this._cart = JSON.parse(localStorage.getItem(this.cart_name));          
            this.refreshViewPoints();           
        }

        get cart_name() {
            return this._cart_name;
        }
        set cart_name(value) {
            this._cart_name = value;
        }

        get cart() {
            return this._cart;
        }

        getCart() {
            return (this.cart);
        }

        deleteWholeCart() {
            this._cart = null;          
            localStorage.removeItem(this.cart_name);
            this.init();
        }

        addItem(id ,q = "1") {
            id = String(id);
            q = String(q);
            console.log("addItems " + id +" with "+ q)
            // check if item_id allready exists and modify cart item or create new cart item
            let is_new = true;
            for (let i=0; i < this._cart.length; i++) {
                if (this._cart[i].product_id === id) {
                    this._cart[i].q = q;
                    is_new = false;
                }
            }   

            if (is_new === true) {              
                this._cart.push( {"product_id":id, "q":q} );   
            }
            
            this.saveCart();
            this.refreshViewPoints();
        }

        saveCart() {
            let _storage = localStorage.getItem(this.cart_name);            

            localStorage.setItem(this.cart_name, JSON.stringify(this._cart));           
            this._cart = JSON.parse(localStorage.getItem(this.cart_name));          
        }

        refreshViewPoints() {            
            document.getElementById("myBasketBadge").innerHTML = this.getCart().length;
            myBasketCount = this.getCart().length;
            document.getElementById("sum").innerHTML = this.calculateCartSum();
            this.renderBasketOverview();
            document.getElementById("json").innerHTML = JSON.stringify(this.getCart());
        }

        calculateCartSum() {   
            if(this.cart.length === 0) {
                return 0;
            }
            
            let sum = this._cart.map((item) => {

                let item_data = pl.filter(function(pl_item) {
                    return pl_item.id == item.product_id
                });

                return (item.q * item_data[0].productPrice);
            });
            console.log(sum);
            return sum.reduce(function(a, b){
                    return a + b;
            }, 0);                      
        }

        deleteItemFromCart(id) {
            this._cart = this._cart.filter(function(item) {
                return item.product_id !== id
            });         
            this.saveCart();
            this.refreshViewPoints();           
        }

        renderBasketOverview() {    
            this.renderBasketContainer();            
        }

        renderBasketContainer() {
            let container = document.getElementById("basketOverviewContainer");                     
            container.innerHTML = '';
            let tbl  = document.createElement('table');
            tbl.style.width  = '100px';

            tbl.style.border = '1px solid black';           
            for(let i = 0; i < this.getCart().length; i++){
                let tr = tbl.insertRow();
                let td = tr.insertCell();
                let str = "id:" +this.getCart()[i].product_id + " q:" + this.getCart()[i].q;
                td.appendChild(document.createTextNode(str));
                td.style.border = '1px solid black';                
            }
            container.appendChild(tbl);                  
        }       
    }

Ihr könnt das Projekt auch aus meinem GitHub klonen.

https://github.com/MikeLowrey/js-shopping-cart-oop


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Javascript – Fakultät berechnen

January 19, 2022

Ab und an braucht man das und nicht nur in der Kombinatorik. Wer es etwas übersichtlicher braucht (und dazu zähle ich mich auch) kann es auch in einer for schleife machen.

Javascript – Was ist eigentlich Promisification?

January 6, 2022

“Promisification” ist ein lange Wort für eine ganz simple Sache. Es geht eigentlich um die immer gleiche Frage, sobald man das erste Mal in JS eine API Anfrage stellt. Wie krieg ich das Zeug in den globalen Scope? Man bedient sich ganz einfach damit, die asynchronität zu stoppen und mal ein päuschen einzulegen. Sobald dann […]

JS find() – Im array suchen

December 16, 2021

Ihr habt ein array mit drei ToDo Objekten. Ihr wollte jetzt nach dem Nutzernamen suchen um das Objekt auszulesen. Output Toll!

JS reverse() – Ein Array umkehren

December 16, 2021

Wer hat das noch nicht versucht? Ein array zu bekehren? 😉 In JS gibt es die Funktion reverse() die ein Array umdreht. Besipiel const people = [{name: ‘Alfons’},{name: ‘Bernd’},{name: ‘Christian’}]; Jetzt bekehren wir sie :-0 const convertetedPeople = people.reverse(); JS ist einfach cool!

Drei nützliche JavaScript Object Funktionen

October 14, 2021

Es gibt im JavaScript viele nützliche Array Funktionen aber wiederum gelten die nicht für Objekte. Das kann zum Beispiel ein Grund sein, warum man sich einer Object Funktion bedient um daraus ein Array zu machen. Ich stelle im Folgenden die Funktionen: Object.keys, Object.value und Object.entries vor. Ausgangsituation wäre ein nettes Objekt: Das sind nämlich die […]

Javascript – Das doppelte Ausrufezeichen

April 8, 2021

Der ein oder andere hat es vielleicht schon gesehen. In Javascript gibt es das doppelte Ausrufezeichen und nicht jeder kann damit auf anhieb etwas anfangen. Mein erster Gedanke war. Doppelte Verneinung. Ein häufiges Stilelement aus der russischen Sprache. Manche denken das ist ein Operator. Wieder andere denken, dass ist ein Tippfehler. The double exclamation mark […]