🛠️ 🕳️ 🔆 जावास्क्रिप्ट प्रतिक्रियाशीलता: एक सरल और सहज उदाहरण 🖐🏼 👰🏿 ☯️

कई जावास्क्रिप्ट फ्रंट-एंड फ्रेमवर्क (जैसे कि एंगुलर, रिएक्ट, और वीयू) की अपनी स्वयं की प्रतिक्रियात्मक प्रणालियाँ हैं। इन प्रणालियों की विशेषताओं को समझना किसी भी डेवलपर के लिए उपयोगी होगा, उसे आधुनिक जेएस-फ्रेमवर्क का अधिक कुशलता से उपयोग करने में मदद करेगा।

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, शुद्ध जावास्क्रिप्ट में एक प्रतिक्रिया प्रणाली विकसित करने का चरण-दर-चरण उदाहरण दिखाता है। यह प्रणाली उन्हीं तंत्रों को लागू करती है जो Vue में उपयोग किए जाते हैं।

प्रतिक्रिया प्रणाली

कोई व्यक्ति जो पहली बार Vue प्रतिक्रियाशीलता प्रणाली का सामना करता है, यह एक रहस्यमय ब्लैक बॉक्स की तरह लग सकता है। एक साधारण Vue आवेदन पर विचार करें। ये है मार्कअप:

<div id="app">    <div>Price: ${{ price }}</div>    <div>Total: ${{ price*quantity }}</div>    <div>Taxes: ${{ totalPriceWithTax }}</div> </div>

यहां फ्रेमवर्क कनेक्शन कमांड और एप्लिकेशन कोड है।

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script>   var vm = new Vue({       el: '#app',       data: {           price: 5.00,           quantity: 2       },       computed: {           totalPriceWithTax() {               return this.price * this.quantity * 1.03           }       }   }) </script>

किसी तरह, Vue पता चलता है कि जब price बदलती है, तो इंजन को तीन चीजें करने की आवश्यकता होती है:

वेब पेज पर price मूल्य को ताज़ा करें।
उस भाव को फिर से समझें जिसमें price को quantity से गुणा किया जाता है, और पृष्ठ पर परिणामी मूल्य को प्रदर्शित करता है।
फ़ंक्शन को कॉल करें totalPriceWithTax और, फिर से, इसे पृष्ठ पर वापस totalPriceWithTax ।

यहाँ क्या होता है, निम्नलिखित दृष्टांत में दिखाया गया है।

जब मूल्य संपत्ति में परिवर्तन होता है तो वीयू को क्या करना है?

अब हमारे पास इस बारे में प्रश्न हैं कि Vue को कैसे पता चलता है कि price परिवर्तन होने पर वास्तव में अपडेट होने की आवश्यकता क्या है, और पृष्ठ पर क्या हो रहा है, इंजन कैसे ट्रैक करता है। आप यहाँ क्या देख सकते हैं एक नियमित जेएस आवेदन की तरह नहीं दिखता है।

शायद यह अभी तक स्पष्ट नहीं है, लेकिन मुख्य समस्या जिसे हमें यहां हल करने की आवश्यकता है, वह यह है कि जेएस कार्यक्रम आमतौर पर इस तरह काम नहीं करते हैं। उदाहरण के लिए, हम निम्नलिखित कोड चलाते हैं:

 let price = 5 let quantity = 2 let total = price * quantity //  10 price = 20; console.log(`total is ${total}`)

आपको क्या लगता है कंसोल में प्रदर्शित किया जाएगा? चूंकि नियमित जेएस को छोड़कर यहां कुछ भी उपयोग नहीं किया जाता है, 10 को कंसोल मिलेगा।

कार्यक्रम का परिणाम

और Vue की क्षमताओं का उपयोग करते समय, एक समान स्थिति में, हम एक परिदृश्य को लागू कर सकते हैं जिसमें price या quantity चर में परिवर्तन होने पर total मूल्य प्राप्त होता है। यही है, यदि उपरोक्त कोड के निष्पादन में प्रतिक्रिया प्रणाली का उपयोग किया गया था, तो 10 नहीं, बल्कि 40 कंसोल पर प्रदर्शित होंगे:

