همانطور که برنامه ما بزرگتر میشود، سعی میکنیم آن را به فایل های متفاوتی به نام ماژول (modules) تقسیم بندی کنیم. یک ماژول ممکن است شامل یک کلاس یا کتابخانه ای از توابع برای یک هدف خاص باشد.
تا مدت ها، جاوااسکریپت ساختاری برای نوشتن ماژول ها در سطح زبان نداشت.
اما با گذر زمان اسکریپت ها بیشتر و بیشتر پیچیپده شدند، در نتیجه برنامه نویسان روش های متفاوتی برای سازماندهی و ماژول بندی کردن کد خود و کتابخانه های خاص برای بارگذاری ماژول ها در زمان نیاز ابداع کردند.
این ها نمونه هایی از این کتابخانه ها است (این بخش صرفا جنبه تاریخی دارد):
- AMD – یکی از قدیمی ترین سیستم های ماژول بندی، که اولین بار توسط کتابخانه require.js پیاده سازی شد.
- CommonJS – سیستم ماژول بندی که برای سرورها Node.js درست شد.
- UMD – یک سیستم ماژول بندی که به عنوان یک سیستم جامع شناخته شده و با هردو سیستم AMD و CommonJS همخوانی دارد.
همه این سیستم ها کم کم تبدیل به بخشی از تاریخ شدند اما هنوز هم میتوان آن ها را در اسکریپت های قدیمی مشاهده کرد.
سیستم ماژول بندی در سطح زبان در استاندار سال 2015 مشاهده شد، از آن زمان کمکم پیشرفت کرده و در حال حاضر توسط تمامی مرورگرهای اصلی و Nodejs پشتیبانی میشود. در نتیجه از این به بعد درباره سیستم ماژول بندی مدرن در جاوااسکریپت صحبت میکنیم.
ماژول چیست؟
ماژول در اصل یک فایل است. هر اسکریپت یک ماژول است. به همین سادگی.
ماژول ها میتوانند یکدیگر را لود کرده و به وسیله توابع خاصی مانند export و import بین هم عملکردی را رد و بدل کنند، به وسیله صدا زدن تابعی از یک ماژول در یک ماژول دیگر:
- کلمه کلیدی
exportمتغیرها و توابعی را مشخص میکند که باید بیرون از این ماژول قابل دسترسی باشند. - کلمه کلیدی
importاجازه ایمپورت کردن و استفاده از توانایی های ماژول های دیگر را میدهد.
برای مثال، ما یک فایل با نام sayHi.js داریم که یک تابع را اکسپورت میکند:
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}…در این حالت یک فایل دیگر میتواند این ماژول را ایمپورت کرده و از این تابع استفاده کند: