JavaScript үндэс / ES6 Модулиуд (import/export)

ES6 Модулиуд (import/export)

Том проект дээр ажиллахад бүх кодыг нэг файлд бичэх нь тохиромжгүй болдог. ES6 модулиуд нь кодыг тусдаа файлуудад хувааж, хэрэгтэй үедээ import хийн ашиглах боломжийг олгодог. Үүний ачаар код цэгцтэй, дахин ашиглагдах чадвартай болно.

export — файлаас гадагш гаргах

export түлхүүр үгийг функц, class, хувьсагчийн өмнө бичвэл тухайн зүйл өөр файлаас import хийх боломжтой болно.

javascript

// utils.js
export function нэмэх(а, б) {
  return а + б;
}

export function хасах(а, б) {
  return а - б;
}

export const PI = 3.14159;

Эсвэл файлын доод хэсэгт нэг дор экспортлож болно:

javascript

// utils.js
function нэмэх(а, б) {
  return а + б;
}
function хасах(а, б) {
  return а - б;
}
const PI = 3.14159;

export { нэмэх, хасах, PI };

import — өөр файлаас авах

import ашиглан өөр файлын экспортуудыг өөрийн файлдаа оруулна.

javascript

// main.js
import { нэмэх, хасах, PI } from "./utils.js";

console.log(нэмэх(10, 5)); // 15
console.log(хасах(10, 5)); // 5
console.log(PI); // 3.14159

Нэрийг өөрчилж оруулах шаардлага гарвал as ашиглана:

javascript

import { нэмэх as sum, PI as pi } from "./utils.js";

console.log(sum(3, 4)); // 7
console.log(pi); // 3.14159

export default — үндсэн экспорт

Нэг файлаас зөвхөн нэг зүйлийг default болгон экспортолж болно. Import хийхдээ хашилтгүйгээр, хүссэн нэрээрээ авна.

javascript

// Хэрэглэгч.js
export default class Хэрэглэгч {
  constructor(нэр, имэйл) {
    this.нэр = нэр;
    this.имэйл = имэйл;
  }

  танилцуулах() {
    console.log(`${this.нэр} — ${this.имэйл}`);
  }
}

javascript

// main.js
import Хэрэглэгч from "./Хэрэглэгч.js"; // хашилтгүй, нэрийг чөлөөтэй өгнө

const болд = new Хэрэглэгч("Болд", "bold@example.mn");
болд.танилцуулах(); // Болд — bold@example.mn

Бүх зүйлийг нэг дор import хийх

Файлын бүх экспортыг нэг объект болгон авахдаа * as ашиглана:

javascript

// main.js
import * as Тооцоо from "./utils.js";

console.log(Тооцоо.нэмэх(2, 3)); // 5
console.log(Тооцоо.PI); // 3.14159

Модулийн бодит хэрэглээ

Жинхэнэ проектод файлуудыг үүрэгээр нь ангилна:

javascript

// helpers/формат.js
export function мөнгө_формат(дүн) {
  return `${дүн.toLocaleString()}₮`;
}

export function огноо_формат(огноо) {
  return new Date(огноо).toLocaleDateString("mn-MN");
}

javascript

// main.js
import { мөнгө_формат, огноо_формат } from "./helpers/формат.js";

console.log(мөнгө_формат(2_500_000)); // 2,500,000₮
console.log(огноо_формат("2025-01-15")); // 2025.01.15

Модулиудыг ашигласнаар кодын аль хэсэг юу хийдгийг нэрлэх боломжтой болж, команд болгон хайх, ойлгох, засах нь хялбар болно.

Дараагийн хичээлд:

Iterator ба Generator — давтагдах боломжтой (iterable) объект хэрхэн бүтээх, yield түлхүүр үгийг хэрхэн ашиглах талаар үзнэ.

← Өмнөх хичээлНууцлал (Encapsulation)Дараах хичээл →Iterator ба Generator