प्रतिक्रियात्मक प्रणाली का उपयोग करके काल्पनिक कोड द्वारा उत्पन्न कंसोल आउटपुट

जावास्क्रिप्ट एक ऐसी भाषा है जो प्रक्रियात्मक और वस्तु-उन्मुख दोनों को कार्य कर सकती है, लेकिन इसमें अंतर्निहित प्रतिक्रिया प्रणाली नहीं है, इसलिए कोड जिसे हमने माना जब price बदल रहा है, तो यह संख्या 40 को कंसोल में आउटपुट नहीं करेगा। price या quantity परिवर्तन होने पर total संकेतक को पुनर्गठित करने के लिए, हमें अपने आप पर एक प्रतिक्रिया प्रणाली बनाने की आवश्यकता होगी और इस प्रकार हमें उस व्यवहार को प्राप्त करना होगा जिसकी हमें आवश्यकता है। हम इस लक्ष्य को कई छोटे चरणों में तोड़ेंगे।

कार्य: संकेतक की गणना के लिए नियमों का भंडारण

total संकेतक की गणना कैसे की जाती है, इस बारे में जानकारी को सहेजने के लिए हमें कहीं न कहीं जरूरत है, जो हमें price या quantity चर के मूल्यों को बदलते समय इसकी पुन: गणना करने की अनुमति देगा।

▍Reshenie

सबसे पहले, हमें एप्लिकेशन को निम्नलिखित बताने की आवश्यकता है: "यहां वह कोड है जो मैं चलाने जा रहा हूं, इसे सहेजें, मुझे इसे दूसरी बार निष्पादित करने की आवश्यकता हो सकती है।" फिर हमें कोड को चलाने की आवश्यकता होगी। बाद में, यदि price या quantity संकेतक बदल गए हैं, तो आपको total को पुनः प्राप्त करने के लिए सहेजे गए कोड को कॉल करना होगा। यह इस तरह दिखता है:

बाद में इसे एक्सेस करने में सक्षम होने के लिए कुल गणना कोड को कहीं न कहीं सहेजने की जरूरत है

कुछ क्रिया करने के लिए आप जावास्क्रिप्ट में जिस कोड को कॉल कर सकते हैं, वह फ़ंक्शन के रूप में स्वरूपित है। इसलिए, हम एक फ़ंक्शन लिखेंगे जो total की गणना के साथ काम करता है, और भंडारण कार्यों के लिए एक तंत्र भी बनाता है जिसकी हमें बाद में आवश्यकता हो सकती है।

 let price = 5 let quantity = 2 let total = 0 let target = null target = function () {   total = price * quantity } record() //       ,       target() //

ध्यान दें कि हम अनाम फ़ंक्शन को target चर में संग्रहीत करते हैं, और फिर record फ़ंक्शन को कॉल करते हैं। हम इसके बारे में नीचे बात करेंगे। मैं यह भी ध्यान देना चाहूंगा कि ES6 एरो फ़ंक्शंस के सिंटैक्स का उपयोग करते हुए target फ़ंक्शन को निम्नानुसार फिर से लिखा जा सकता है:

 target = () => { total = price * quantity }

यहाँ फ़ंक्शन फ़ंक्शन और फ़ंक्शन को संग्रहीत करने के लिए उपयोग की जाने वाली डेटा संरचना की घोषणा है:

 let storage = [] //     target function record () { // target = () => { total = price * quantity }   storage.push(target) }

record फ़ंक्शन का उपयोग करते हुए, हम storage ऐरे में target फ़ंक्शन (हमारे मामले में { total = price * quantity } ) को बचाते हैं, जो हमें इस फ़ंक्शन को बाद में कॉल करने की अनुमति देता है, संभवतः replay फ़ंक्शन का उपयोग करते हुए, जिसका कोड नीचे दिखाया गया है। यह हमें storage में संग्रहीत सभी कार्यों को कॉल करने की अनुमति देगा।

 function replay () {   storage.forEach(run => run()) }

