مروری بر ویژگی های ES6: مفاهیم import و export و کلاس ها

ReactJS | Importing and Exporting

0 131

مفاهیم Import و Export در ری اکت

در ادامه ی بررسی ویژگی های جدید ES6 به مبحث Import و Export در ری اکت می رسیم. ES6 به شما اجازه می دهد که کدهای ماژولار بنویسید؛ یعنی کدهایتان را در چندین فایل مختلف نگهداری کنید. شاید با خودتان بگویید در حال حاضر هم می توانیم کدهای جاوا اسکریپت خود را در چند فایل مختلف قرار دهیم و فقط کافی است که با ترتیب صحیح آن ها را در فایل HTML وارد کنیم.

باید بگویم بحث import و export متفاوت است؛ در نوشتن کدهای ماژولار با این دستورات هدف این است که در خود فایل های جاوا اسکریپت از قسمتی از یک فایل جاوا اسکریپت دیگر استفاده کنیم تا خود فایل های جاوا اسکریپت وابستگی های خود را بدانند.

به طور مثال فرض کنید که یک فایل به نام person.js داشته باشیم که دارای یک شیء به نام person باشد:

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

متاسفانه برخی از این ویژگی های جدید ES6 در مدرن ترین مرورگرها هم پشتیبانی نمی شوند. بنابراین باید با استفاده از یک ابزار خاص (که در جلسات بعدی و پس از اتمام بررسی ES6 توضیح داده می شود) این کدها را تبدیل به کدهای قدیمی کنیم تا در مرورگر اجرا شود.

سوال: چرا از ES6 استفاده می کنیم در حالی که در مرورگرها پشتیبانی نمی شود؟

پاسخ: به سه دلیل اصلی: اولا ES6 قابلیت های بسیار خوبی دارد که قدرت برنامه نویسی ما را بیشتر می کند. با استفاده از این قابلیت ها می توانیم برنامه های بهتری نوشته و کدها را سریع تر بنویسیم. دوما استفاده از آخرین نسخه ی جاوا اسکریپت در react تبدیل به یک استاندارد شده است. بنابراین بهتر است ما هم طبق این استاندارد عمل کنیم. سوما این ویژگی ها در آینده تبدیل به استاندارد خواهند شد فقط کمی زمان لازم دارند. بنابراین بهتر است آن ها را از همین الان یاد بگیریم تا در آینده نیازی به زحمت اضافی نباشد.

مفهوم class

یکی دیگر از ویژگی های جدید ES6 کلاس ها هستند. اگر دوره ی PHP شیء گرای ما را گذرانده باشید می دانید که کلاس ها به زبان ساده نقشه ی کلی برای اشیاء هستند و شکل شماتیک آنها بدین صورت است:

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

کلاس ها می توانند property (خصوصیت) داشته باشند مانند name که برابر با Amir است. همچنین می توانند method داشته باشند که تابعی مثل call خواهد بود. به زبان ساده property ها متغیر هایی هستند که به کلاس تعلق دارند در حالی که method ها توابعی هستند که متعلق به کلاس می باشند.

برای ساخت یک شیء از یک کلاس (نمونه سازی) می توانیم بدین صورت عمل کنیم:

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

به شما پیشنهاد می دهم به دوره ی آموزشی شیء گرایی PHP نگاهی بیندازید. با اینکه syntax در زبان PHP ممکن است متفاوت باشد اما مفاهیم همگی یکی هستند و به این صورت می توانید درک عمیق تری از مبحث کلاس ها به دست بیاورید.

بگذارید یک مثال عملی از این بحث را ببینیم!

نحوه ی صحیح نوشتن property ها در جاوا اسکریپت به این شکل است که آن را در یک تابع از پیش تعریف شده به نام constructor بدهید. متدها نیز تنها با نام متد و مانند توابع عادی نوشته می شوند. به مثال زیر دقت کنید:

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

در کلاس Person ابتدا یک خصوصیت به نام name تعریف کرده ایم. همانطور که گفته شد برای تعریف خصوصیت ها باید از یک تابع constructor به همراه کلیدواژه ی this استفاده کنید. سپس متدی به نام printMyName تعریف کرده ایم که name را نمایش می دهد. this.name یعنی همین name ای که در همین کلاس تعریف شده است.

حالا می توانید یک نمونه (شیء) از این کلاس بسازیم:

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

با اجرای این دستور خروجی Amir نمایش داده می شود.

حالا برای مبحث وراثت می توانیم کلاس دیگری به این شکل تعریف کنیم:

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

اگر از این کلاس خروجی بگیریم مقدار Female نمایش داده می شود. بنابراین می توانید این خصوصیات را در کلاس فرزند تغییر دهید.

امیدوارم از این قسمت لذت برده باشید.

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

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.