JavaScript modullar (import, export)

Loyiha o’sgani sayin butun kodni bitta faylda saqlash imkonsiz bo’ladi. Modul — o’z vazifasi bo’lgan alohida fayl; ular bir-birini import qiladi.

Muammo: bitta katta fayl

Ming qatorli fayl bilan ishlash qiyin: kerakli joyni topish uzoq, ikki dasturchi bir vaqtda tahrirlay olmaydi, qayta ishlatish mumkin emas.

Yechim — mantiqiy bo’laklarga ajratish:

loyiha/
├── main.js        ← boshqaruv
├── calc.js        ← hisob-kitob funksiyalari
└── format.js      ← matn formatlash

export — tashqariga chiqarish

calc.js faylida:

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const TAX = 0.12;

export yozilgan narsalar boshqa fayllarga ochiq bo’ladi. Yozilmagani — faylning ichki ishi bo’lib qoladi.

import — olib kirish

main.js faylida:

import { add, TAX } from "./calc.js";

console.log(add(2, 3));
console.log(TAX);

Figurali qavs ichida aynan kerakli narsalar sanaladi.

Nom berish

Import qilinganda nomni almashtirish mumkin:

import { add as sum } from "./calc.js";
console.log(sum(2, 3));

Bu ikki modulda bir xil nom bo’lganda kerak bo’ladi.

Hammasini olish

import * as calc from "./calc.js";

console.log(calc.add(2, 3));
console.log(calc.TAX);

Barcha eksportlar bitta obyektga yig’iladi. Bu qaysi funksiya qayerdan kelganini aniq ko’rsatadi.

Standart eksport

Modul bitta asosiy narsa chiqarsa:

// button.js
export default function createButton(text) {
  const b = document.createElement("button");
  b.textContent = text;
  return b;
}

// main.js — figurali qavssiz, istalgan nom bilan
import createButton from "./button.js";

Brauzerda ulash

Modul ishlashi uchun type="module" kerak. Katta loyihada modullarni bundler bitta faylga yig’adi — brauzer o’nlab so’rov yubormaydi:

<script type="module" src="main.js"></script>

Modul skriptlari:

• avtomatik defer bo’ladi — HTML to’liq o’qilgach ishlaydi;
• o’z qamroviga ega — o’zgaruvchilar global maydonga chiqmaydi;
• faqat HTTP orqali ishlaydi (file:// da brauzer bloklaydi).

Amaliy mashq

Loyihani modullarga bo’ling:

1. calc.js fayl yaratib, ikki funksiya export qiling;
2. main.js da ularni import qilib ishlating;
3. HTML’ga <script type="module"> bilan ulang;
4. bitta funksiyani as bilan boshqa nom ostida import qiling;
5. export default bilan uchinchi modul yasang;
6. type="module" ni olib tashlab ko’ring — qanday xato chiqadi?

6-qadam modul tizimi nima uchun alohida rejim ekanini ko’rsatadi.

Qisqacha xulosa

• Modul — o’z vazifasi bo’lgan alohida .js fayl.
• export tashqariga ochadi, import olib kiradi.
• Nomlangan eksport figurali qavs talab qiladi; default — yo’q.
• import * as nom barcha eksportni bitta obyektga yig’adi.
• Brauzerda <script type="module"> kerak; file:// da ishlamaydi.

Keyingi darsda arrow funksiyalar — qisqa funksiya yozuvi va callback’ga tayyorgarlik.