परिचय

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

उपयोग के मामलों में शामिल हैं:

• लॉग प्रॉपर्टी एक्सेस, डिबगिंग के लिए उपयोगी
• किसी ऑब्जेक्ट के साथ किसी भी इंटरैक्शन को मान्य करें (जैसे कि फॉर्म सत्यापन)
• के लिए सुसंगत स्वरूपण लागू करने में मदद करता है

प्रॉक्सी दो पैरामीटर लेती है:

• लक्ष्य: वह मूल वस्तु कौन सी है जिसे आप प्रॉक्सी करना चाहते हैं
• हैंडलर: एक ऑब्जेक्ट जो उन ऑपरेशंस को परिभाषित करता है जिन्हें आप रोकेंगे और आप उक्त ऑपरेशंस को कैसे फिर से परिभाषित करेंगे

मूल उदाहरण

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return target[prop]   " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

इस उदाहरण में, हम एक प्रॉक्सी को परिभाषित करते हैं। लक्ष्य वस्तु में दो गुण होते हैं। हम एक हैंडलर को परिभाषित करते हैं जो get() हैंडलर का कार्यान्वयन प्रदान करता है। गेट ट्रैप लक्ष्य वस्तु पर किसी भी संपत्ति तक पहुंच को रोकता है, और इसके भीतर, हम आवश्यकतानुसार व्यवहार को संशोधित कर सकते हैं।

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

प्रतिबिंबित होना

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

const target = {
    greeting1: "Hello",
    greeting2: "Good morning"
}

const handler = {
    get(target, prop, receiver) {
        return Reflect.get(...arguments)   " friends!"
    }
}

const proxy = new Proxy(target, handler)

console.log(proxy.greeting1) // Hello friends!
console.log(proxy.greeting2) // Good morning friends!

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

उदाहरण

प्रॉक्सी के साथ हम क्या कर सकते हैं, यह जानने के लिए आइए कुछ उदाहरण बनाएं।

लॉगिंग

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

const target = {
    name: "Damien",
    age: 32,
    status: "WRITING"
}

const loggerHandler = {
    get(target, prop, receiver) {
        if (prop in target) {
            console.log(`[LOG] Accessing property ${prop}. Current value is ${target[prop]}`)
            return Reflect.get(...arguments)
        } else {
            console.error(`[LOG] Error accessing non-existent property ${prop}`)
        }

    },

    set(target, key, value) {
        console.log(`[LOG] Setting property ${key}. New value: ${value}`)
        return Reflect.set(...arguments)
    },

    deleteProperty(target, prop) {
        console.warn(`[LOG] Deleting property: ${prop}`)
        return Reflect.deleteProperty(...arguments)
    }
}

const proxy = new Proxy(target, loggerHandler)

proxy.name // [LOG] Accessing property name. Current value is Damien
proxy.status // [LOG] Accessing property status. Current value is WRITING

proxy.name = "Bob" // [LOG] Setting property name. New value: Bob
proxy.status = "NAPPING" // [LOG] Setting property status. New value: NAPPING

proxy.job = "Developer" // [LOG] Setting property job. New value: Developer

delete proxy.job // [LOG] Deleting property: job

proxy.job // [LOG] Error accessing non-existent property job

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

इनपुट सत्यापन

हमारे दूसरे उदाहरण में, हम फॉर्म डेटा के लिए इनपुट सत्यापन करने के लिए एक प्रॉक्सी का उपयोग करेंगे।

const validationRules = {
    name: value => value.length >= 3 || "Name must be at least 3 characters long",
    age: value => Number.isInteger(value) || "Age must be a number",
    email: value => value.includes('@') || "Enter a valid email"
}

let formData = {
    name: "",
    age: null,
    email: ""
}

const formHandler = {
    set(target, key, value) {
        if (typeof value === "string") {
            value = value.trim()
        }
        const validationResult = validationRules[key](value)
        if (validationResult !== true) {
            console.error(`Validation failed for property ${key}: ${validationResult}`)
            return false;
        }

        return Reflect.set(...arguments)
    }
}

const formProxy = new Proxy(formData, formHandler)

formProxy.age = "32 years old" // Validation failed for property age: Age must be a number
formProxy.name = "Da" // Validation failed for property name: Name must be at least 3 characters long
formProxy.email = "damcoss mail.com" // Validation failed for property email: Enter a valid email

formProxy.age = 32 // OK
formProxy.name = "Damien" // OK
formProxy.email = "[email protected]" // OK

हम यहां एक ऑब्जेक्ट को विभिन्न तरीकों से परिभाषित करते हैं जिसका उपयोग यह सत्यापित करने के लिए किया जाता है कि मान मान्य हैं या नहीं। फिर, हम उसी तर्क का उपयोग करते हैं। हमारे पास हमारा लक्ष्य ऑब्जेक्ट formData है जिसे हम प्रॉक्सी करना चाहते हैं। फॉर्महैंडलर में, हम इनपुट मानों पर हमारे सत्यापन नियमों को लागू करने के लिए set() विधि को फिर से परिभाषित करते हैं।

निष्कर्ष

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

प्रतिक्रियाशील प्रोग्रामिंग, एपीआई रैपर और संपत्ति अवलोकन जैसे उन्नत व्यवहार को सक्षम करने के लिए प्रॉक्सी का उपयोग अक्सर पुस्तकालयों और ढांचे में किया जाता है।

मज़े करो ❤️