آموزش ویژگی های ECMAScript 6 (جلسه 28) : آموزش کار با Module - قسمت 1

همونطور که اطلاع دارید در جلسه قبل در مورد Symbol ها در ES6 توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این جلسه میخوایم در مورد کار با Module یا ماژول ها که در ES6 معرفی شده است، توضیحاتی رو قرار بدیم.

مشکلات قبل از معرفی Module

همونطور که اطلاع دارید در گذشته یک فایل بزرگ Javascript رو درست می کردیم و هر چه کد داشتیم رو درون اون قرار میدادیم و همه چیز در دامنه Global یا سراسری قرار میگرفت. مثلا یک فایل بنام main.js میساختیم و همه کدها رو درونش قرار میدادیم و بعد از اون بصورت زیر در صفحه اون رو لود میکردیم:

هر چه پروژه بزرگتر میشه و کدهای موجود در main.js بیشتر میشه، مدیریت اونا سخت تر میشه و برای پیدا کردن یک چیز خاص باید مدت زمان زیادی رو تلف کنیم (معایب بسیار زیاد دیگه ای نیز وجود دارد). پس برای این مشکل هم میتونیم مثلا کدهامون رو داخل تعدادی فایل مختلف قرار بدیم و اونا رو یکی پس از دیگری لود کنیم. بصورت زیر:

در این حالت شاید برای پروژه های کوچک خوب باشه و بتونین راحتتر کدهاتون رو مدیریت کنید ولی هر چه پروژه بزرگتر میشه، مدیریت موارد این چنینی بسیار سخت و عذاب آور خواهد شد. بخاطر اینکه همه اطلاعات مربوط به این فایلها با فایلهای بعدی به اشتراک گذاشته میشه، ممکنه فایل 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 رو شروع میکنیم.

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

یا علی