MohirDox

Ko'rinishi

JavaScript Modullari (Modules) ​

Modullar — bu kodni alohida bo'laklarga bo'lish, ulardan bir qismini eksport qilish (tashqariga chiqarish) va boshqa joyda import qilish (chaqirib olish) imkonini beruvchi mexanizmdir.

Modul nima?

Modullar kodni kichik, tushunarli va qayta ishlatiladigan fayllarga bo'lishga yordam beradi. Modern JavaScript-da modullar ES6 (ECMAScript 2015) bilan birga kirib kelgan.

Modullar qanday ishlaydi? ​

Modul tizimi ikkita asosiy tushunchaga tayanadi:

  1. Export: Funksiya, o'zgaruvchi yoki klassni boshqa fayllar ishlata olishi uchun "ochib qo'yish".
  2. Import: Boshqa faylda ochib qo'yilgan (export qilingan) kodni chaqirib olish.

Misol: ​

js
// math.js (Eksport qiluvchi fayl)
export function add(a, b) {
  return a + b
}

// main.js (Import qiluvchi fayl)
import { add } from './math.js'
console.log(add(2, 3)) // 5

Modul turlari ​

JavaScript-da modul odatda alohida .js fayli bo'ladi. Uni HTML ichida ishlatish uchun <script> tegida type="module" atributini ko'rsatish shart:

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

Muhim eslatma

Modullar faqat HTTP(s) protokoli orqali ishlaydi. Ya'ni, siz faylni brauzerda to'g'ridan-to'g'ri ochsangiz (file://), modullar ishlamasligi mumkin. Ularni serverda (masalan, Live Server orqali) ishlatish tavsiya etiladi.

Nega Modullardan foydalanish kerak? ​

  1. Kodni tartiblash: Katta loyihalarni kichik bo'laklarga bo'lib boshqarish oson.
  2. Nomlar to'qnashuvini oldini olish: Har bir modul o'zining "xususiy" (private) qobig'iga ega. Bir fayldagi o'zgaruvchi boshqa fayldagisi bilan adashib ketmaydi.
  3. Qayta ishlatish (Reusability): Bir marta yozilgan kodni bir nechta loyihalarda ishlatish mumkin.
  4. Strict Mode: Modullar avtomatik ravishda use strict (qat'iy rejim)da ishlaydi.

Eksport turlari ​

JavaScript-da ikkita asosiy eksport turi mavjud:

  • Named Export: Nomlangan eksport (bir nechta bo'lishi mumkin).
  • Default Export: Standart eksport (faylda faqat bitta bo'ladi).

Misol (Default export): ​

js
// message.js
const message = () => 'Salom, dunyo!'
export default message

// main.js
import message from './message.js'
Batafsil ma'lumot

Modullarni yanada chuqurroq o'rganish uchun quyidagi bo'limlarga o'ting: