jsDependencyInversionEx

<!DOCTYPE html>
<html lang="en" id="html">

<head>
    <meta charset="UTF-8">
    <title>MVC</title>
    <style>
        html,
        body {
            display: flex;
            width: 95%;
            height: 95%;
            min-width: 810px;
            min-height: 410px;
            align-items: center;
            justify-content: center;
            margin: 8px 15px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }

        .calcElement {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 50px;
            min-height: 50px;
            border: 1px solid black;
            margin: 5px 5px;
            padding: 2px 2px;
            font: bold 30px arial;
        }
    </style>
</head>

<body>
    <div id="calcView" class="centered">
        <div id="calcValA" class="calcElement"></div>
        <div id="calcOp" class="calcElement"></div>
        <div id="calcValB" class="calcElement"></div>
        <div id="calcEqual" class="calcElement">=</div>
        <div id="calcRes" class="calcElement"></div>
    </div>

    <div id="calcController" class="centered">
        <input id="calcInputAll" type="text" placeholder="valA oper valB">
    </div>

    <script>
        'use strict'

        class AJAXDBGetter {
            constructor(dbname) {
                this.dbname = dbname;
            }

            retriveData() {
                // full of ajax code...
                return `Here is data from ${this.dbname} got via ajax!`;
            }
        }

        class LocalStorageDB {
            constructor(dbname) {
                this.dbname = dbname;
            }

            loadFromStorage() {
                // full of Localstorage read code..
                return `Here is data from ${this.dbname} got via LocalStorage`;
            }
        }

        class DataClient {
            constructor(dbname) {
                this.dbname = dbname;
            }

            clientGetData() {
                // must override in child classes
                return undefined;
            }
        }

        class DataClientAJAX extends DataClient {
            constructor(dbname) {
                super(dbname);
                this.ajax = new AJAXDBGetter(this.dbname);
            }


            clientGetData() {
                return this.ajax.retriveData();
            }
        }

        class DataClientLocalStorage extends DataClient {
            constructor(dbname) {
                super(dbname);
                this.ls = new LocalStorageDB(this.dbname);
            }


            clientGetData() {
                return this.ls.loadFromStorage();
            }
        }

        class DBAccess {
            constructor(transport) {
                //this.dbname = dbname;
                this.transport = transport;

                //this.transport = new AJAXDBGetter(this.dbname);
                //this.transport = new LocalStorageDB(this.dbname);
            }


            data() {
                //return this.transport.retriveData();
                //return this.transport.loadFromStorage();

                return this.transport.clientGetData();
            }
        }

        //const db = new DBAccess('people');
        //console.log(db.data());

        const db = new DBAccess(new DataClientAJAX('people'));
        console.log(db.data());

        const db1 = new DBAccess(new DataClientLocalStorage('BADPeople'));
        console.log(db1.data());
    </script>
</body>

</html>