Proxy Pattern and Reflect API in JavaScript

Proxy Pattern يعني ايه ؟

انت دلوقتي محتاج مصلحة حكومية معينة , والمصلحة دي عشان تتنفز محتاج حد مهم يتوسطلك عشان تتم . بالظبط هو دا Proxy Pattern

عباره عن وسيط . طيب ناخد مثال برمجي شوية .

عادي Object ودا عبارة عن User عندنا

ولاكن في المثال بتاعنا هنعتبر انة رجل اعمال مهم جدا مينفعش نتعامل معاه من غير واسطة . امم طب احنا عندنا وسطة ؟ = اها طبعا هو في غيرة

Proxy حبيبنا.

طيب دلوقتي احنا محتاجين نعرض البينات بطريقتين مختلفين , مره من غير وسايط ومره بالوسطة بتاعتنا

Direct Object

const user = {
  firstName: "Mostafa",
  lastName: "Mohamed",
  age: 22
};

console.log(user.firstName); // Output Mostafa 
console.log(user.lastName); // Output Mohamed 
console.log(user.age); // Output 22        

user زي ماشوفنا في المثال الي فوق انا كنت محتاج اعرض المعلومات بتاعة

وفعلا البينات اتعرضت بس من غير توضيح رماهم كدا في وشي . 😒 منا معيش واسطه بقا .!!

With Proxy Pattern

const user = {
  firstName: "Mostafa",
  lastName: "Mohamed",
  age: 22
};


const handler = {
  get: (obj, prop) => {
    return `Hey boss🫡, the value of ${prop} is ${obj[prop]}`;
  },
  set: (obj, prop, newValue) => {
    obj[prop] = newValue;
    return true;
  }
};


const proxyUser = new Proxy(user, handler);


console.log(proxyUser.firstName); // Output Hey boss🫡, the value of firstName is Mostafa
console.log(proxyUser.lastName); // Output Hey boss🫡, the value of lastName is Mohamed
console.log(proxyUser.age); // Output Hey boss🫡, the value of age is 22

// Edit info

proxyUser.firstName = "Ahmed";
proxyUser.lastName = "Mohamed";
proxyUser.age = 50;


console.log(proxyUser.firstName); // Output Hey boss🫡, the value of firstName is Ahmed
console.log(proxyUser.lastName); // Output Hey boss🫡, the value of lastName is Mohamed 
console.log(proxyUser.age); // Output Hey boss🫡, the value of age is 50


        

شوف بقا لما استخدمت الواسطة بتاعتي احترمني ازاي؟ 😎 , لا وكمان مجبتش المعلومات بس انا كمان اقدر اعدل عليها بسهوله .

get(obj, prop) => get info

set(obj , prop , newValue) => edit info

Proxy Pattern تمام كدا احنا عرفنا

دا ؟ Reflect ايه بقا موضوع

Methods مجموعه من

بنستخدمها عشان نجيب بينات , نعدل , نمسح وهكذا . زي الفل تعالا بقا نسخدمها في المثال الي عملناه ونشوف الاختلاف.

const user = 
  firstName: "Mostafa",
  lastName: "Mohamed",
  age: 22
};


const handler = {
  get: (obj, prop) => {
    return `Hey boss🫡, the value of ${prop} is ${Reflect.get(obj, prop)}`;
  },
  set: (obj, prop, newValue) => {
    Reflect.set(obj, prop, newValue);
    return true;
  }
};


const proxyUser = new Proxy(user, handler);


console.log(proxyUser.firstName); // Output Hey boss🫡, the value of firstName is Mostafa
console.log(proxyUser.lastName); // Output Hey boss🫡, the value of lastName is Mohamed
console.log(proxyUser.age); // Output Hey boss🫡, the value of age is 22


proxyUser.firstName = "Ahmed";
proxyUser.lastName = "Mohamed";
proxyUser.age = 50;


console.log(proxyUser.firstName); // Output Hey boss🫡, the value of firstName is Ahmed
console.log(proxyUser.lastName); // Output Hey boss🫡, the value of lastName is Mohamed
console.log(proxyUser.age); // Output Hey boss🫡, the value of age is 50        

ممكن من اول نظره تفتكر انه نفس الكود بالظبط ولاكن تعالا اذكرلك الاختلافات.

get method :
previous = obj[prop]
current = Reflect.get(obj, prop) 

set method
previous = obj[prop] = newValue;
current = Reflect.set(obj, prop , newValue);         

Methods كدا زي الفل فهمت قصدي , وممكن تستكشف بقيت

من هنا Reflect

طيب تعالا نقف هنا وقفه كدا ممكن تكون خدت بالك اني قررت جملة واسطة كتير : ودا بكل بساطة Proxy Pattern عشان تفضل في مخك متنسهاش ابدا عشان تعرف تستخدم

في ايه بالتحديد بعد كدا , كوسيط .

Proxy Pattern , Reflect نقطة كمان : انت دلوقتي فهمت

بس بردك مش عارف لسه ممكن تعمل بيهم ايه ! ودا بديهي عشان اكيد دورهم مش مقتصر علي دا. المثال اصلا معمول عشان يفهمك ازاي تستخدمة ومحطة كويسة عشان نبدأ بقا في الأمثله الصح ..

Proxy Pattern . هناخد دلوقتي كام مثال ممكن تستخدم فيه

1) Formatting:

const target = 
  name: "Mostafa Mohamed";
};

const handler = {
  get: (obj, prop, receiver) => {
    if (typeof Reflect.get(obj, prop, receiver) === "string") {
      return Reflect.get(obj, prop, receiver).toUpperCase();
    }
  }
};


const proxy = new Proxy(target, handler);

console.log(proxy.name); // Output: MOSTAFA MOHAMED
        

String Format زي ما انت شايف في الكود الي فوق دا حددت

upper case هيعمله String لو الاسم عباره عن

2) Validation:

const target = {
  value: 42
};


const handler = {
  set: (target, prop, value, receiver) => {
    if (prop === 'value' && typeof value === 'number' && value > 0) {
      return Reflect.set(target, prop, value, receiver);
    }
    throw new Error('Invalid value assignment.');
  }
};

const proxy = new Proxy(target, handler);
proxy.value = 0; // Error: Invalid value assignment.
        

Error في الكود الي فوق دا عشان اقدر اني اغير القيمة وميحصلش

لازم الشرط يتحقق ايه بقا الشرط؟

اني لازم يبقا رقم واكبر من 0 .

Debugging, Caching , notifications etc .. وكمان تقدر تستخدمة فيه حجات تانيه زي

ولاكن انا هكتفي بالأمثله دي عشان اديك فرصة تبحث وتطور من نفسك اكتر ❤️

الخاتمة :

كدا احنا عرفنا معلومات كتير انهارده وشيقة جدا اتمني تكون استمتعت والمقال كان مفيد ليك لو مش عايز تتعامل مباشر مع الكود وعايز يكون فيه وسيط انت عارف هستتخدم ايه..⭐

متنساش انك تساعد في انتشاره : الدال علي الخير كفاعلة .

بس خلي بالك الاستخدام الكبير من غير داعي ممكن يبقا سبب في تأثير علي البرنامج بتاعك بالسالب

أتمني أكون قدرت أفيدك ولو عايز تشوف اكتر وتستفيد أكتر هسبلك كل اللينكات بتاعتي متنساش تتابعني .❤️

youtube channel

Facebook

Telegram Channel