जेएस में प्रतिक्रियाशीलता
नमस्ते! यह मेरी अब तक की पहली कहानी है, और मैं इसे लेकर बहुत उत्साहित हूँ :))।
इस कहानी में, हम जावास्क्रिप्ट में सरल प्रतिक्रियाशीलता पर चर्चा करेंगे और यह प्रदर्शित करेंगे कि इसे कैसे लागू किया जाए। रिएक्ट और वीयू दोनों फ्रेमवर्क के उदाहरण हैं जो प्रतिक्रियाशीलता का उपयोग करते हैं। प्रतिक्रियाशीलता के साथ, डेटा में कोई भी परिवर्तन स्वचालित रूप से DOM को अपडेट कर देगा।
सबसे पहले, आइए प्रतिक्रियात्मकता कार्यान्वयन का एक सरल उदाहरण देखें:
<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>
हालाँकि, इस दृष्टिकोण की अनुशंसा नहीं की जाती है क्योंकि इसमें setCounterValueToDOMहर बार मान अपडेट होने पर फ़ंक्शन को कॉल करने की आवश्यकता होती है, जिसे खराब अभ्यास माना जाता है।
जावास्क्रिप्ट में स्क्रैच से प्रतिक्रियाशीलता को लागू करने के लिए, हम प्रॉक्सी ऑब्जेक्ट का उपयोग कर सकते हैं। कन्स्ट्रक्टर को ऑब्जेक्ट के साथ-साथ हैंडलर के लिए प्रारंभिक मान प्राप्त होगा। इस हैंडलर से हम ऑब्जेक्ट में होने वाले सभी परिवर्तनों को देख सकते हैं। आइए हमारे कोड के स्क्रिप्ट अनुभाग को फिर से लिखें:
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
}
उम्मीद है तुम्हें मजा आया होगा!
![क्या एक लिंक्ड सूची है, वैसे भी? [भाग 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