यहां हम storage ऐरे में स्टोर किए गए सभी अनाम फंक्शंस से गुजरते हैं और उनमें से प्रत्येक को निष्पादित करते हैं।

फिर हमारे कोड में हम निम्नलिखित कर सकते हैं:

 price = 20 console.log(total) // 10 replay() console.log(total) // 40

यह सब इतना मुश्किल नहीं दिखता है, है ना? यहाँ पूरा कोड है, जिन टुकड़ों के बारे में हमने ऊपर चर्चा की है, अगर यह आपके लिए अंत में इससे निपटने के लिए अधिक सुविधाजनक है। वैसे, यह कोड गलती से उस तरह से नहीं लिखा गया है।

 let price = 5 let quantity = 2 let total = 0 let target = null let storage = [] function record () {   storage.push(target) } function replay () {   storage.forEach(run => run()) } target = () => { total = price * quantity } record() target() price = 20 console.log(total) // 10 replay() console.log(total) // 40

यह शुरू होने के बाद ब्राउज़र कंसोल में प्रदर्शित किया जाएगा।

कोड परिणाम

चुनौती: भंडारण कार्यों के लिए एक विश्वसनीय समाधान

हम आवश्यक होने पर उन कार्यों को लिखना जारी रख सकते हैं, लेकिन यह अच्छा होगा यदि हमारे पास एक अधिक विश्वसनीय समाधान है जिसे आवेदन के साथ बढ़ाया जा सकता है। शायद यह एक ऐसा वर्ग होगा जो मूल रूप से target चर के लिए लिखे गए कार्यों की एक सूची रखता है, और अगर हमें इन कार्यों को फिर से निष्पादित करने की आवश्यकता है, तो सूचनाएं प्राप्त होती हैं।

▍ विकास: निर्भरता वर्ग

उपरोक्त समस्या को हल करने के लिए एक दृष्टिकोण एक वर्ग में हमारे द्वारा किए जाने वाले व्यवहार को बदलना है, जिसे निर्भरता कहा जा सकता है। यह कक्षा मानक पर्यवेक्षक प्रोग्रामिंग पैटर्न को लागू करेगी।

