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
├── hisob.js       ← hisob-kitob funksiyalari
└── formatlash.js  ← matn formatlash

export — tashqariga chiqarish

hisob.js faylida:

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

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

export const SOLIQ = 0.12;

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

import — olib kirish

main.js faylida:

import { qoshish, SOLIQ } from "./hisob.js";

console.log(qoshish(2, 3));
console.log(SOLIQ);

Figurali qavs ichida aynan kerakli narsalar sanaladi.

Nom berish

Import qilinganda nomni almashtirish mumkin:

import { qoshish as summa } from "./hisob.js";
console.log(summa(2, 3));

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

Hammasini olish

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

console.log(hisob.qoshish(2, 3));
console.log(hisob.SOLIQ);

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

Standart eksport

Modul bitta asosiy narsa chiqarsa:

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

// main.js — figurali qavssiz, istalgan nom bilan
import tugmaYasa from "./tugma.js";

Brauzerda ulash

Modul ishlashi uchun type="module" kerak:

<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. hisob.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 Promise — asinxron kodni boshqarishni boshlaymiz.