وارد کردن و صادر کردن ماژول های جاوا اسکریپت می تواند به ساده سازی کد شما کمک کند.
امروزه جاوا اسکریپت نقش بسیار زیادی در توسعه وب سایت ایفا می کند. توسعه دهندگان فرانت اند از جاوا اسکریپت برای ایجاد برنامه های کاربردی وب تعاملی استفاده می کنند. در نتیجه، تقاضا برای توسعه دهندگان جاوا اسکریپت افزایش یافته است.
مطمئناً جاوا اسکریپت در طول سال ها تکامل یافته است. ES6 بسیاری از ویژگی های جدید را به این زبان معرفی کرد. یکی از این روش ها روشی برای به اشتراک گذاری آسان کدها در بین فایل های جاوا اسکریپت است.
واردات و صادرات تابع برای جاوا اسکریپت ویژگی های جدیدی هستند که شما را به یک توسعه دهنده بهتر تبدیل می کنند. در اینجا نحوه عملکرد این ویژگی ها آمده است.
ماژول جاوا اسکریپت چیست؟
ماژول جاوا اسکریپت یک فایل جاوا اسکریپت است که حاوی مجموعه ای از کدها برای استفاده شماست. ماژول ها معمولا در فایل های جداگانه نوشته می شوند و با استفاده از کلمه کلیدی import وارد می شوند. این باعث صرفه جویی در زمان و تلاش می شود زیرا می توانید بعداً دوباره از آن استفاده کنید.
به عنوان مثال، اگر تابعی به نام ()calculate () دارید، می‌توانید آن را در فایل دیگری قرار دهید و با استفاده از توابع جاوا اسکریپت صادرات و واردات، آن را در هر جای پروژه خود در دسترس قرار دهید.
یکی از مزایای استفاده از ماژول ها این است که به سازماندهی کد شما کمک می کند. همچنین کد شما را قابل مدیریت تر و اشکال زدایی آسان تر می کند.
برای استفاده از یک فایل جاوا اسکریپت به عنوان یک ماژول، باید یک اسکریپت در سند HTML خود با یک type=”module” ایجاد کنید.
<script type="module" src="fileName.js"></script>
دو نوع ماژول وجود دارد:
- ماژول های ECMAScript: ماژول های استاندارد جاوا اسکریپت و توسط تمام مرورگرهای اصلی پشتیبانی می شوند.
- ماژول های CommonJS: قدیمی تر هستند و به طور گسترده پشتیبانی نمی شوند.
ما در اینجا بر روی ماژول های ECMAScript تمرکز خواهیم کرد. در صورت نیاز، به مقدمه جاوا اسکریپت مراجعه کنید تا اصول اولیه را بررسی کنید.
نحوه صادرات توابع در جاوا اسکریپت
در جاوا اسکریپت، توابع اشیایی درجه یک هستند که علاوه بر استفاده به تنهایی، می توانند به عنوان آرگومان نیز ارسال شوند. صادرات توابع راه خوبی برای انتقال آنها به برنامه های دیگر است. همچنین زمانی استفاده می شود که می خواهید کتابخانه های قابل استفاده مجدد ایجاد کنید.
صادرات توابع در جاوا اسکریپت با استفاده از تابع صادرات انجام می شود. تابع صادرات یک تابع مشخص را صادر می کند تا توسط یک فایل یا اسکریپت دیگر استفاده شود. با صادرات توابع خودمان، می‌توانیم آزادانه از آنها در فایل‌ها یا اسکریپت‌های دیگر استفاده کنیم، بدون اینکه نگران مسائل مربوط به مجوز باشیم.
دو راه برای استفاده موثر از تابع صادرات وجود دارد. ما این موارد را با مثال های کد بررسی می کنیم.
فرض کنید یک فایل getPersonalDetails.js دارید که تابعی دارد که نام کامل یک کاربر را پس از یک ورودی سریع برمی گرداند. تابع به شکل زیر است:
function getFullName(fullName){
fullName = prompt('What is your First Name');
console.log(fullName);
}
- شما می توانید این تابع را به سادگی با استفاده از کلمه کلیدی صادرات و به دنبال آن نام تابع در براکت های فرفری صادر کنید. به نظر می رسد: صادرات {getFullName};
- روش دوم اضافه کردن کلمه کلیدی صادراتی درست قبل از اعلان تابع function.export getFullName (fullName){…}
export {getFullName};
export function getFullName (fullName){...}
با استفاده از روش اول می توانید چندین تابع را صادر کنید. این کار با درج نام توابع مورد نظر در براکت فرفری انجام می شود. توابع با کاما از هم جدا می شوند.
به عنوان مثال: فرض کنید سه تابع در ما دارید
دریافت اطلاعات شخصی
js
فایل
– getFullName()،
دریافت ایمیل ()
،
getDob()
. با افزودن خط کد زیر می توانید توابع را صادر کنید:
صادرات {getFullName، getEmail، getDob}؛
export {getFullName, getEmail, getDob};
نحوه وارد کردن توابع در جاوا اسکریپت
برای استفاده از یک ماژول، ابتدا باید آن را وارد کنید. هر تابعی را می توان با استفاده از یک مرجع تمام مسیر وارد کرد.
وارد کردن توابع کاملاً ساده است. جاوا اسکریپت دارای یک ویژگی داخلی برای وارد کردن توابع خود از فایل های دیگر است. اگر می‌خواهید از ماژول‌های دیگر به آن توابع دسترسی داشته باشید، ایده خوبی است که برای هر یک از برنامه‌های کاربردی خود یک اعلان تابع اضافه کنید.
تابعی که باید وارد شود قبلاً در فایل اصلی خود صادر شده است.
شما می توانید توابع را از یک فایل دیگر با استفاده از عملکرد کلمه کلیدی import وارد کنید. Import به شما امکان می دهد انتخاب کنید کدام قسمت از یک فایل یا ماژول بارگذاری شود.
در اینجا نحوه وارد کردن تابع getFullName ما از getPersonalDetails.js آمده است:
import {getFullName} from './getPersonalDetails.js'
با این کار این تابع برای استفاده در فایل فعلی ما در دسترس خواهد بود.
به منظور وارد کردن چندین عملکرد، توابعی که باید وارد شوند در بریس‌های فرفری گنجانده شده‌اند. هر کدام با کاما (،) از هم جدا می شوند.
import {getFullName, getEmail, getDob} from './getPersonalDetails.js'
راه دیگری برای استفاده از عملکرد واردات وجود دارد. این به ما امکان می دهد تمام صادرات را در یک فایل خاص وارد کنیم. با استفاده از import * به عنوان نحو انجام می شود.
با افزودن خط کد زیر می‌توانید تمام صادرات را در getPersonalDetails.js ما وارد کنید:
import * as personalDetailsModule from './getPersonalDetails.js'
در بالا یک شی به نام personalDetailsModule ایجاد می شود.
این فقط یک نام متغیر است، شما می توانید آن را هر چیزی نامگذاری کنید.
این شی شامل تمام صادرات در getPersonalDetails.js ما است. توابع در این شی ذخیره می شوند و می توان به روشی که شما به هر ویژگی شی دسترسی پیدا می کنید، دسترسی پیدا کرد.
به عنوان مثال، ما می توانیم با افزودن خط کد زیر به تابع getFullName دسترسی پیدا کنیم
personalDetailsModule.getFullName();
صادرات پیش فرض چیست؟
پیش‌فرض صادرات یک قابلیت صادرات استثنایی است. اگر فقط یک متغیر از یک فایل صادر شده باشد، استفاده می شود. همچنین برای ایجاد یک مقدار بازگشتی برای یک فایل یا ماژول استفاده می شود.
در زیر نمونه ای وجود دارد که در آن از تابع getFullName به عنوان پیش فرض استفاده کردیم:
export default function getFullName (fullName){...}
شما نمی توانید بیش از یک مقدار به عنوان پیش فرض در هر ماژول یا فایل داشته باشید.
تابعی که به‌عنوان پیش‌فرض استفاده می‌شود، به‌صورت متفاوتی وارد می‌شود. در اینجا نحوه وارد کردن تابع getFullName که به عنوان پیش فرض استفاده می شود آورده شده است:
import fullName from './getPersonalDetails.js'
در اینجا تفاوت ها وجود دارد:
- هیچ بریس فرفری در اطراف مقدار وارد شده، fullName وجود ندارد.
- fullName در اینجا فقط یک نام متغیر است. مقدار هر تابع پیش فرض را ذخیره می کند.
توابع جاوا اسکریپت خود را شارژ کنید
ماژول های جاوا اسکریپت تکه هایی از کد هستند که می توانند با استفاده از توابع جاوا اسکریپت واردات و صادرات در سایر قسمت های کد شما دوباره استفاده شوند. آنها معمولاً در فایل های جداگانه نوشته می شوند و با استفاده از کلمه کلیدی import وارد می شوند. یکی از مزایای استفاده از ماژول ها این است که به سازماندهی کد شما کمک می کند. همچنین کد شما را قابل مدیریت تر و اشکال زدایی آسان تر می کند.