लगभग हर जावास्क्रिप्ट यूआई लाइब्रेरी &/| मैंने देखा है कि फ्रेमवर्क में कुछ प्रकार के जीवनचक्र हुक होते हैं: ऑनमाउंट, विलमाउंट, बिफोरमाउंट, आफ्टरमाउंट, ऑनअनमाउंट, ऑनव्हाटएवर।

क्या आपको सचमुच उनकी आवश्यकता है? क्या वे अच्छे हैं या बुरे? क्या इसके बिना जीना संभव है?

तो, सबसे पहले ये अस्तित्व में क्यों हैं?

  const oninit = (e: Element) => {
    e.style.prop = value;
    e.addEventListener('mouseover', handler);
    e.setAttribute('data-key', value);
  }

यह विशिष्ट (उबाऊ) इनिशियलाइज़ेशन बॉयलरप्लेट है जिसके साथ वेब के कई घटक आते हैं और उपयोग करते हैं। HTML और CSS की घोषणात्मक प्रकृति का उद्देश्य इन्हें निरर्थक बनाना है, कुछ समय को छोड़कर कुछ कार्यक्षमता को इच्छित मानों के साथ पूर्व निर्धारित करना असंभव नहीं तो कठिन है (disabled='${()=>false}' के बारे में सोचें, जो न केवल जैसा कोई अपेक्षा करेगा वैसा व्यवहार करें)।

तो हम क्या करें? हमारे पास जो कुछ भी बचा है उसे init हैंडलर में सेट करना अनिवार्य है। यह काम करता है और दुनिया आगे बढ़ सकती है।

हालांकि, इस दृष्टिकोण के साथ एक महत्वपूर्ण मुद्दा है। यदि कुछ गलत होता है, तो यह गारंटी देना कठिन है कि इवेंट श्रोता और अन्य चीजें ठीक से साफ हो जाएंगी। दिया गया ढांचा निश्चित रूप से किसी भी ऑनमाउंट हुक को उजागर कर सकता है, लेकिन यदि एप्लिकेशन लॉजिक में कोई त्रुटि है तो आपके पास एक बग है, या सबसे खराब, एक मेमोरी लीक है।

अनिवार्य प्रोग्रामिंग एक दुर्भाग्यपूर्ण प्रोग्रामिंग प्रतिमान है जो पूरी तरह से इन स्थितियों से अवगत है। आप सामान तोड़ने सहित लगभग सब कुछ कर सकते हैं।

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

rimmel.js HTML के एक संकल्पनात्मक सुपरसेट का एक संदर्भ कार्यान्वयन है जिसे रिएक्टिव मार्कअप कहा जाता है, जो जावास्क्रिप्ट के लिए टाइपस्क्रिप्ट की तरह काम करता है, लेकिन इसका उद्देश्य HTML और DOM को कार्यात्मक/कार्यात्मक-प्रतिक्रियाशील बनाना है।

यह हर चीज को एक धारा के रूप में मानकर हासिल किया जाता है: शैली? यह एक धारा है. DOM इवेंट? निःसंदेह वे धाराएँ हैं। HTML विशेषताएँ? धाराएँ भी. जब भी वे कोई मान उत्सर्जित करते हैं, तो वह सेट हो जाता है।

आइए देखें यह कैसे काम करता है।

  const style = CreateStream({color: 'red'});
  const key = CreateStream('red', value);
  const handler = CreateStream();

  const template = rml`
    

    
  `;

क्रिएटस्ट्रीम सिर्फ एक काल्पनिक स्ट्रीम निर्माण उपयोगिता है। आमतौर पर आप प्रॉमिस, ऑब्जर्वेबल्स आरएक्सजेएस स्ट्रीम का सामान्य रूप से अधिक उपयोग करना चाहेंगे, क्योंकि वे यूआई इंटरैक्शन को सर्वोत्तम मॉडल करते हैं।

यदि आप कोड को दोबारा जांचते हैं, तो आपको जल्द ही पता चलेगा कि कोई ऑनमाउंट कॉल नहीं है। वास्तव में, इसकी कोई आवश्यकता नहीं है, क्योंकि ऑनमाउंट कॉलबैक पहले जो भी ऑपरेशन कर रहा था, वह अब उन स्ट्रीमों के उत्सर्जित होते ही किया जाएगा।

कोई भी दिया गया ढांचा या यूआई लाइब्रेरी टेम्प्लेट में परिभाषित या बाध्य प्रत्येक स्ट्रीम को अनमाउंट करने का प्रभारी होगा: शैली, डेटा-कुंजी, ऑनमाउसओवर। इससे आपके द्वारा सफ़ाई करना भूलने का कोई जोखिम नहीं है और मेमोरी लीक होने की संभावना काफी हद तक कम हो जाती है।

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

थोड़े विदेशी अनुभव के लिए तैयार हैं? Rimmel.js देखें