آموزش ویژگی های ECMAScript 6 (جلسه 48) : آموزش Proxy API - قسمت 2

- visibility ۴ mode_comment

همونطور که اطلاع دارید در جلسه قبل مبحث مربوط به Proxy API رو شروع کردیم و توضیحات مقدماتی در مورد اون به شما دادیم. در این جلسه میخوایم کار با Proxy API رو ادامه بدیم و شما رو بیشتر با اون آشنا کنیم.

همونطور که دیدید در جلسه قبل در مورد پروکسی و کاربرد اون توضیحاتی رو قرار دادیم و یک مثال ساده برای کار با اون زدیم و دیدیم که بدون استفاده از دام یا traps، رفتار پروکسی دقیقا مانند رفتار پیش فرض خود شئ می باشد و هر کاری که قبلا با شئ میکردید میتونین با پروکسی نیز انجام بدین.

در این جلسه میخوایم با جزئیات بیشتری وارد بحث پروکسی بشیم و کاربردهای اون رو بهتر متوجه بشیم.

پروکسی با Reflect API که در جلسات قبل در مورد اون توضیح دادیم، رابط بسیار عمیقی دارد و زیاد با هم سروکار دارند. همونطور که یادتون هست Reflect API دارای 13 متد استاتیک بود که با استفاده از اونا کارهای مختلفی رو انجام میدادیم.

زمانی که دام ها رو مشخص میکنید، پروکسی هیچ تغییر رفتاری رو نشون نمیده. در حالت پیش فرض یک پروکسی رو میشه بصورت زیر نوشت:

اینکار در پشت صحنه انجام میشه و با اینکار رفتار پیش فرض شئ رخ میده. کد بالا رابطه بین Proxy و Reflect رو نشون میده.

دام ها یا Trap هایی که درون handler پروکسی قرار میگیرن، 13 عدد هستن و دقیقا همنام با متدهای Reflect API می باشند و با استفاده از اونا میتونین رفتارهای مختلف مربوط به اشیاء و توابع رو تغییر بدین. فرض کنید که شما یک دام یا trap برای get قرار میدید. این متد زمانی که بخواید به هر طریقی به ویژگی های شئ مورد نظر از طریق پروکسی دسترسی داشته باشید، فراخوانی میشه و تغییرات مورد نظر شما رو اعمال میکنه و نتیجه رو برمیگردونه.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 45)

مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید یک function constructor بنام Person قرار دادیم و یک نمونه جدید بنام ali از اون ساختیم و سه ویژگی اون رو مشخص کردیم. در خط 9 یک پروکسی برای شئ ساخته شده ali قرار دادیم و درون handler اون هیچ دامی رو تعریف نکردیم. پس همونطور که قبلا گفتیم، چون دامی تعریف نشده است پس رفتار پروکسی دقیقا همانند با رفتار شئ مورد نظر می باشد و میتونیم از طریق اون به ویژگی های تابع دسترسی داشته باشیم.

خب در 3 خط آخر میخوایم به تعدادی از ویژگی های پروکسی دسترسی پیدا کنیم. همونطور که میبینید روشهای مختلفی رو برای دسترسی به ویژگی های شئ مورد نظر استفاده کردیم. از عملگر . و [] و Reflect.get برای دسترسی به ویژگی های مختلف استفاده کردیم. میبینید که مقادیر برگشتی از هر کدام در مقابل اون دستور و بعد از // نوشته شده است.

همونطور که میبینید زمانی که از p.sample استفاده میکنیم، مقدار undefined برگشت داده میشه. این مورد بخاطر این هست که شئ مورد نظر ویژگی بنام sample رو نداره و بهمین دلیل مقدار undefined رو برمی گردونه. شما میتونین با استفاده از پروکسی کاری کنید که اگر کاربر بخواد به یکی از ویژگی هایی که درون شئ تعریف نشده است، دسترسی پیدا کند، بجای undefined یک مقدار دیگه برگشت بدین و بهش توضیح بدین که چنین ویژگی وجود ندارد.

همچنین شاید بعضی اوقات نیاز داشته باشید که به کاربر اجازه دسترسی به یکی از ویژگی های شئ رو ندید. در این مواقع نیز میتونین با کمک پروکسی این کار رو عملی کنید و اجازه دسترسی به ویژگی خاصی از شئ مورد نظرتون رو ندید.

شروع کار با دام در Proxy

خب همونطور که دیدیم برای دسترسی به ویژگی های شئ مورد نظر از عملگر . و [] و Reflect.get استفاده کردیم. همه این مواردی که قصد دسترسی به ویژگی های شئ رو دارند، باعث فراخوانی دام یا تله یا Trap مربوط به get میشن و تابع مربوط به get فراخوانی میشه. پس ما میتونیم درون پروکسی یک get رو تعریف کنیم و رفتار مورد نظر خودمون رو براش تعریف کنیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که درون ورودی دوم پروکسی که مربوط به handler می باشد، یک دام بنام get تعریف کردیم. متد get سه پارامتر داره که میتونین درون متد از اونا استفاده کنید:

  • target : شئ مورد نظر که پروکسی به اون متصل شده است (در کد بالا همون شئ ali می باشد)
  • prop : مخفف property یا ویژگی می باشد. این مورد نام ویژگی که قصد دسترسی به اون داریم رو مشخص میکنه.
  • receiver : این مورد گیرنده رو مشخص میکنه. اگر کاربر از طریق پروکسی بخواد به ویژگی دسترسی داشته باشه، پروکسی گیرنده میشه و اگر بصورت مستقیم به خود شئ دسترسی داشته باشد، گیرنده شئ مورد نظر می باشد. خیلی زیاد از این مورد استفاده نمیکنیم.

تغییر رفتار دسترسی به ویژگی اشیاء

خب حالا با استفاده از موارد بالا میتونیم درخواستی که برای دریافت ویژگی مورد نظر میشه رو بررسی کرده و مطابق با هر مورد، خروجی مورد نظرمون رو برگشت بدیم. کد زیر رو ببینید:

همونطور که میبینید یک سری if..else درون متد get قرار دادیم و درخواست های ورودی رو بررسی کردیم.

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

در شرط بعدی اگر ویژگی مورد نظر وجود نداشته باشه، بجای برگشت دادن undefined یک متن متناسب برگشت داده میشه.

اگر همه چی اوکی باشه و ویژگی مورد نظر درون شئ تعریف شده باشه، در بقیه موارد مقدار ویژگی برگشت داده خواهد شد.میبینید که در 3 خط آخر همانند کدهای قبل به سه ویژگی از روشهای مختلف دسترسی پیدا کردیم، اما نتیجه همانند قبل نیست و خیلی پیشرفته تر و کاربر پسندتر شده است.

میبینید که چقد راحت میتونیم رفتار دسترسی به ویژگی های یک شئ رو از طریق پروکسی تغییر بدیم. این کارها هیچ تغییری در خود شئ به وجود نمیارن و نتیجه شئ همانند گذشته می باشد.

در جلسه بعد قابلیتهای مفید دیگه ای نیز بهتون توضیح خواهیم داد.

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران

شما خیلی خوب آموزش میدید توضیحات یجوری هست که خیلی راحت میشه متوجه شد
بازم ممنون

محمد اسفندیاری

خواهش میکنم
لطف دارید
موفق باشید

ممنون از آموزش عالی و وب سایت فوق العادتون واقعا میشه گفت برترین مرجع آموزش های زمینه وب هستید

محمد اسفندیاری

موفق باشید دوست عزیز

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.