ماژول ها: استاتیک (Modules Static)
اینجا با ماژول های جاوااسکریپت آشنا می شویم. ماژول یعنی فایلِ کدی که با export چیزها را می دهد و با import می گیرد. مثل کیف مدرسه؛ هر کتاب در یک جیب جداست.
ماژول چیست؟
ماژول ها کد را فایل بندی می کنند. سپس داده و توابع را بین فایل ها جابه جا می کنند. برای این کار از type="module" در <script> استفاده می کنیم.
<script type="module">
import { name, age } from "./person.js";
</script>
export const name = "Jesse";
export const age = 40;
نکته: ماژول ها به صورت پیش فرض در strict mode هستند.
خروجی پیش فرض و نام دار
می توانیم یک خروجی پیش فرض داشته باشیم یا چند خروجی نام دار. پیش فرض بدون آکولاد وارد می شود.
<script type="module">
import message from "./message.js";
</script>
const message = () => {
const name = "Jesse";
const age = 40;
return name + " is " + age + "years old.";
};
export default message;
نکته: هر فایل فقط یک default export دارد.
export نام دار؛ دو روش
یا همان جا export می کنیم، یا آخرِ فایل همه را باهم می دهیم.
export const name = "Jesse";
export const age = 40;
const name = "Jesse";
const age = 40;
export { name, age };
import برای نام دار
نام های خروجی باید دقیقاً یکسان باشند و داخل آکولاد بیایند.
import { name, age } from "./person.js";
import برای پیش فرض
برای پیش فرض، نام دلخواه می گذاریم و آکولاد نمی نویسیم.
import text from "./message.js";
Import همه نام دارها
می توانیم همه خروجی های نام دار را یک جا بگیریم.
// Import all named exports
import * as person from "./person.js";
هشدار: ماژول ها فقط با پروتکل HTTP(s) کار می کنند. با file:// وارد نمی شوند.
گام های عملی
- یک فایل
person.jsبساز و خروجی بده. - در HTML با
type="module"خروجی ها را وارد کن. - یک خروجی پیش فرض بساز و بدون آکولاد وارد کن.
ببین هم خانواده ها: Async/Await، پرامیس ها. همین صفحه ماژول های جاوااسکریپت هم مرجع است.
جمع بندی سریع
exportمی دهد،importمی گیرد.- نام دار با آکولاد می آید.
- پیش فرض بدون آکولاد می آید.
- یادت نرود
type="module"بگذاری.