update es6 modules

ibwgr · May 1, 2020 · 55d50da · 55d50da
1 parent fda5092
commit 55d50da
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 50 deletions.
diff --git a/src/exercises/modules/admin.js b/src/exercises/modules/admin.js
@@ -1,16 +1,22 @@
-/* 
+/*
 
 Erstelle ein Admin Modul, dass
-- eine Klasse Person 
+- eine Klasse Person
 - und eine Klasse Store
 zur Verfügung stellt.
 
-Interfaces:
+So sollen die Klassen aussehen:
+
 Person(name, vorname)
+
 Store(items)
-    - add(item)
-    - remove(item)
-    - findAll(item=>boolean)
+  // items kann z.B. ein Array von Personen sein
+  - add(item)
+  - remove(item)
+  - findAll(item => boolean)
+  // das bedeutet: die Methode findAll erwartet als Argument eine Funktion,
+                   welche als Argument ein Item entgegen nimmt und ein Boolean retourniert
 
-Schreibe ein Programm (client.js), welches einen Store verwendet um Personen darin zu speichern, löschen, suchen.
-*/ 
+Schreibe ein Programm client.js, welches einen Store verwendet um Personen darin
+zu speichern, löschen, suchen.
+*/
diff --git a/src/exercises/solutions/modules/admin/admin.module.js b/src/exercises/solutions/modules/admin/admin.module.js
@@ -1,4 +1,3 @@
-'use strict'
 
-export {default as Person} from './person'
-export {default as Store} from './store'
+export {Person} from './person.js'
+export {Store} from './store.js'
diff --git a/src/exercises/solutions/modules/admin/client.js b/src/exercises/solutions/modules/admin/client.js
@@ -1,5 +1,4 @@
-'use strict'
-import {Person, Store} from './admin.module'
+import {Person, Store} from './admin.module.js'
 
 let p1 = new Person('Agatha', 'Kurnikova')
 
@@ -9,12 +8,13 @@ store.add(p1)
 store.add({
     name: 'Hans', vorname: 'Meier'
 })
+console.table(store.items)
 
 store.remove(p1)
 
 let pWithHa = store.findAll((p) => p.name.startsWith('Ha'))
-pWithHa
+console.log('starts with Ha:', pWithHa[0])
 
 store.remove(pWithHa.pop())
 
-store
+console.log(store.items.length)
diff --git a/src/exercises/solutions/modules/admin/index.html b/src/exercises/solutions/modules/admin/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Store Client - Modules</title>
+    <script type="module" src="client.js"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/src/exercises/solutions/modules/admin/person.js b/src/exercises/solutions/modules/admin/person.js
@@ -1,7 +1,6 @@
-'use strict'
-export default class {
+export class Person {
     constructor(name, vorname){
         this.name = name
         this.vorname = vorname
     }
-}
+}
diff --git a/src/exercises/solutions/modules/admin/store.js b/src/exercises/solutions/modules/admin/store.js
@@ -1,18 +1,29 @@
-'use strict'
-export default class {
+export class Store {
     constructor(items){
         this.items = items || []
     }
+
     add(item){
         this.items.push(item)
     }
+
     remove(item){
         let itemIdx = this.items.indexOf(item)
         if(itemIdx > -1){
             this.items.splice(itemIdx, 1)
         }
     }
+
     findAll(matcher){
-        return this.items.filter(matcher)
+        const matches = []
+        for(let item of this.items){
+            if(matcher(item)){
+                matches.push(item)
+            }
+        }
+        return matches
+
+        // funktionaler ansatz
+        // return this.items.filter(matcher)
     }
-}
+}
diff --git a/src/modules/app.js b/src/modules/app.js
@@ -0,0 +1,14 @@
+// 'use strict'  // optional, weil im Browser via <script type="module" geladen
+
+// import default
+import Logger from './logger.module.js'
+// oder als named import
+//import {default as Logger} from './logger.module.js'
+// import explicit
+import {PI as pii} from './logger.module.js'
+import {PI} from './logger.module.js'
+
+let l = new Logger(console.log)
+l.warn('hi')
+l.log('du')
+l.log([pii, PI, Logger.PI])
diff --git a/src/modules/index.html b/src/modules/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Modules</title>
+    <script type="module" src="app.js"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/src/modules/logger.js b/src/modules/logger.js
diff --git a/src/modules/logger.module.js b/src/modules/logger.module.js
@@ -0,0 +1,20 @@
+// 'use strict' // optional, weil im Browser via <script type="module" geladen
+
+// nicht exportiert => kein Zugriff von aussen
+function getFormattedDate(){
+    return new Date().toISOString()
+}
+
+export default class {
+    constructor(writer){
+        this.writer = writer
+    }
+    warn(msg){
+        this.writer('WARNING ' + getFormattedDate() + '\n' + msg)
+    }
+    log(msg){
+        this.writer('LOG ' + getFormattedDate() + '\n' + msg)
+    }
+}
+
+export const PI=3.141592653
diff --git a/src/modules/sample.js b/src/modules/sample.js
diff --git a/src/oop-es6.js b/src/oop-es6.js
@@ -1,4 +1,5 @@
 'use strict'
+
 class Auto{
     constructor(brand){
         this.brand = brand
@@ -28,4 +29,4 @@ class ElektroAuto extends Auto{
 
 let a2 = new ElektroAuto('Tesla', 174)
 a2.drive(193)
-console.log(a2.toString())
+console.log(a2.toString())