مقدمة

في Javascript، يمكّنك الوكلاء من اعتراض عمليات كائن معينة وتخصيصها. يعمل الوكيل كوسيط بين الكائن و"العالم الحقيقي". وبالتالي، يمكنك تحسين العمليات الأساسية للكائن لتنفيذ منطق أكثر تعقيدًا أو إعادة تعريف العمليات الأساسية لتناسب احتياجاتك.

حالات الاستخدام تشمل:

• الوصول إلى خاصية السجل، مفيد لتصحيح الأخطاء
• التحقق من صحة أي تفاعل مع كائن (مثل التحقق من صحة النموذج)
• يساعد في فرض التنسيق المتسق لـ

يأخذ الوكيل معلمتين:

• الهدف: وهو الكائن الأصلي الذي تريد وكيله
• المعالج: كائن يحدد العمليات التي ستعترضها وكيف ستعيد تعريف العمليات المذكورة

مثال أساسي

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(). تعترض مصيدة الحصول الوصول إلى أي خاصية على الكائن الهدف، ومن خلالها يمكننا تعديل السلوك حسب الحاجة.

مع هذا الإعداد، يعني ذلك أنه في كل مرة نقوم فيها بالوصول إلى الخصائص في الكائن الهدف، يعترضه المعالج، ويقوم بتشغيل التعليمات البرمجية التي قمنا بتنفيذها. في حالتنا، يتم فقط أخذ قيمة العقار وإضافة الأصدقاء!.

يعكس

في كثير من الأحيان، يتم استخدام الوكلاء مع Reflect API. يوفر برنامج Reflect طرقًا لها نفس الأسماء مثل مصائد الوكيل. كما يشير اسمه، فهو يعكس دلالات استدعاء الأساليب الداخلية للكائن المقابل.

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!

Reflect ليس مطلوبًا لاستخدام الوكلاء ولكن استخدام Reflect يسمح لنا بالتأكد من تطابق السلوك مع عمليات محرك Javascript الأصلي. كما أنه يضمن التوافق مع التحديثات المستقبلية، ويمنع الآثار الجانبية غير المقصودة ويبسط التعليمات البرمجية. بدونها، سيتعين على المطور إعادة تنفيذ السلوك مثل الوصول إلى الخاصية، والتخصيص، والحذف... والتي يمكن أن تكون عرضة للأخطاء وغير متوافقة مع السلوك الأصلي لجافا سكريبت.

أمثلة

فلنقم ببناء بعض الأمثلة لاستكشاف ما يمكننا فعله باستخدام Proxy.

التسجيل

في المثال الأول، لنفترض أننا نرغب في تسجيل الإجراءات التي تم اتخاذها على كائن ما. عندما نحصل على خاصية أو نقوم بتعيينها أو حذفها، أريد أن تتم طباعتها على وحدة التحكم. قد يكون هذا مفيدًا لأغراض تصحيح الأخطاء.

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

لقد قمنا بتعريف loggerHandler الذي يعيد تعريف 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

نحدد هنا كائنًا بطرق مختلفة تستخدم للتحقق من صحة القيم أم لا. ثم نستخدم نفس المنطق. لدينا نموذج بيانات الكائن المستهدف الذي نريد وكيله. في معالج النموذج، نعيد تعريف طريقة set() لتطبيق قواعد التحقق من الصحة على قيم المدخلات.

خاتمة

تعد الوكلاء، جنبًا إلى جنب مع Reflect API، أدوات مرنة وقوية لاعتراض العمليات على الكائنات وتخصيصها. باستخدامها، يمكنك تحسين السلوك والتحكم فيه ديناميكيًا. باستخدام Reflect API، يمكنك أيضًا التأكد من أن السلوك متوافق مع محرك Javascript.

غالبًا ما يتم استخدام الوكلاء في المكتبات وأطر العمل لتمكين السلوك المتقدم مثل البرمجة التفاعلية ومغلفات API ومراقبة الممتلكات.

استمتعوا ❤️