avr39ripe

jsDependencyInversionEx

Jun 21st, 2021
552
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en" id="html">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>MVC</title>
  7.     <style>
  8.         html,
  9.         body {
  10.             display: flex;
  11.             width: 95%;
  12.             height: 95%;
  13.             min-width: 810px;
  14.             min-height: 410px;
  15.             align-items: center;
  16.             justify-content: center;
  17.             margin: 8px 15px;
  18.         }
  19.  
  20.         .centered {
  21.             display: flex;
  22.             flex-direction: row;
  23.             align-items: center;
  24.             justify-content: center;
  25.             padding: 50px;
  26.         }
  27.  
  28.         .calcElement {
  29.             display: flex;
  30.             justify-content: center;
  31.             align-items: center;
  32.             min-width: 50px;
  33.             min-height: 50px;
  34.             border: 1px solid black;
  35.             margin: 5px 5px;
  36.             padding: 2px 2px;
  37.             font: bold 30px arial;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="calcView" class="centered">
  44.         <div id="calcValA" class="calcElement"></div>
  45.         <div id="calcOp" class="calcElement"></div>
  46.         <div id="calcValB" class="calcElement"></div>
  47.         <div id="calcEqual" class="calcElement">=</div>
  48.         <div id="calcRes" class="calcElement"></div>
  49.     </div>
  50.  
  51.     <div id="calcController" class="centered">
  52.         <input id="calcInputAll" type="text" placeholder="valA oper valB">
  53.     </div>
  54.  
  55.     <script>
  56.         'use strict'
  57.  
  58.         class AJAXDBGetter {
  59.             constructor(dbname) {
  60.                 this.dbname = dbname;
  61.             }
  62.  
  63.             retriveData() {
  64.                 // full of ajax code...
  65.                 return `Here is data from ${this.dbname} got via ajax!`;
  66.             }
  67.         }
  68.  
  69.         class LocalStorageDB {
  70.             constructor(dbname) {
  71.                 this.dbname = dbname;
  72.             }
  73.  
  74.             loadFromStorage() {
  75.                 // full of Localstorage read code..
  76.                 return `Here is data from ${this.dbname} got via LocalStorage`;
  77.             }
  78.         }
  79.  
  80.         class DataClient {
  81.             constructor(dbname) {
  82.                 this.dbname = dbname;
  83.             }
  84.  
  85.             clientGetData() {
  86.                 // must override in child classes
  87.                 return undefined;
  88.             }
  89.         }
  90.  
  91.         class DataClientAJAX extends DataClient {
  92.             constructor(dbname) {
  93.                 super(dbname);
  94.                 this.ajax = new AJAXDBGetter(this.dbname);
  95.             }
  96.  
  97.  
  98.             clientGetData() {
  99.                 return this.ajax.retriveData();
  100.             }
  101.         }
  102.  
  103.         class DataClientLocalStorage extends DataClient {
  104.             constructor(dbname) {
  105.                 super(dbname);
  106.                 this.ls = new LocalStorageDB(this.dbname);
  107.             }
  108.  
  109.  
  110.             clientGetData() {
  111.                 return this.ls.loadFromStorage();
  112.             }
  113.         }
  114.  
  115.         class DBAccess {
  116.             constructor(transport) {
  117.                 //this.dbname = dbname;
  118.                 this.transport = transport;
  119.  
  120.                 //this.transport = new AJAXDBGetter(this.dbname);
  121.                 //this.transport = new LocalStorageDB(this.dbname);
  122.             }
  123.  
  124.  
  125.             data() {
  126.                 //return this.transport.retriveData();
  127.                 //return this.transport.loadFromStorage();
  128.  
  129.                 return this.transport.clientGetData();
  130.             }
  131.         }
  132.  
  133.         //const db = new DBAccess('people');
  134.         //console.log(db.data());
  135.  
  136.         const db = new DBAccess(new DataClientAJAX('people'));
  137.         console.log(db.data());
  138.  
  139.         const db1 = new DBAccess(new DataClientLocalStorage('BADPeople'));
  140.         console.log(db1.data());
  141.     </script>
  142. </body>
  143.  
  144. </html>
RAW Paste Data