پیش به سوی ES Modules

اگه کمی با جاوا اسکریپت عزیزمون سرو کله زده باشین قاعدتا میدونین که راه مختلفی برای import کردن packages ها هست که عبارتند از:

• CommonJS — module.exports and require used in Node.js
• Asynchronous Module Definition (AMD)
• Universal Module Definition (UMD)

شاید باورتون نشه ولی باید خدمتون بگم که هیچکدوم از اینا روش استانداردی تو جاوا اسکریپت نیست. تو ES6 روشی به نام single universal module معرفی شد.

ES Modules از راه میرسید!!!

اول از همه بگو ببینم خوده این ماژول (modules) تو جاوا اسکریپت چی هست؟

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

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

حالا بگو چرا باید از ماژول (modules) استفاده کنم؟

استفاده از ماژول ها به خودی خود فواید زیادی داره، اما سه تا مشخصه اهمیت بیشتری داره:

1- قابلیت نگهداری یا Maintainability: طبق توضیحی که دادم ماژول ها مستقل از یکدیگر هستند. ماژولی که خوب طراحی بشه وابستگی ها رو کم میکنه و همین باعث میشه توسعه دادن تک ماژول ها بسیار راحت تر بشه. مثلا اگه یه ماژول داشته باشین و بخواین بخشی از کد رو آپدیت کنین نیاز نیست دیگه هر جا که استفاده شده مجدد به روزرسانی بشه، شما با آپدیت Core تغییرات رو تو همه جا اعمال میکنین.

2- فضای نام یا Namespacing: تو جاوا اسکریپت متغییرات (variables) که خارج از اسکوپ تو سطح بالاتر از فانکشن یا بلاک ( {} ) تعریف میشن به صورت گلوبال هستند.(به این معنی که همه میتونن بهشون دسترسی داشته باشن) همین باعث میشه namespace ها الا بختکی در دسترس قرار بگیرند که اصلا دلیلی به انجام این کار نیست. انجام همچین کاری یه چیز تو مایه های ریختن قیمه ها تو ماستاس :))) ( به این لینک مراجعه کنید برای توضیحات بیشتر)

3- قابلیت استفاده مجدد یا Reusability: اگه بخوایم بینی و بین الهی صادق باشیم با خودمون، خیلی هامون بیشتر از کد های آماده یا کد های قبلی مون استفاده میکنم و به صورت فرآیند پیچیده COPY/PASTE که بسیار وقت گیر هم هست به پروژه فعالمون اضافه میکنیم آیتم های مد نظرمون رو :))
حالا با ماژول کردن کد هامون میتونیم با دغدغه کمتری این کارو انجام بدیم.

حالا بگو ES Modules چی چی هست اصلا؟

شاید اسمش قلمبه سلمبه باشه، اما احتمال میدم شما با سینتکس نمونه ای که در ادامه بهتون نشون میدم آشنا باشین، ما با این روش میتونیم فانکشن یا یک متغییر رو از یک پکیج export کنیم و تو بخش های دیگه مجدد فراخوانیشون کنیم:

export const hoursInDay = 24
export const multiply = (a, b) => {
    return a * b
}

ما میتونیم به اضای هر فایل، متد ها و متغییرات مختلفی رو export کنیم. برای import کردن هم مطابق روش زیر که اگه بخوایم هر فانکشن/متغییر که مورد نیاز ما باشه روش اول و اگه بخوایم به همه دسترسی داشته باشیم به روش دوم عمل میکنیم:

//1- import individual items
import {hoursInDay, multiply} from './somefile.js'

//2- import the whole file
import * as test from './somefile.js'

حالا اگه این وسط بخواین dynamic import استفاده کنین تا لود کردن کد هارو مدیریت کنین که یک promise براتون return میکنه :

switch (page) {
    case 'home':
        import('./home-page');
        break;
    case 'register':
        import('./register-page');
        break;

به طبع شما میتونین به شکل زیر هم کار کنین:

<script type=&quotmodule&quot src=&quot./somefile.js&quot>

روش بالا با اکثر مرورگر های استاندارد جواب میده. اگه بخواین تو Node.js کار کنین باید تو فایل package.json بخش "type" رو برابر با "module" تنظیم کنید. اما خب به طبع راه های رسیدن به خدا بیشتر از این حرفاس میتونین این لینک رو برای مطالعه بیشتر بررسی کنید.

اصلا چرا باید این موضوع برامون اهمیت داشته باشه؟

ES Modules توسط اکثر مرورگر های استاندارد پیشتیبانی میشه از طرف دیگه تو node js هم پشتیبانی میشه و الان بیشتر از قبل داره فراگیر میشه

حالا دلایل اینکه بریم سمت ES Modules:

پشتیبانی گسترده

شما میتونی هر جا که جاوا اسکریپت مینویسی از این روش استفاده کنی، یک روش مشترک؛ تفاوتی بینبرای مرورگر یا nodejs نیست.

مبتنی بر استاندارد

پشتیبانی گسترده به دنبالش یک استاندارد داره، این روشی که استفاده میکنیم چیزی خارج از JS نیست.

کارایی (Performance)

استفاده از ES Modules تو فرآیند tree shaking برای bundling به ما کمک میکنه. از اونجایی که کانفیگ کمتری برای مرورگر مورد نیازه میتونه با کم کردن build scripts های ما به افزایش Performance کمک کنه.

برای مطالعه بیشتر لطفا به منبع زیر مراجعه کنید:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

از اینکه تا انتهای مطلب همراه من بودین ممنونم، خوشحال میشم نظرتونو راجب ES Modules بدونم. شما از چه روشی استفاده میکنین؟

سایر مقالات من در ویرگول: