ES Modullar — import, export, re-export

~15 daq · JavaScript · Modullar

Muammodan boshlaylik

Loyiha o'sib bordi. Bir faylda 2000 qator kod. Funksiyalar, o'zgaruvchilar, siniflar — hammasi aralashib ketgan.

Muammolar:

  • Bitta funksiyani o'zgartirsangiz — boshqa qayerda buzilganini bilmaysiz
  • Hamkasb bilan ishlashda bir fayl — har qadamda conflict
  • Biror narsa qaerda ekanini topish — fayl ichida qidiruv

ES Modullar — kodni mantiqiy qismlarga bo'lish imkonini beradi. Har bir fayl — alohida dunyo. Faqat siz ruxsat bergan narsalar tashqaridan ko'rinadi.

Modul nima?

Modul — alohida JavaScript fayli. Uning o'zgaruvchilari va funksiyalari tashqaridan ko'rinmaydi — agar siz maxsus export qilmasangiz.

Hayotiy o'xshatma

Kompaniya bo'limlari. Moliya bo'limi o'zining hisob-kitoblari, mijozlar ma'lumotlari bilan ishlaydi. Siz moliya bo'limining har bir yozuvini ko'ra olmaysiz — faqat ular "ochiq" qilgan xizmatlardan foydalanasiz. Marketing bo'limi ham shunday. Har bir bo'lim — modul. export — bo'limning tashqariga ochiq xizmatlari. import — boshqa bo'limdan xizmat olish.

Named export — nomli eksport

export kalit so'zi — funksiya, o'zgaruvchi yoki sinfni tashqariga chiqaradi.

// matematika.js
export function qosh(a, b) {
  return a + b;
}

export function ayir(a, b) {
  return a - b;
}

export const PI = 3.14159;

Yoki pastda guruhlash:

// matematika.js
function qosh(a, b) { return a + b; }
function ayir(a, b) { return a - b; }
const PI = 3.14159;

export { qosh, ayir, PI }; // ← oxirida bir joyda

Ikkalasi bir xil ishlaydi. Fayl oxirida nima eksport qilinganini ko'rish uchun — ikkinchi usul qulayroq.

Named import — nomli import

// hisob.js
import { qosh, PI } from "./matematika.js";

console.log(qosh(2, 3)); // 5
console.log(PI);          // 3.14159

Faqat kerakli narsalarni import qilish mumkin — hammasi emas. Bu fayl yuklanish hajmini kamaytiradi.

Alias — nom o'zgartirish

Import qilayotganda nom uzoq bo'lsa yoki boshqa nom bilan olish kerak bo'lsa:

import { qosh as qo_shish, PI as doira_pi } from "./matematika.js";

console.log(qo_shish(2, 3)); // 5
console.log(doira_pi);        // 3.14159

Default export — asosiy eksport

Har bir faylda bitta default export bo'lishi mumkin. Bu faylning "asosiy" narsa.

// Foydalanuvchi.js
export default class Foydalanuvchi {
  constructor(ism, email) {
    this.ism   = ism;
    this.email = email;
  }

  salomlash() {
    console.log(`Salom, ${this.ism}!`);
  }
}

// utils.js — bitta funksiya
export default function formatlash(sana) {
  return sana.toLocaleDateString("uz-UZ");
}

Default import

Default import da nom siz tanlaysiz — figurali qavs kerak emas:

import Foydalanuvchi from "./Foydalanuvchi.js";
import formatlash    from "./utils.js";

const f = new Foydalanuvchi("Jasur", "jasur@mail.com");
console.log(formatlash(new Date()));

Nom siz tanlaysiz — import qilgan faylning nomidan farq qilishi mumkin. Lekin chalkashmaslik uchun asl nom ishlatilishi yaxshi.

Named va Default — qachon qaysi?

Bu savol ko'p chiqadi. Amaliy qoida:

Named export — faylda bir nechta narsa eksport qilinsa. Yordamchi funksiyalar to'plami, konstantalar.

