الگوی طراحی proxy در جاوا اسکریپت

الگوی طراحی proxy در جاوا اسکریپت نوشته شده در   javascript ۲۱ فروردین , ۱۳۹۸ توسط  عباس حسینی

پروکسی واژه ایست که احتمالا زیاد به آن برخورده اید و در دنیای شبکه به عنوان واسطه ایست بین کاربر و سرور، بطوریکه اگر شما درخواستی از سرور داشته باشید ابتدا آن را به پروکسی ارسال میکنید و پروکسی به سرور مقصد متصل شده و درخواست را پردازش و نتیجه آن را به شما میدهد

در دنیای کد نویسی نیز چنین مفهومی برای الگوی طراحی proxy وجود دارد که در ادامه به آن خواهم پرداخت

تعریف الگوی طراحی proxy در جاوا اسکریپت

پروکسی یک آبجکت نماینده یا جایگزین برای دسترسی به شی اصلی میباشد که به عنوان واسط بین کلاینت و سرویس دهنده عمل میکند

همانطور که در شکل زیر مشاهده میکنید این الگو از سه بخش اصلی تشکیل شده است

الگوی طراحی پروکسی

serviceInterface : یک سری متد که سرویس موردنظر ملزم به پیاده سازی آنهاست

Service : سرویسی که که پروکسی آن رابه عنوان یک ورودی دریافت میکند

Proxy : واسط بین کاربر و شی اصلی که در اینجا منظور از شی اصلی همان سرویس است

همانطور که در شکل مشاهده میکنید پروکسی با دریافت یک سرویس نقش یک واسط بین کلاینت و سرویس دهنده را که اینجا شی اصلی است را بازی میکند و دیگر کلاینت به طور مستقیم به آن شی دسترسی ندارد

نحوه پیاده سازی الگوی طراحی proxy در جاو اسکریپت

برای پیاده سازی این الگو قصد دارم از مثال یک وب سرور استفاده کنم بنابراین برای پیاده سازی آن با الگوی proxy به سه چیز نیاز داریم
ابتدا یک اینترفیس به نام ServiceInterface تعریف میکنیم که شامل دو متد اصلی post و get میباشد


//ServiceInterface
class ServiceInterface {
  constructor (){
    this.requests = []
  }
  get (req){
    this.requests.push(req)
  }
  post (req){
    this.requests.push(req)
  } 
  log(){
    console.log(this.requests)
  }
}

سپس یک سرویس به نام WebService میسازیم که ملزم به پیاده سازی اینترفیس ServiceInterface میباشد


//Service
class WebService extends ServiceInterface{
  
}

و در انتها یک کلاس به نام WebProxy میسازیم که واسط دسترسی کاربر به شی اصلی یا همان سرویس میباشد


//Proxy
class WebProxy {
  constructor (service){
    this.service = service
  }
  get (req){
    this.service.get(req)
  }
  post(req) {
    this.service.post(req)
  }
  
  log(){
    this.service.log()

  }
}

پس از تشکیل سه عضو اصلی این الگو یعنی اینترفیس، سرویس و پروکسی حال میتوانیم از آن استفاده کنیم که نتیجه آن را در ادامه مشاهده میکنید

See the Pen
Javascript Proxy Pattern
by abbas hosseini (@abizebel)
on CodePen.

موارد استفاده از الگوی proxy در جاوا اسکریپت

این الگو زمانی استفاده میشود که بخواهیم از محتویات یک شی محافظت کنیم یا هنگام پیاده سازی lazy initializing
اما یکی از کاربرد های آن در دنیای برنامه نویسی frontend همان متد $proxy جی کوئری میباشد که از تغییر یافتن شی this هنگام صدا زدن event جلوگیری میکند

من کد کوتاه مربوط به آن را در ادامه قرار میدهم که اگر علاقه مند بودید آن را بررسی کنید که با بررسی این کد متوجه میشوید که روش کار متد $proxy در جی کوئری به چه شکلی است


function proxy(fn, context) {
    var proxy = function() {
        return fn.apply(context, [fn, context]);
    };
    return proxy;
}

$('button').click(function() {
    var fn = function() {
        $(this).hide()
    }

    setTimeout(proxy(fn, this), 100)
})

لیست الگوهای طراحی GOF در جاو اسکریپت

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns