From f11dca91219187c44858ef5cdc0a178592faf15d Mon Sep 17 00:00:00 2001 From: junilHwang Date: Sat, 24 Oct 2020 18:24:26 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20example03=20=EC=9E=91=EC=84=B1=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example03/index.html | 11 +++++++++++ example03/src/app.js | 10 ++++++++++ example03/src/components/Items.js | 23 +++++++++++++++++++++++ example03/src/core/Component.js | 20 ++++++++++++++++++++ 4 files changed, 64 insertions(+) create mode 100644 example03/index.html create mode 100644 example03/src/app.js create mode 100644 example03/src/components/Items.js create mode 100644 example03/src/core/Component.js diff --git a/example03/index.html b/example03/index.html new file mode 100644 index 0000000..367c950 --- /dev/null +++ b/example03/index.html @@ -0,0 +1,11 @@ + + + + + Simple Component 2 + + +
+ + + \ No newline at end of file diff --git a/example03/src/app.js b/example03/src/app.js new file mode 100644 index 0000000..3aa76ed --- /dev/null +++ b/example03/src/app.js @@ -0,0 +1,10 @@ +import Items from "./components/Items.js"; + +class App { + constructor() { + const $app = document.querySelector('#app'); + new Items($app); + } +} + +new App(); diff --git a/example03/src/components/Items.js b/example03/src/components/Items.js new file mode 100644 index 0000000..e286796 --- /dev/null +++ b/example03/src/components/Items.js @@ -0,0 +1,23 @@ +import Component from "../core/Component.js"; + +export default class Items extends Component { + setup () { + this.$state = { items: ['item1', 'item2'] }; + } + template () { + const { items } = this.$state; + return ` + + + ` + } + + setEvent () { + this.$target.querySelector('button').addEventListener('click', () => { + const { items } = this.$state; + this.setState({ items: [ ...items, `item${items.length + 1}` ] }); + }); + } +} \ No newline at end of file diff --git a/example03/src/core/Component.js b/example03/src/core/Component.js new file mode 100644 index 0000000..61e87aa --- /dev/null +++ b/example03/src/core/Component.js @@ -0,0 +1,20 @@ +export default class Component { + $target; + $state; + constructor ($target) { + this.$target = $target; + this.setup(); + this.render(); + } + setup () {}; + template () { return ''; } + render () { + this.$target.innerHTML = this.template(); + this.setEvent(); + } + setEvent () {} + setState (newState) { + this.$state = { ...this.$state, ...newState }; + this.render(); + } +}