-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathAppDemo11Id.vue
175 lines (149 loc) · 5.74 KB
/
AppDemo11Id.vue
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<template>
<app-demo
:path="DEFAULT_PATH"
:name="$options.name"
class="app-demo__card-11"
>
<pre class="app-demo__code keadaan"></pre>
<input type="number" class="app-demo__form input1" min="0" />
<select class="app-demo__form operator">
<option value="+">+</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="number" class="app-demo__form input2" min="0" />
<div class="result"></div>
<hr />
<pre class="app-demo__code keadaan-2"></pre>
<div>
<button class="app-demo__form mulai">Mulai</button>
<button class="app-demo__form berhenti">Berhenti</button>
<button class="app-demo__form reset">Reset</button>
</div>
<div class="detik"></div>
<div ref="script11" class="script"></div>
</app-demo>
</template>
<script lang="ts">
import onetime from 'onetime'
import ExtendableCreateReactivity2 from './ExtendableCreateReactivity2'
export default ExtendableCreateReactivity2.extend({
name: 'AppDemo11Id',
mounted() {
const interval = setInterval(() => {
const script11 = this.$refs?.script11 as Element
if (script11) {
this.init(script11)
clearInterval(interval)
}
}, 50)
},
methods: {
init: onetime(function (script11: Element) {
const newScript = document.createElement('script')
const inlineScript = document.createTextNode(`if (!window.keadaan11) {
// Kita meletakkan kode di dalam ekspresi fungsi yang dipanggil secara langsung untuk mencegah mengotori variabel global
// Kita juga mengganti fungsi panah menjadi fungsi anonim karena fungsi panah akan diserialisasi oleh Nuxt.
window.keadaan11 = (function () {
const OPERATOR = {
PLUS: '+',
SUBSTRACT: '-',
MULTIPLY: '*',
DIVIDE: '/'
}
const keadaan = {
result: 0,
operator: OPERATOR.PLUS,
input1: 0,
input2: 0
}
function main() {
// Kita harus memberi awalan selektor sesuai dengan kelas akar komponen
// Hal tersebut mencegah scrip dieksekusi untuk semua demo
const tampilanKeadaan = document.querySelector(
'.app-demo__card-11 .keadaan'
)
const tampilanHasil = document.querySelector(
'.app-demo__card-11 .result'
)
const tampilanInput1 = document.querySelector(
'.app-demo__card-11 .input1'
)
const tampilanInput2 = document.querySelector(
'.app-demo__card-11 .input2'
)
const tampilanOperator = document.querySelector(
'.app-demo__card-11 .operator'
)
function mutakhirkanTampilan() {
tampilanKeadaan.innerText = JSON.stringify(keadaan, null, 2)
tampilanHasil.innerText = keadaan.result.toString()
tampilanInput1.value = keadaan.input1.toString()
tampilanInput2.value = keadaan.input2.toString()
tampilanOperator.value = keadaan.operator
}
function kalkulasiHasil() {
switch (keadaan.operator) {
case OPERATOR.PLUS:
keadaan.result = keadaan.input1 + keadaan.input2
break
case OPERATOR.SUBSTRACT:
keadaan.result = keadaan.input1 - keadaan.input2
break
case OPERATOR.MULTIPLY:
keadaan.result = keadaan.input1 * keadaan.input2
break
case OPERATOR.DIVIDE:
keadaan.result = keadaan.input1 / keadaan.input2
break
default:
break
}
}
const daftarKunci = Object.keys(keadaan)
daftarKunci.forEach(function (kunci) {
let nilai = keadaan[kunci]
Object.defineProperty(keadaan, kunci, {
enumerable: true,
configurable: true,
get: function pengambilReaktif() {
return nilai
},
set: function pengaturReaktif(nilaiBaru) {
if (nilaiBaru === nilai) {
return
}
nilai = nilaiBaru
mutakhirkanTampilan()
kalkulasiHasil()
}
})
})
mutakhirkanTampilan()
tampilanInput1.addEventListener('input', function (peristiwa) {
const targetInput1 = peristiwa.target
keadaan.input1 = parseInt(targetInput1.value)
})
tampilanInput2.addEventListener('input', function (peristiwa) {
const targetInput2 = peristiwa.target
keadaan.input2 = parseInt(targetInput2.value)
})
tampilanOperator.addEventListener('change', function (peristiwa) {
const targetOperator = peristiwa.target
const selectedOperator = targetOperator.selectedOptions[0].value
keadaan.operator = selectedOperator
})
}
// Kita harus menjalankan fungsi karena skrip ini dieksekusi di dalam komponen vue
// document.addEventListener('DOMContentLoaded', main)
main()
return keadaan
})()
}`)
newScript.appendChild(inlineScript)
script11.appendChild(newScript)
})
}
})
</script>