जावास्क्रिप्ट डेकोरेटर कैसे बनाएं और ऑटो-एक्सेसर्स का उपयोग कैसे आपके डेवलपर अनुभव को बेहतर बनाने में मदद करता है, इसका एक पूर्वाभ्यास।

विषयसूची

• संदर्भ और विशिष्टता
• प्रस्तावना
• ऑटो-एक्सेसर्स
• सज्जाकार बनाना
  • एक साधारण डेकोरेटर
  • डेकोरेटर्स के साथ सत्यापन
  • डेकोरेटर विकल्प
• मेटाडेटा

संदर्भ और विशिष्टता

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

प्रस्तावना

प्रत्येक कोड नमूना एक इंटरैक्टिव बैबल आरईपीएल खेल के मैदान के लिंक के साथ आएगा, ताकि आप पॉलीफिल स्थापित करने या रेपो को स्पिन करने की आवश्यकता के बिना इसे अपने लिए आज़मा सकें। ऊपर बाईं ओर (सेटिंग्स के अंतर्गत) "मूल्यांकन" विकल्प को मेरे सभी उदाहरणों में जांचा जाना चाहिए, जिसका अर्थ है कि आप कोड देख पाएंगे, इसे संपादित कर पाएंगे, अपने ब्राउज़र का डेव कंसोल खोल पाएंगे और वहां लॉग/परिणाम देख पाएंगे।

आपको बैबल आरईपीएल के दाईं ओर ट्रांसपिल्ड कोड पर ध्यान देने की आवश्यकता नहीं है, जब तक कि आप डेकोरेटर्स के लिए पॉलीफ़िल में खुदाई नहीं करना चाहते। बैबल आरईपीएल के बाईं ओर वह जगह है जहां आप अपने लिए प्रयास करने के लिए कोड को संपादित और लिख सकते हैं।

ज़ोर देने के लिए, आपके डेवलपर टूल के कंसोल को कंसोल लॉग दिखाना चाहिए। यदि ऐसा नहीं होता है, तो सुनिश्चित करें कि मूल्यांकन ऊपर बाईं ओर चेक किया गया है।

ऑटो-एक्सेसर्स

डेकोरेटर्स स्पेक की एक महत्वपूर्ण विशेषता ऑटो-एक्सेसर्स हैं। हम यह सीखकर शुरुआत करेंगे कि वे क्या हैं और ऑटो-एक्सेसर का उपयोग करने से डेकोरेटर लिखना कैसे आसान हो जाएगा।

डेकोरेटर्स प्रस्ताव यहां ऑटो-एक्सेसर की रूपरेखा प्रस्तुत करता है। लेकिन अंततः यह एक साधारण विशेषता है; आइए एक बुनियादी कामकाजी उदाहरण देखें: बैबल आरईपीएल।

class MyClass {
  accessor myBoolean = false
}

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

(ध्यान दें कि आप स्टैटिक का उपयोग ऑटो-एक्सेसर्स के साथ भी कर सकते हैं, जैसे स्टैटिक एक्सेसर myBoolean = false)

सज्जाकार बनाना

यह बेहतर ढंग से समझने के लिए कि हम ऑटो-एक्सेसर का उपयोग क्यों कर रहे हैं, आइए कुछ डेकोरेटर बनाएं।

एक साधारण डेकोरेटर

सिंटैक्स का अंदाजा लगाने के लिए हम ऑटो-एक्सेसर्स को एक डेकोरेटर के साथ जोड़कर शुरुआत करेंगे जो वास्तव में बहुत कुछ नहीं करता है।

यहां एक कार्यात्मक डेकोरेटर है जो एक आंतरिक चर रखता है, और आपको कक्षा पर संपत्ति के माध्यम से उस चर को प्राप्त करने और सेट करने की अनुमति देता है: बैबल आरईपीएल

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

यह डेकोरेटर दो तरीकों से एक ऑब्जेक्ट लौटाता है: get() और set()। इस प्रकार एक ऑटो-एक्सेसर के लिए डेकोरेटर एक संपत्ति के लिए सेटर और गेटर दोनों को एक ही स्थान पर "सजा सकता है" या लपेट सकता है; हमें सिंपलगेटरडेकोरेटर और सिंपलसेटरडेकोरेटर बनाने की जरूरत नहीं है। इसके बजाय, हमने उन्हें ऑटो-एक्सेसर्स के साथ एक ही परिभाषा में जोड़ दिया है, जो आसान है।

अंत में, यह अब तक का एक बिल्कुल सामान्य कार्य जैसा दिखता है - जो एक परिचय के लिए बहुत अच्छा है!

डेकोरेटर्स के साथ सत्यापन

बाकी लेख के लिए हमें तैयार करने के लिए, आइए अपने डेकोरेटर को अपडेट करें ताकि यह वास्तव में किसी प्रकार का सत्यापन कर सके। हम एक ऐसा डेकोरेटर बनाएंगे जो आपको केवल सम संख्याएँ सेट करने की अनुमति देगा और कुछ नहीं। यह इस प्रकार दिखेगा: बेबेल आरईपीएल

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

इसलिए हम सेट() विधि में तर्क जोड़ते हैं और अब जो कोई भी हमारी कक्षा पर myEvenNumber प्रॉपर्टी सेट करने का प्रयास करेगा वह उस सत्यापन तर्क से गुजरेगा। अच्छा।

डेकोरेटर विकल्प

अब हमारे पास एक अच्छा ओनली-ईवन डेकोरेटर है, आइए इसे सम और विषम दोनों संख्याओं को संभालने वाला बनाएं और यह कॉन्फ़िगर करने का विकल्प भी दें कि हम किस प्रकार की संख्या चाहते हैं!

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

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

अब हमने अपने डेकोरेटर को मनमाने विकल्प लेने के लिए कॉन्फ़िगर किया है, जो हमारे डेकोरेटर के उपयोगकर्ताओं को इसके व्यवहार को अनुकूलित करने की अनुमति देता है। वाह।

मेटाडाटा

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

सीखना जारी रखें

एक ही संपत्ति में डेकोरेटर कैसे बनाएं (या एकाधिक लागू करें) सीखने के लिए श्रृंखला में अगली पोस्ट जारी रखें!