همونطور که اطلاع دارید در جلسه قبل در مورد Symbol ها در ES6 توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه میخوایم در مورد کار با Module یا ماژول‌ها که در ES6 معرفی شده است، توضیحاتی رو قرار بدیم.
مشکلات قبل از معرفی Module
همونطور که اطلاع دارید در گذشته یک فایل بزرگ Javascript رو درست میکردیم و هر چه کد داشتیم رو درون اون قرار میدادیم و همه چیز در دامنه Global یا سراسری قرار میگرفت. مثلا یک فایل بنام main.js میساختیم و همه کدها رو درونش قرار میدادیم و بعد از اون بصورت زیر در صفحه اون رو لود میکردیم:
<script type="text/javascript" src="main.js"></script>
هر چه پروژه بزرگتر میشه و کدهای موجود در main.js بیشتر میشه، مدیریت اونا سخت‌تر میشه و برای پیدا کردن یک چیز خاص باید مدت زمان زیادی رو تلف کنیم (معایب بسیار زیاد دیگه ای نیز وجود دارد). پس برای این مشکل هم میتونیم مثلا کدهامون رو داخل تعدادی فایل مختلف قرار بدیم و اونا رو یکی پس از دیگری لود کنیم. بصورت زیر:
<script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="task1.js"></script> <script type="text/javascript" src="task2.js"></script>
در این حالت شاید برای پروژه‌های کوچک خوب باشه و بتونین راحتتر کدهاتون رو مدیریت کنید ولی هر چه پروژه بزرگتر میشه، مدیریت موارد این چنینی بسیار سخت و عذاب آور خواهد شد. بخاطر اینکه همه اطلاعات مربوط به این فایلها با فایلهای بعدی به اشتراک گذاشته میشه، ممکنه فایل task2.js به task1.js بستگی داشته باشه و کدهایی درون خودش داشته باشه که برای اجرا شدن به وجود task1.js نیاز داشته باشد. ممکنه task1.js نیز در آینده به فایلهای دیگه ای نیاز داشته باشد. پس در این مواقع شما باید همیشه حواستون به این باشه که چه فایلی چه پیش نیازی دارد و همیشه این اسکریپت‌ها رو مرتب کنید تا مشکلی به وجود نیاد.
مقدماتی در مورد Module یا ماژول ها
اینکه همیشه بررسی کنیم که چه فایلی به چه فایل دیگری نیاز داره و مدام ترتیب فایلها رو بررسی کنیم، کار خیلی جالبی نیست و با بزرگ شدن پروژه نیز کار خیلی سختی خواهد بود. پس باید یک راه حل برای این مشکل پیدا کنیم. در اینجا هست که Module یا ماژول‌ها خودشون رو نشون میدن. با استفاده از Moduleها ما میتونیم فقط چیزهایی که نیاز داریم رو Export یا استخراج کنیم و در فایلهایی که نیاز داریم اونا رو import کرده و ازشون استفاده کنیم.
ماژول‌ها یکی از مهم‌ترین ویژگی‌های اضافه شده به Javascript در ES6 هستند و با استفاده از اونا میتونیم به راحتی پروژه‌های خودمون رو مدیریت کنیم. تا قبل از معرفی شدن Moduleها در ES6 از روشهای استاندارد CommonJS و AMD و UMD یا Universal Module Definition میتونستیم از کدنویسی ماژولار بهره ببریم. CommonJS در Node.js مورد استفاده قرار میگرفت. AMD مخفف Asynchronous Module Definition هست و بیشتر برای لود شدن در مرورگر از اون استفاده میشه (از Require.js برای این کار استفاده میشه). برای مطالعه بیشتر در این زمینه میتونین این لینک و این لینک رو مطالعه کنید. هر 3 موارد بیان شده توسط افراد دیگه ساخته شده و مختص به Javascript نیست. اما بالاخره در سال 2015 و در ES6 ماژول‌ها به صورت رسمی به Javascript اضافه شدند و به راحتی میتونین از اونا استفاده کنید.
اگر شما با هیچ کدام از روشهای CommonJS یا AMD یا UMD آشنایی ندارید یجورایی مزیت نیز محسوب میشه و نیازی به نگرانی نیست. چون که دیگه نیازی نیست با سختی اونا آشنا بشید و خودتون رو گیج کنید و مستقیم میتونیم برنامه نویسی ماژولار در ES6 رو یاد بگیرید.
ماژول‌ها در ES6
در ES6 هر ماژول در فایل مختص به خودش تعریف میشه. هر متغیر یا تابعی که در یک فایل تعریف میکنید، در فایلهای دیگه قابل دسترسی نیستند مگر اینکه بصورت صریح اونا رو export کنید و خروجی بگیرید. پس اینجور میشه گفت که شما میتونین هر چه کد میخواید رو درون یک فایل بنویسید و فقط اون قسمتهایی (نه کل فایل) که مدنظر دارید رو export کنید و در فایلهای دیگه مورد استفاده قرار بدین.
Syntax و روش استفاده از Moduleها در ES6 خیلی راحتتر شده و مانند روشهای قدیمی دیگه گیج کننده نیستند.
در جلسه بعدی کار با ماژول‌ها در ES6 رو شروع میکنیم.
موفق و پیروز باشید.
یا علی
اولین دیدگاه این پست رو تو بنویس !