JS'de Reaktivite
Selamlar! Bu benim ilk hikayem ve bu konuda çok heyecanlıyım :)).
Bu hikayede, JavaScript'te basit reaktiviteyi tartışacağız ve nasıl uygulanacağını göstereceğiz. React ve Vue , reaktiviteyi kullanan çerçeve örnekleridir. Reaktivite ile, verilerde yapılan herhangi bir değişiklik otomatik olarak DOM'u güncelleyecektir.
İlk olarak, basit bir reaktivite uygulaması örneği deneyelim:
<body>
<div id="counter-value"></div>
<button onclick="incr()"> incr </button>
<button onclick="decr()"> decr </button>
</body>
<script>
let counter = 0
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter
}
setCounterValueToDOM()
const incr = () => {
counter += 1
setCounterValueToDOM()
}
const decr = () => {
counter -= 1;
setCounterValueToDOM()
}
</script>
Ancak bu yaklaşım önerilmez çünkü setCounterValueToDOMdeğerin her güncellenmesinde işlevin çağrılmasını gerektirir ki bu kötü bir uygulama olarak kabul edilir.
Reaktiviteyi JavaScript'te sıfırdan uygulamak için bir Proxy nesnesi kullanabiliriz . Yapıcı, işleyicinin yanı sıra nesne için bir başlangıç değeri alacaktır. Bu işleyici ile nesnede meydana gelen tüm değişiklikleri gözlemleyebiliriz. kodumuzun script bölümünü yeniden yazalım:
const counterHandler = {
set(obj, prop, value) {
obj[prop] = value
setCounterValueToDOM()
return obj
}
}
const counter = new Proxy(
{
value: 0,
},
counterHandler,
)
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter.value
}
setCounterValueToDOM()
const incr = () => {
counter.value += 1
}
const decr = () => {
counter.value -= 1
}
Beğeneceğinizi umuyoruz!
![Bağlantılı Liste Nedir? [Bölüm 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
