-
Notifications
You must be signed in to change notification settings - Fork 7
/
Day3-CompositePattern-03.html
101 lines (84 loc) · 3.03 KB
/
Day3-CompositePattern-03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html><head></head><body>
<section id="todo"></section>
<script>
const Element = class {
constructor(title) {
this._title = title;
}
getValue() { return this._getValue(); }
_getValue() { throw '_title() should be overriden'}
}
const TaskFolder = class extends Element {
constructor(title) {
super(title);
this._children = [];
}
add(element) {
this._children.push(element);
}
_getValue() {
const currentEl = Dr.el('section');
[
Dr.el('h1', 'innerHTML', '\uD83D\uDCC2 '+ this._title),
Dr.el('input', 'type', 'text', 'placeholder', '폴더나 작업 이름 입력'),
Dr.el('button', 'innerHTML', 'Add Folder', 'addEventListener', ['click', e => console.log('Add Folder')]),
Dr.el('button', 'innerHTML', 'Add Item', 'addEventListener', ['click', e => console.log('Add Item')]),
Dr.el('button', 'innerHTML', 'Add Remove', 'addEventListener', ['click', e => console.log('Remove')]),
].forEach(v => currentEl.appendChild(v));
return currentEl;
}
}
const TaskItem = class extends Element {
constructor(title) {
super(title);
}
_getValue() {
const currentEl = Dr.el('section');
[
Dr.el('h3', '@display', 'inline', 'innerHTML', '\uD83D\uDCCC ' + this._title),
Dr.el('button', 'innerHTML', 'Done', 'addEventListener', ['click', e => console.log('Done')]),
Dr.el('button', 'innerHTML', 'Undone', 'addEventListener', ['click', e => console.log('Undone')]),
Dr.el('button', 'innerHTML', 'Remove', 'addEventListener', ['click', e => console.log('Remove')]),
].forEach(v => currentEl.appendChild(v));
return currentEl;
}
}
const Dr = class {
static el(tag, ...attr) {
const el = document.createElement(tag);
for (let i = 0, len = attr.length; i < len;) {
const k = attr[i++], v = attr[i++];
if (typeof el[k] === 'function') el[k].apply(el, Array.isArray(v) ? v : [v]);
else if (k[0] === '@') el.style[k.substr(1)] = v;
else el[k] = v;
}
return el;
}
}
// 3 - DOM Renderer로 TaskFolder, TaskItem 렌더링
const rootEl = document.getElementById('todo');
const folder1 = new TaskFolder('folder1');
rootEl.appendChild(folder1.getValue());
const item1 = new TaskItem('folder1');
rootEl.appendChild(item1.getValue());
// 2 - DOM Renderer 추가 및 테스트
// const el1 = Dr.el('h1', 'innerHTML', 'ABCDE', '@display', 'inline');
// const el2 = Dr.el('h1', 'innerHTML', 'ZXD', '@display', 'inline');
// const button1 = Dr.el('button', 'innerHTML', 'Show Folder', 'addEventListener', ['click', e => console.log('Folder')]);
// document.getElementById('todo').appendChild(el1);
// document.getElementById('todo').appendChild(el2);
// document.getElementById('todo').appendChild(button1);
// 1 - Task, TaskFolder, TaskItem에 Composite 패턴 적용
// const root = new TaskFolder('root');
// const item1 = new TaskItem('item1');
// root.add(item1);
// const folder1 = new TaskFolder('folder1');
// root.add(folder1);
// const item11 = new TaskItem('item11');
// folder1.add(item11);
// const folder11 = new TaskFolder('folder11');
// folder1.add(folder11);
// console.log(root.getValue());
</script>
</body>
</html>