Add more abstraction examples

tshemsedinov · tshemsedinov · commit 64946767825e · 2020-02-01T20:50:08.000+02:00
diff --git a/JavaScript/2-abstraction.js b/JavaScript/2-abstraction.js
@@ -0,0 +1,29 @@
+'use strict';
+
+// Case 2: Active entity
+// for example: Collection, Stream, Scheduler
+
+class Collection {
+  constructor() {
+    this.keys = [];
+    this.values = [];
+  }
+
+  set(key, value) {
+    this.keys.push(key);
+    this.values.push(value);
+  }
+
+  get(key) {
+    const index = this.keys.indexOf(key);
+    if (index === -1) return;
+    return this.values[index];
+  }
+}
+
+// Usage
+
+const collection = new Collection();
+collection.set('name', 'Marcus Aurelius');
+const name = collection.get('name');
+console.dir({ name });
diff --git a/JavaScript/3-abstraction.html b/JavaScript/3-abstraction.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="application/javascript">
+
+// Case 3: Visul component
+
+class PageCaption extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<h1>${this.getAttribute('name')}</h1>`;
+  }
+}
+
+window.customElements.define('page-caption', PageCaption);
+
+    </script>
+  </head>
+  <body>
+    <page-caption name="Marcus">Marcus Aurelius</page-caption>
+  </body>
+</html>