// stringUtils.js
export function trim(s) { return s.trim(); }
export function capitalize(s) { return s[0].toUpperCase() + s.slice(1); }
export function truncate(s, n) { return s.length > n ? s.slice(0, n) + "..." : s; }

Default export — fayl bitta asosiy narsani ifodalasa. Komponent, sinf, yagona funksiya.

// Tugma.js — bitta komponent
export default function Tugma({ matn, bosish }) { ... }

Named va default birga ham ishlatilishi mumkin:

// api.js
export default class API { ... }           // asosiy sinf
export const BASE_URL = "/api/v1";         // qo'shimcha konstantа
export function headerYarat(token) { ... } // yordamchi funksiya

Re-export — qayta eksport

Bir nechta moduldan narsa import qilib, hammasini bitta joydan eksport qilish — bu re-export.

Hayotiy o'xshatma

Supermarket. Ichida turli bo'limlar: non bo'limi, go'sht bo'limi, sabzavot bo'limi. Lekin mijozlar uchun bitta kirish, bitta kassa. Supermarket barcha tovarlarni bitta joyda to'pladi.

Re-export — xuddi shunday. utils/index.js ichida barcha yordamchi funksiyalar bitta joydan eksport qilinadi:

utils/
  string.js    ← trim, capitalize, truncate
  number.js    ← formatlash, yaxlitlash
  sana.js      ← formatlashSana, farq
  index.js     ← hammasini bitta yerdan

// utils/index.js
export { trim, capitalize, truncate } from "./string.js";
export { formatlash, yaxlitlash }     from "./number.js";
export { formatlashSana, farq }       from "./sana.js";

// Ishlatish — bitta joydan
import { trim, formatlashSana } from "./utils/index.js";

Foydalanuvchi qaysi faylda ekanini bilishi shart emas — hammasi utils dan keladi.

Hammasini import qilish — * as

import * as Matematika from "./matematika.js";

console.log(Matematika.qosh(2, 3)); // 5
console.log(Matematika.PI);          // 3.14159

Kamdan-kam ishlatiladi — kerak bo'lgan narsalarni alohida import qilish tree-shaking uchun yaxshi.

type="module" — HTML da

Brauzerda ES Modullar ishlatish uchun <script> tegiga type="module" kerak:

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

Bu nima beradi?

  • Modul o'z scope ga ega — global o'zgaruvchilar chiqib ketmaydi
  • import/export ishlaydi
  • Fayllar avtomatik defer bo'ladi — DOM tayyor bo'lgach ishlaydi

Tez-tez uchraydigan xatolar

.js kengaytmani unutish:

Brauzerda modullar uchun to'liq fayl nomi kerak. Bundler (Vite, Webpack) da kengaytmasiz ham ishlashi mumkin, lekin brauzerda yo'q.

// ❌ — brauzerda ishlamaydi
import { qosh } from "./matematika";

// ✅
import { qosh } from "./matematika.js";

Default importni figurali qavs bilan import qilish:

// ❌ — default import figurali qavsda emas
import { Foydalanuvchi } from "./Foydalanuvchi.js"; // undefined

// ✅
import Foydalanuvchi from "./Foydalanuvchi.js";

Faylda ikki marta default export:

// ❌ — SyntaxError: bitta faylda faqat bitta default export
export default function A() {}
export default function B() {}

// ✅
export default function A() {}
export function B() {} // ← named export

Xulosa

Named export — export function, export const, export { x, y }. Import: import { x, y } from "...".

Default export — bitta faylda bitta. Import: import X from "..." — nom siz tanlaysiz.

Re-export — export { x } from "./boshqa.js". Bitta joydan bir nechta modulni eksport qilish.

Modullar — katta loyihada tartib. Har fayl o'z vazifasida, faqat kerakli narsalar tashqariga chiqadi.

Keyingi dars

55-dars: Dynamic import — lazy loading