آموزش ویژگی های ECMAScript 6 (جلسه آخر) : استفاده از module یا ماژول ها در مرورگر

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

همونطور که خاطرتون هست در جلسات گذشته در مورد ماژول ها و استفاده اونا در ES6 توضیحات کامل و مفصلی رو قرار دادیم. مشکلی که در مورد ماژولها وجود داشت این بود که مرورگرها نمیتونستن ماژولها رو لود کنن و ما مجبور بودیم که از Bundler هایی مانند Webpack یا Rollup یا ... استفاده کنیم و کدهامون رو یکی کرده و بعد از اون در مرورگر لود کنیم.

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

اخیرا امکانی به بعضی از مرورگرهای مدرن اضافه شده است که با استفاده از اون میتونین module ها رو در صفحه لود کنید. برای اینکار باید درون ویژگی type مربوط به تگ script مقدار module رو قرار بدین. با اینکار مشخص میکنید که فایل Javascript مورد نظر بصورت ماژولار می باشد و مرورگر نیز قواعد مربوط به ماژولار بودن رو در نظر میگیره و اسکریپت مورد نظر رو لود کرده و اجرا میکند.

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

همونطور که میبینید مرورگرهای کمی از اون پشتیبانی میکنند.

مرورگرهای Edge 16 به بالا، Chrome 61 به بالا، Safari 10.1 به بالا از این ویژگی پشتیبانی میکنند و نیازی به انجام کار خاصی ندارید. اما برای Edge 15 و Firefox 55 به بالا و Chrome 60 و Opera 47 به بالا نیز میتونین با انجام تغییراتی در تنظیمات مرورگر، این ویژگی رو فعال کرده و اون رو تست کنید.

فعال کردن مرورگر Edge 15

در ابتدا وارد آدرس about:flags بشید و گزینه مربوط به Enable experimental JavaScript features رو تیک بزنید:

بعد از اینکار مرورگر خودتون رو ببندید و مجددا باز کنید. از این به بعد میتونین از این ویژگی در این مرورگر استفاده کنید.

فعال کردن مرورگر Firefox 55 به بالا

در ابتدا وارد آدرس about:config بشید و بر روی دکمه زیر کلیک کنید:

با کلیک بر روی این دکمه وارد صفحه تنظیمات میشید و dom.moduleScripts.enabled رو جستجو کرده و با دوبار کلیک کردن بر روی اون، این مورد رو فعال یا Enable کنید:

به همین راحتی.

فعال کردن مرورگر Opera 47 به بالا

برای اینکار وارد آدرس about:flags شده و Enable ECMAScript 6 modules رو جستجو کنید و اون رو Enable یا فعال کنید:

بعد از تغییر دادن تنظیمات هر مرورگر، یکبار اون رو ببندید و مجددا باز کنید تا بتونین ماژولها رو مورد تست قرار بدین.

خب حالا که محیط رو فراهم کردیم وارد بحث اصلی میشیم.

مثالی ساده برای یادگیری

فرض کنید که یک فایل بنام addition.js بصورت زیر داریم:

میبینید که در اینجا یک تابع بنام sum وجود داره که دو عدد رو میگیره و مجموعه اونا رو برگشت میده. در انتها با استفاده از export این تابع رو خروجی گرفتیم و میتونیم از اون در فایلهای دیگه استفاده کنیم.

خب حالا یک فایل دیگه بنام app.js میسازیم و کدهای زیر رو درونش قرار میدیم:

میبینید که تابع sum رو با استفاده از import وارد کردیم و میخوایم مجموع دو عدد 1 و 2 رو بدست بیاریم و در Console چاپ کنیم. حالا برای اینکه از این مورد در مرورگر استفاده کنیم، یک فایل index.html میسازیم و کدهای زیر رو درونش قرار میدیم:

همونطور که میبینید کدهای ساده HTML رو قرار دادیم و در انتها نیز app.js رو با استفاده از تگ script ساده لود کردیم.

حالا اگر index.html رو در مرورگر باز کنیم و Console رو ببینیم، بصورت زیر خواهد بود:

میبینید که در این حالت مرورگر اصلا کلمه import رو تشخیص نمیده.

برای رفع این مشکل میتونین به سادگی نوع script رو برابر با module قرار بدین. بصورت زیر:

میبینید که type="module" رو برای Script قرار دادیم. حالا اگر مجددا index.html رو در یکی از مرورگرهایی که از ماژول ها پشتیبانی میکند باز کنید، میبینید که خروجی 3 در Console نمایش داده خواهد شد:

به همین راحتی.

مطالعه بیشتر

برای استفاده از ماژولها در مرورگر نکات دیگه ای نیز وجود داره که خودتون میتونین اونا رو مطالعه کنید.

در ادامه تعدادی آدرس رو بهتون معرفی میکنیم که میتونین اونا رو مطالعه کنید:

• jakearchibald
• matthewphillips
• philipwalton

خب در این دوره سعی شد اون چیزی از Ecmascript 2015 یا ES6 که هر توسعه دهنده Javascript به اونا نیاز داره رو آموزش بدیم.

امیدوارم از این دوره خوشتون اومده باشه.

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

یا علی