जावास्क्रिप्ट मॉड्यूल डेकोरेटर पैटर्न: व्यवहार वृद्धि

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

मॉड्यूल डेकोरेटर क्या हैं?

एक मॉड्यूल डेकोरेटर एक ऐसा फ़ंक्शन है जो एक मॉड्यूल (आमतौर पर एक फ़ंक्शन या एक क्लास) को इनपुट के रूप में लेता है और उस मॉड्यूल का एक संशोधित संस्करण लौटाता है। डेकोरेटर स्रोत कोड को सीधे बदले बिना मूल मॉड्यूल के व्यवहार को जोड़ता या संशोधित करता है। यह ओपन/क्लोज्ड सिद्धांत का पालन करता है, जो बताता है कि सॉफ़्टवेयर संस्थाएँ (कक्षाएँ, मॉड्यूल, फ़ंक्शन, आदि) विस्तार के लिए खुली होनी चाहिए लेकिन संशोधन के लिए बंद होनी चाहिए।

इसे पिज्जा में अतिरिक्त टॉपिंग जोड़ने जैसा सोचें। बेस पिज्जा (मूल मॉड्यूल) वही रहता है, लेकिन आपने इसे अतिरिक्त स्वादों और सुविधाओं (डेकोरेटर के अतिरिक्त) के साथ बढ़ाया है।

मॉड्यूल डेकोरेटर का उपयोग करने के लाभ

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

मुख्य अवधारणाएँ और कार्यान्वयन

अपने मूल में, एक मॉड्यूल डेकोरेटर एक उच्च-क्रम फ़ंक्शन है। यह एक फ़ंक्शन (या क्लास) को एक तर्क के रूप में लेता है और एक नया, संशोधित फ़ंक्शन (या क्लास) लौटाता है। कुंजी यह समझना है कि मूल फ़ंक्शन में हेरफेर कैसे करें और वांछित व्यवहार कैसे जोड़ें।

बेसिक डेकोरेटर उदाहरण (फ़ंक्शन डेकोरेटर)

आइए किसी फ़ंक्शन को उसके निष्पादन समय को लॉग करने के लिए सजाने का एक सरल उदाहरण देखें:

            function timingDecorator(func) {
  return function(...args) {
    const start = performance.now();
    const result = func.apply(this, args);
    const end = performance.now();
    console.log(`Function ${func.name} took ${end - start}ms`);
    return result;
  };
}

function myExpensiveFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

const decoratedFunction = timingDecorator(myExpensiveFunction);

console.log(decoratedFunction(100000));

            

              
                Copy
              
            
          

इस उदाहरण में, timingDecorator डेकोरेटर फ़ंक्शन है। यह इनपुट के रूप में myExpensiveFunction लेता है और एक नया फ़ंक्शन लौटाता है जो मूल फ़ंक्शन को लपेटता है। यह नया फ़ंक्शन निष्पादन समय को मापता है और इसे कंसोल में लॉग करता है।

क्लास डेकोरेटर (ईएस डेकोरेटर प्रस्ताव)

ECMAScript डेकोरेटर प्रस्ताव (वर्तमान में स्टेज 3 में) क्लास और क्लास सदस्यों को सजाने के लिए एक अधिक सुरुचिपूर्ण सिंटैक्स पेश करता है। जबकि अभी तक सभी जावास्क्रिप्ट वातावरण में पूरी तरह से मानकीकृत नहीं है, यह गति प्राप्त कर रहा है और बैबेल और टाइपस्क्रिप्ट जैसे उपकरणों द्वारा समर्थित है।

यहां एक क्लास डेकोरेटर का एक उदाहरण दिया गया है:

            // Requires a transpiler like Babel with the decorators plugin

function LogClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Creating a new instance of ${constructor.name}`);
    }
  };
}

@LogClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("Alice");
instance.greet();

            

              
                Copy
              
            
          

इस मामले में, @LogClass एक डेकोरेटर है जो, जब MyClass पर लागू किया जाता है, तो क्लास का एक नया उदाहरण बनाए जाने पर एक संदेश लॉग करने के लिए इसके कंस्ट्रक्टर को बढ़ाता है।

विधि डेकोरेटर (ईएस डेकोरेटर प्रस्ताव)

आप एक क्लास के भीतर व्यक्तिगत विधियों को भी सजा सकते हैं:

            // Requires a transpiler like Babel with the decorators plugin

function LogMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling method ${propertyKey} with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class MyClass {
  constructor(name) {
    this.name = name;
  }

  @LogMethod
  add(a, b) {
    return a + b;
  }
}

const instance = new MyClass("Bob");
instance.add(5, 3);

            

              
                Copy
              
            
          

यहाँ, @LogMethod add विधि को सजाता है, विधि को पारित तर्कों और उसके द्वारा लौटाए गए मान को लॉग करता है।

सामान्य मॉड्यूल डेकोरेटर पैटर्न

मॉड्यूल डेकोरेटर का उपयोग विभिन्न डिज़ाइन पैटर्न को लागू करने और अपने मॉड्यूल में क्रॉस-कटिंग चिंताओं को जोड़ने के लिए किया जा सकता है। यहां कुछ सामान्य उदाहरण दिए गए हैं:

1. लॉगिंग डेकोरेटर

जैसा कि पिछले उदाहरणों में दिखाया गया है, लॉगिंग डेकोरेटर मॉड्यूल में लॉगिंग कार्यक्षमता जोड़ते हैं, जो उनके व्यवहार और प्रदर्शन में अंतर्दृष्टि प्रदान करते हैं। यह डिबगिंग और एप्लिकेशन की निगरानी के लिए अत्यंत उपयोगी है।

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

2. कैशिंग डेकोरेटर

कैशिंग डेकोरेटर महंगी फ़ंक्शन कॉल के परिणामों को कैश करते हैं, बार-बार एक ही मानों की पुन: गणना करने की आवश्यकता को कम करके प्रदर्शन में सुधार करते हैं।

            function cacheDecorator(func) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("Fetching from cache");
      return cache.get(key);
    }

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log("Performing expensive calculation");
  // Simulate a time-consuming operation
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

const cachedCalculation = cacheDecorator(expensiveCalculation);

console.log(cachedCalculation(1000));
console.log(cachedCalculation(1000)); // Fetches from cache

            

              
                Copy
              
            
          

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

3. प्रमाणीकरण डेकोरेटर

प्रमाणीकरण डेकोरेटर उपयोगकर्ता प्रमाणीकरण स्थिति के आधार पर कुछ मॉड्यूल या फ़ंक्शन तक पहुंच को प्रतिबंधित करते हैं। यह आपके एप्लिकेशन को सुरक्षित करने और अनधिकृत पहुंच को रोकने में मदद करता है।

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Replace with your authentication logic
      return func.apply(this, args);
    } else {
      console.log("Authentication required");
      return null; // Or throw an error
    }
  };
}

function isAuthenticated() {
  // Replace with your actual authentication check
  return true; // For demonstration purposes
}

function sensitiveOperation() {
  console.log("Performing sensitive operation");
}

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

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

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

सत्यापन डेकोरेटर निष्पादन से पहले एक फ़ंक्शन के इनपुट मापदंडों को मान्य करते हैं, डेटा अखंडता सुनिश्चित करते हैं और त्रुटियों को रोकते हैं।

            function validationDecorator(validator) {
  return function(func) {
    return function(...args) {
      const validationResult = validator(args);
      if (validationResult.isValid) {
        return func.apply(this, args);
      } else {
        console.error("Validation failed:", validationResult.errorMessage);
        throw new Error(validationResult.errorMessage);
      }
    };
  };
}

function createUserValidator(args) {
  const [username, email] = args;
  if (!username) {
    return { isValid: false, errorMessage: "Username is required" };
  }
  if (!email.includes("@")) {
    return { isValid: false, errorMessage: "Invalid email format" };
  }
  return { isValid: true };
}

function createUser(username, email) {
  console.log(`Creating user with username: ${username} and email: ${email}`);
}

const validatedCreateUser = validationDecorator(createUserValidator)(createUser);

validatedCreateUser("john.doe", "john.doe@example.com");
validatedCreateUser("jane", "invalid-email");

            

              
                Copy
              
            
          

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

5. पुन: प्रयास डेकोरेटर

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

            function retryDecorator(maxRetries) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

async function fetchData() {
  // Simulate a function that might fail
  if (Math.random() < 0.5) {
    throw new Error("Failed to fetch data");
  }
  return "Data fetched successfully!";
}

const retryFetchData = retryDecorator(3)(fetchData);

retryFetchData()
  .then(data => console.log(data))
  .catch(error => console.error("Final error:", error));

            

              
                Copy
              
            
          

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

उन्नत तकनीकें

डेकोरेटरों का संयोजन

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

            //Requires transpilation (Babel/Typescript)
function ReadOnly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

function Trace(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`TRACE: Calling ${name} with arguments: ${args}`);
        const result = original.apply(this, args);
        console.log(`TRACE: ${name} returned: ${result}`);
        return result;
    };
    return descriptor;
}

class Calculator {
    constructor(value) {
        this.value = value;
    }

    @Trace
    add(amount) {
        this.value += amount;
        return this.value;
    }

    @ReadOnly
    @Trace
    getValue() {
        return this.value;
    }
}

const calc = new Calculator(10);
calc.add(5); // Output will include TRACE messages
console.log(calc.getValue()); // Output will include TRACE messages

try{
    calc.getValue = function(){ return "hacked!"; }
} catch(e){
    console.log("Cannot overwrite ReadOnly property");
}

            

              
                Copy
              
            
          

डेकोरेटर फैक्ट्रियाँ

एक डेकोरेटर फ़ैक्टरी एक फ़ंक्शन है जो एक डेकोरेटर लौटाता है। यह आपको अपने डेकोरेटर को पैरामीट्रिक करने और उनकी विशिष्ट आवश्यकताओं के आधार पर उनके व्यवहार को कॉन्फ़िगर करने की अनुमति देता है।

            function retryDecoratorFactory(maxRetries, delay) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Attempt ${retries + 1} failed:`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      throw new Error(`Function failed after ${maxRetries} retries`);
    };
  };
}

// Use the factory to create a retry decorator with specific parameters
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

विचार और सर्वोत्तम अभ्यास

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

वास्तविक दुनिया के उदाहरण

मॉड्यूल डेकोरेटर को वास्तविक दुनिया के विभिन्न परिदृश्यों में लागू किया जा सकता है, जिनमें शामिल हैं:

• फ्रेमवर्क और लाइब्रेरी: कई आधुनिक जावास्क्रिप्ट फ्रेमवर्क और लाइब्रेरी निर्भरता इंजेक्शन, रूटिंग और स्टेट मैनेजमेंट जैसी सुविधाएँ प्रदान करने के लिए व्यापक रूप से डेकोरेटर का उपयोग करते हैं। उदाहरण के लिए, एंगुलर, डेकोरेटर पर बहुत अधिक निर्भर करता है।
• एपीआई क्लाइंट: लॉगिंग, कैशिंग और प्रमाणीकरण को एपीआई क्लाइंट फ़ंक्शन में जोड़ने के लिए डेकोरेटर का उपयोग किया जा सकता है।
• डेटा सत्यापन: डेटा को डेटाबेस में सहेजने या API पर भेजे जाने से पहले उसे मान्य करने के लिए डेकोरेटर का उपयोग किया जा सकता है।
• इवेंट हैंडलिंग: इवेंट हैंडलिंग लॉजिक को सरल बनाने के लिए डेकोरेटर का उपयोग किया जा सकता है।

निष्कर्ष

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