परिणामस्वरूप, यदि हम अपनी निर्भरता को प्रबंधित करने के लिए उपयोग किया जाने वाला JS वर्ग बनाते हैं (जो कि Vue में समान तंत्र कैसे लागू किया जाता है) के करीब होगा, तो यह इस तरह दिख सकता है:

 class Dep { // Dep -    Dependency   constructor () {       this.subscribers = [] //  ,                               //    notify()   }   depend () { //   record       if (target && !this.subscribers.includes(target)){           //    target                //                this.subscribers.push(target)       }   }   notify () { //   replay       this.subscribers.forEach(sub => sub())       //  -     } }

कृपया ध्यान दें कि storage ऐरे के बजाय, अब हम subscribers एरे में अपने अनाम कार्यों को स्टोर करते हैं। record फ़ंक्शन के बजाय, depend विधि अब कहा जाता है। यहां भी, replay फ़ंक्शन के बजाय, notify फ़ंक्शन का notify । यहां बताया गया है कि Dep क्लास का उपयोग करके हमारा कोड कैसे चलाया जाए:

 const dep = new Dep() let price = 5 let quantity = 2 let total = 0 let target = () => { total = price * quantity } dep.depend() //   target    target() //     total console.log(total) // 10 -   price = 20 console.log(total) // 10 -    ,    dep.notify() //   -  console.log(total) // 40 -

हमारा नया कोड पहले की तरह ही काम करता है, लेकिन अब यह बेहतर डिज़ाइन किया गया है, और ऐसा लगता है कि यह पुन: उपयोग के लिए बेहतर है।

एकमात्र चीज जो इसमें अब तक अजीब लगती है, वह target चर में संग्रहीत फ़ंक्शन के साथ काम कर रही है।

कार्य: अनाम फ़ंक्शंस बनाने के लिए तंत्र

भविष्य में, हमें प्रत्येक वेरिएबल के लिए क्लास Dep की एक वस्तु बनाने की आवश्यकता होगी। इसके अलावा, कहीं न कहीं अनाम कार्यों को बनाने के व्यवहार को एनकोड करना अच्छा होगा, जिसे संबंधित डेटा को अपडेट करते समय बुलाया जाना चाहिए। शायद यह हमें एक अतिरिक्त फ़ंक्शन के साथ मदद करेगा, जिसे हम watcher कहेंगे। यह इस तथ्य को जन्म देगा कि हम इस निर्माण को पिछले उदाहरण से एक नए फ़ंक्शन के साथ बदल सकते हैं:

 let target = () => { total = price * quantity } dep.depend() target()

वास्तव में, इस कोड को watcher वाले watcher फ़ंक्शन का कॉल इस तरह दिखाई देगा:

 watcher(() => {   total = price * quantity })

▍ समाधान: चौकीदार समारोह

watcher फ़ंक्शन के अंदर, जिसका कोड नीचे प्रस्तुत किया गया है, हम कई सरल क्रियाएं कर सकते हैं:

 function watcher(myFunc) {   target = myFunc //   target   myFunc   dep.depend() //  target      target() //     target = null //   target }

जैसा कि आप देख सकते हैं, myFunc फ़ंक्शन लेता है, एक तर्क के रूप में, myFunc फ़ंक्शन, इसे वैश्विक target चर पर लिखता है, इस फ़ंक्शन को ग्राहकों की सूची में जोड़ने के लिए dep.depend() को कॉल करता है, इस फ़ंक्शन को कॉल करता है और target चर को रीसेट करता है।
अब हम सभी समान मान 10 और 40 प्राप्त करते हैं यदि हम निम्नलिखित कोड निष्पादित करते हैं:

 price = 20 console.log(total) dep.notify() console.log(total)

शायद आप सोच रहे हैं कि हमने इस चर को अपने कार्यों के लिए पारित करने के बजाय, वैश्विक चर के रूप में क्यों लागू किया, यदि आवश्यक हो। हमारे पास ऐसा करने का अच्छा कारण है, बाद में आप समझ जाएंगे।

कार्य: प्रत्येक चर के लिए स्वयं की वस्तु

हमारे पास क्लास Dep की एक ही वस्तु है। क्या होगा यदि हमें अपने प्रत्येक वैरिएबल की अपनी Dep क्लास ऑब्जेक्ट की आवश्यकता हो? इससे पहले कि हम जारी रखें, हम डेटा को ऑब्जेक्ट के गुणों के साथ काम करते हैं:

 let data = { price: 5, quantity: 2 }

एक पल के लिए कल्पना करें कि हमारे प्रत्येक गुण ( price और quantity ) का अपना आंतरिक Dep क्लास ऑब्जेक्ट है।

मूल्य और मात्रा गुण

अब हम watcher फ़ंक्शन को इस तरह से कॉल कर सकते हैं:

 watcher(() => {   total = data.price * data.quantity })

चूंकि हम data.price प्रॉपर्टी के मूल्य के साथ यहां काम कर रहे हैं, इसलिए हमें अपने सब्सक्राइबर ऐरे ( dep.depend() को कॉल करके) में एक अनाम फ़ंक्शन ( target में संग्रहीत) को रखने के लिए price प्रॉपर्टी के data.price क्लास ऑब्जेक्ट की आवश्यकता है। इसके अलावा, चूंकि हम data.quantity साथ काम कर रहे हैं data.quantity , हमें अपने सब्सक्राइबर एरे में एक गुमनाम फंक्शन (फिर से, target में स्टोर किया हुआ) रखने के लिए data.quantity ऑब्जेक्ट की आवश्यकता है।

यदि आप इसे चित्र के रूप में चित्रित करते हैं, तो आपको निम्नलिखित मिलते हैं।

विभिन्न गुणों के अनुरूप डिप क्लास ऑब्जेक्ट्स के सब्सक्राइबर सरणियों में कार्य होते हैं

यदि हमारे पास एक और अनाम फ़ंक्शन है जिसमें हम केवल data.price संपत्ति के साथ काम करते हैं, तो संबंधित अनाम फ़ंक्शन को केवल इस संपत्ति के ऑब्जेक्ट के डिपो में जाना चाहिए।

अतिरिक्त पर्यवेक्षकों को उपलब्ध गुणों में से केवल एक में जोड़ा जा सकता है।

price संपत्ति में परिवर्तन के लिए सदस्यता लिए गए कार्यों के लिए आपको dep.notify() को कॉल करने की आवश्यकता कब हो सकती है? price बदलते समय इसकी जरूरत होगी। इसका मतलब है कि जब हमारा उदाहरण पूरी तरह से तैयार है, तो निम्न कोड हमारे लिए काम करना चाहिए।

यहां, कीमत बदलते समय, आपको मूल्य बदलने के लिए सब्सक्राइब किए गए सभी कार्यों के लिए dep.notify () को कॉल करना होगा

इस तरह से काम करने के लिए सब कुछ के लिए, हमें संपत्ति के उपयोग की घटनाओं (हमारे मामले में, यह price या quantity ) को बाधित करने के लिए किसी तरह की आवश्यकता है। यह तब होता है, जब ऐसा होता है, target फ़ंक्शन को ग्राहकों की एक सरणी में सहेजने के लिए, और जब इसी चर को बदलता है, तो इस सरणी में संग्रहीत फ़ंक्शन को निष्पादित करने के लिए।

TySolution: Object.defineProperty ()

अब हमें मानक ES5 विधि Object.defineProperty () के साथ परिचित होने की आवश्यकता है । यह आपको ऑब्जेक्ट्स के गुणों के लिए गेटर्स असाइन करने और सेट करने की अनुमति देता है। मुझे अनुमति दें, इससे पहले कि हम एक सरल उदाहरण के साथ इन तंत्रों के संचालन को प्रदर्शित करने के लिए, उनके व्यावहारिक उपयोग के लिए आगे बढ़ें।

 let data = { price: 5, quantity: 2 } Object.defineProperty(data, 'price', { //       price   get() { //        console.log(`I was accessed`)   },   set(newVal) { //        console.log(`I was changed`)   } }) data.price //       data.price = 20 //

यदि आप इस कोड को ब्राउज़र कंसोल में चलाते हैं, तो यह निम्न पाठ प्रदर्शित करेगा।

गेटटर और सेटर परिणाम

जैसा कि आप देख सकते हैं, हमारा उदाहरण केवल टेक्स्ट की कुछ पंक्तियों को कंसोल में प्रिंट करता है। हालांकि, यह मूल्यों को नहीं पढ़ता है या सेट नहीं करता है, क्योंकि हमने गेटर्स और सेटर्स की मानक कार्यक्षमता को फिर से परिभाषित किया है। हम इन विधियों की कार्यक्षमता को पुनर्स्थापित करेंगे। अर्थात्, यह उम्मीद की जाती है कि गेटर्स संबंधित विधियों के मूल्यों को लौटा दें, और सेटर्स उन्हें सेट करते हैं। इसलिए, हम कोड में एक नया चर, internalValue जोड़ेंगे, जिसका उपयोग हम वर्तमान price मूल्य को संग्रहीत करने के लिए करेंगे।

 let data = { price: 5, quantity: 2 } let internalValue = data.price //   Object.defineProperty(data, 'price', { //       price   get() { //        console.log(`Getting price: ${internalValue}`)       return internalValue   },   set(newVal) {       console.log(`Setting price to: ${newVal}`)       internalValue = newVal   } }) total = data.price * data.quantity //       data.price = 20 //

अब जब कि गेट्टर और सेटर काम करते हैं, तो उन्हें क्या करना चाहिए, आपको क्या लगता है कि यह कोड निष्पादित होने पर क्या कंसोल में मिलेगा? निम्नलिखित आकृति पर एक नज़र डालें।

कंसोल के लिए डेटा आउटपुट

इसलिए, अब हमारे पास एक ऐसा तंत्र है जो आपको संपत्ति के मूल्यों को पढ़ते समय और नए मूल्यों को लिखे जाने पर सूचनाएं प्राप्त करने की अनुमति देता है। अब, कोड को थोड़ा सा दोबारा काम करने पर, हम data ऑब्जेक्ट के सभी गुणों के साथ गेटर्स और सेटर्स को लैस कर सकते हैं। यहां हम Object.keys() पद्धति का उपयोग करेंगे, जो उस पास की गई ऑब्जेक्ट की कुंजियों की एक सरणी देता है।

 let data = { price: 5, quantity: 2 } Object.keys(data).forEach(key => { //        data   let internalValue = data[key]   Object.defineProperty(data, key, {       get() {           console.log(`Getting ${key}: ${internalValue}`)           return internalValue       },       set(newVal) {           console.log(`Setting ${key} to: ${newVal}`)           internalValue = newVal       }   }) }) let total = data.price * data.quantity data.price = 20

अब data ऑब्जेक्ट के सभी गुणों में गेटर्स और सेटर हैं। यह इस कोड को चलाने के बाद कंसोल में दिखाई देता है।

कंसोल के लिए डेटा आउटपुट गेटर्स और सेटर द्वारा

रिएक्टिविटी सिस्टम असेंबली

जब total = data.price * data.quantity जैसे कोड के टुकड़े total = data.price * data.quantity किया total = data.price * data.quantity और इसे price संपत्ति का price है, तो हमें संबंधित अनाम फ़ंक्शन (हमारे मामले में target ) को "याद रखने" के लिए price संपत्ति की आवश्यकता होती है। नतीजतन, यदि price संपत्ति को बदल दिया जाता है, अर्थात, एक नए मूल्य पर सेट किया जाता है, तो यह इस फ़ंक्शन को उसके द्वारा किए गए कार्यों को दोहराने के लिए कॉल करेगा, क्योंकि यह जानता है कि कोड की एक निश्चित रेखा इस पर निर्भर करती है। नतीजतन, गेटर्स और सेटर में किए गए संचालन की कल्पना इस प्रकार की जा सकती है:

गेट्टर - आपको अनाम फ़ंक्शन को याद रखने की आवश्यकता है, जिसे हम मूल्य बदलने पर फिर से कॉल करेंगे।
सेटर - संग्रहीत बेनामी फ़ंक्शन को निष्पादित करना आवश्यक है, जिसके परिणामस्वरूप संबंधित मूल्य में बदलाव होगा।

यदि आप इस विवरण में पहले से ज्ञात Dep क्लास का उपयोग करते हैं, तो आपको निम्नलिखित मिलेगा:

प्रॉपर्टी वैल्यू को dep.depend() , dep.depend() को वर्तमान target फ़ंक्शन को बचाने के लिए कहा जाता है।
जब एक संपत्ति के लिए एक मूल्य लिखा जाता है, तो dep.notify() को सभी संग्रहीत कार्यों को पुनरारंभ करने के लिए कहा जाता है।

अब हम इन दो विचारों को जोड़ेंगे और अंत में, हम उस कोड पर आएंगे जो हमें अपना लक्ष्य प्राप्त करने की अनुमति देता है।

 let data = { price: 5, quantity: 2 } let target = null //  -    ,     class Dep {   constructor () {       this.subscribers = []   }   depend () {       if (target && !this.subscribers.includes(target)){           this.subscribers.push(target)       }   }   notify () {       this.subscribers.forEach(sub => sub())   } } //      ,  //      Object.keys(data).forEach(key => {   let internalValue = data[key]   //         //   Dep   const dep = new Dep()   Object.defineProperty(data, key, {       get() {           dep.depend() //    target           return internalValue       },       set(newVal) {           internalValue = newVal           dep.notify() //           }   }) }) //   watcher   dep.depend(), //        function watcher(myFunc){   target = myFunc   target()   target = null } watcher(() => {   data.total = data.price * data.quantity })

ब्राउज़र कंसोल में इस कोड के साथ प्रयोग करते हैं।

तैयार कोड प्रयोग

जैसा कि आप देख सकते हैं, यह ठीक वैसे ही काम करता है जैसा हमें चाहिए! price और quantity गुण प्रतिक्रियाशील हो गए हैं! price या quantity परिवर्तन को बार-बार निष्पादित करने पर total उत्पन्न करने के लिए जिम्मेदार सभी कोड।

अब, जब हमने अपनी प्रतिक्रिया प्रणाली लिखी है, तो Vue प्रलेखन से यह चित्रण आपको परिचित और समझ में आने लगेगा।

Vue प्रतिक्रियाशीलता प्रणाली

यह सुंदर बैंगनी सर्कल देखें जो कहता है कि गेटर्स और सेटर से युक्त है? अब वह आपसे परिचित होना चाहिए। घटक के प्रत्येक उदाहरण में पर्यवेक्षक विधि (नीला वृत्त) का एक उदाहरण है, जो गेटर्स (लाल रेखा) पर निर्भरता एकत्र करता है। जब, बाद में, सेटर कहा जाता है, यह पर्यवेक्षक विधि को सूचित करता है, जो घटक के पुन: प्रतिपादन की ओर जाता है। यहाँ एक ही योजना है, बशर्ते कि इसे हमारे विकास से जोड़ा जाए।

स्पष्टीकरण के साथ Vue प्रतिक्रियाशीलता आरेख

हम मानते हैं कि अब, जब हमने अपनी प्रतिक्रिया प्रणाली लिखी है, तो इस योजना को अतिरिक्त स्पष्टीकरण की आवश्यकता नहीं है।

बेशक, Vue में, यह सब अधिक जटिल है, लेकिन अब आपको तंत्र को अंतर्निहित प्रतिक्रिया प्रणालियों को समझना चाहिए।

परिणाम

इस सामग्री को पढ़ने के बाद, आपने निम्नलिखित सीखा:

एक depend विधि का उपयोग करके कार्यों को एकत्र करने वाला एक Dep क्लास कैसे बनाएं, और यदि आवश्यक हो, तो उन्हें फिर से notify विधि का उपयोग करके कॉल करें।
एक watcher फ़ंक्शन कैसे बनाएं जो आपको हमारे द्वारा चलाए जाने वाले कोड (यह target फ़ंक्शन है) को नियंत्रित करने की अनुमति देता है, जिसे आपको Dep क्लास के ऑब्जेक्ट में सहेजने की आवश्यकता हो सकती है।
Object.defineProperty() और Object.defineProperty() बनाने के लिए Object.defineProperty() विधि का उपयोग कैसे करें।

यह सब, एक एकल उदाहरण में संकलित, शुद्ध जावास्क्रिप्ट में एक जवाबदेही प्रणाली के निर्माण के लिए नेतृत्व करता है, जिसे समझकर आप आधुनिक वेब फ्रेमवर्क में उपयोग की जाने वाली ऐसी प्रणालियों के कामकाज की सुविधाओं को समझ सकते हैं।

प्रिय पाठकों! यदि, इस सामग्री को पढ़ने से पहले, आपने प्रतिक्रिया प्रणाली के तंत्र की विशेषताओं की खराब कल्पना की, तो मुझे बताएं, क्या अब आप उनसे निपटने में कामयाब रहे हैं?

जावास्क्रिप्ट प्रतिक्रियाशीलता: एक सरल और सहज उदाहरण