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.

*

*

Empfholende Artikel


Alphanumeric sorting of an array with objects according to the value of an object

June 30, 2022

Especially in the frontend it happens quite often that you want to sort an array, an array with objects according to a certain pattern. Javascript has very performant and nice functions. But you can use these functions not only in the frontend. If you write your backend with NodeJS you will also appreciate the array […]

JS reduce()

March 21, 2022

Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.

Return days of a month in an array

March 14, 2022

You need all days of a certain month then you can use this function: getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();console.log( […Array(getDaysInMonth(3, 2022)).keys()] ); Greets!

JS flat()

March 9, 2022

Es kommt schon mal vor das man geschachtelte arrays bekommt.Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem. Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da […]

JS bind()

March 8, 2022

Ein einfaches besipiel um JS bind() function zu verdeutlichen:

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.