M

MLOG

O'zbek

JavaScript'dagi ikki asosiy modul tizimlari – CommonJS va ES Modullari o'rtasidagi farqlarni, zamonaviy veb-ishlab chiqish uchun amaliy misollar va tushunchalar bilan o'rganing.

Modul tizimlari: CommonJS va ES Modullari – To'liq qo'llanma

JavaScript dasturlashning doimiy rivojlanib borayotgan dunyosida modullilik miqyosli va qo'llab-quvvatlanadigan ilovalarni yaratishning asosidir. Tarixan ikkita modul tizimi ustunlik qilgan: CommonJS va ES Modullari (ESM). Ularning farqlari, afzalliklari va kamchiliklarini tushunish har qanday JavaScript dasturchisi uchun juda muhim, xoh u React, Vue yoki Angular kabi freymvorklar bilan front-enda, xoh Node.js bilan back-enda ishlayotgan bo'lsin.

Modul tizimlari nima?

Modul tizimi kodni modullar deb ataladigan qayta ishlatiladigan birliklarga ajratish usulini ta'minlaydi. Har bir modul funksionallikning o'ziga xos qismini o'z ichiga oladi va faqat boshqa modullar foydalanishi kerak bo'lgan qismlarni taqdim etadi. Ushbu yondashuv kodning qayta ishlatilishini rag'batlantiradi, murakkablikni kamaytiradi va qo'llab-quvvatlashni yaxshilaydi. Modullarni qurilish bloklari kabi tasavvur qiling; har bir blokning o'ziga xos maqsadi bor va siz ularni birlashtirib, kattaroq, murakkabroq tuzilmalarni yaratishingiz mumkin.

Modul tizimlaridan foydalanish afzalliklari:

CommonJS: Node.js standarti

CommonJS server-side dasturlash uchun mashhur JavaScript ish vaqti muhiti bo'lgan Node.js uchun standart modul tizimi sifatida paydo bo'ldi. U Node.js birinchi marta yaratilganida JavaScript-da o'rnatilgan modul tizimining yo'qligini bartaraf etish uchun ishlab chiqilgan. Node.js CommonJS'ni kodni tashkil etish usuli sifatida qabul qildi. Bu tanlov JavaScript ilovalari server-side'da qanday qurilishiga katta ta'sir ko'rsatdi.

CommonJS'ning asosiy xususiyatlari:

CommonJS sintaksisi:

CommonJS qanday ishlatilishiga misol:

Modul (math.js):

// math.js
function add(a, b) {
 return a + b;
}

function subtract(a, b) {
 return a - b;
}

module.exports = {
 add: add,
 subtract: subtract
};

Foydalanish (app.js):

// app.js
const math = require('./math');

console.log(math.add(5, 3)); // Output: 8
console.log(math.subtract(10, 4)); // Output: 6

CommonJS'ning afzalliklari:

CommonJS'ning kamchiliklari:

ES Modullari (ESM): Standartlashtirilgan JavaScript modul tizimi

ES Modullari (ESM) ECMAScript 2015 (ES6) bilan joriy qilingan JavaScript uchun rasmiy standartlashtirilgan modul tizimidir. Ular kodni Node.js va brauzerda izchil va samarali tashkil etishni maqsad qilgan. ESM JavaScript tilining o'ziga mahalliy modul qo'llab-quvvatlashini olib keladi, bu esa modullikni boshqarish uchun tashqi kutubxonalar yoki qurilish vositalariga bo'lgan ehtiyojni yo'q qiladi.

ES Modullarining asosiy xususiyatlari:

ES Modullari sintaksisi:

ES Modullari qanday ishlatilishiga misol:

Modul (math.js):

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

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

// Or, alternatively:
// function add(a, b) {
//  return a + b;
// }
// function subtract(a, b) {
//  return a - b;
// }
// export { add, subtract };

Foydalanish (app.js):

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6

Nomlangan eksportlar va sukut bo'yicha eksportlar:

ES Modullari ham nomlangan, ham sukut bo'yicha eksportlarni qo'llab-quvvatlaydi. Nomlangan eksportlar moduldan bir nechta qiymatlarni ma'lum nomlar bilan eksport qilish imkonini beradi. Sukut bo'yicha eksportlar modulning sukut bo'yicha eksporti sifatida bitta qiymatni eksport qilish imkonini beradi.

Nomlangan eksport misoli (utils.js):

// utils.js
export function formatCurrency(amount, currencyCode) {
 // Format the amount according to the currency code
 // Example: formatCurrency(1234.56, 'USD') might return '$1,234.56'
 // Implementation depends on desired formatting and available libraries
 return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(amount);
}

export function formatDate(date, locale) {
 // Format the date according to the locale
 // Example: formatDate(new Date(), 'fr-CA') might return '2024-01-01'
 return new Intl.DateTimeFormat(locale).format(date);
}

// app.js
import { formatCurrency, formatDate } from './utils.js';

const price = formatCurrency(19.99, 'EUR'); // Europe
const today = formatDate(new Date(), 'ja-JP'); // Japan

console.log(price); // Output: €19.99
console.log(today); // Output: (varies based on date)

Sukut bo'yicha eksport misoli (api.js):

// api.js
const api = {
 fetchData: async (url) => {
 const response = await fetch(url);
 return response.json();
 }
};

export default api;

// app.js
import api from './api.js';

api.fetchData('https://example.com/data')
 .then(data => console.log(data));

ES Modullarining afzalliklari:

ES Modullarining kamchiliklari:

CommonJS va ES Modullari: Batafsil taqqoslash

CommonJS va ES Modullari o'rtasidagi asosiy farqlarni umumlashtiruvchi jadval:

Xususiyat CommonJS ES Modullari
Import sintaksisi require() import
Eksport sintaksisi module.exports export
Yuklash Sinxron Asinxron (brauzerlarda), Node.js'da Sinxron/Asinxron
Statik tahlil Yo'q Ha
Mahalliy brauzer qo'llab-quvvatlashi Yo'q Ha
Asosiy foydalanish holati Node.js (tarixiy) Brauzerlar va Node.js (zamonaviy)

Amaliy misollar va foydalanish holatlari

Misol 1: Qayta ishlatiladigan yordamchi modul yaratish (Xalqarolashtirish)

Aytaylik, siz bir nechta tillarni qo'llab-quvvatlashga muhtoj veb-ilova yaratmoqdasiz. Xalqarolashtirish (i18n) bilan ishlash uchun qayta ishlatiladigan yordamchi modul yaratishingiz mumkin.

ES Modullari (i18n.js):

// i18n.js
const translations = {
 'en': {
 'greeting': 'Hello, world!'
 },
 'fr': {
 'greeting': 'Bonjour, le monde !'
 },
 'es': {
 'greeting': '¡Hola, mundo!'
 }
};

export function getTranslation(key, language) {
 return translations[language][key] || key;
}

// app.js
import { getTranslation } from './i18n.js';

const language = 'fr'; // Misol: Foydalanuvchi fransuz tilini tanladi
const greeting = getTranslation('greeting', language);
console.log(greeting); // Output: Bonjour, le monde !

Misol 2: Modulli API mijozini yaratish (REST API)

REST API bilan o'zaro aloqada bo'lganda, API mantig'ini o'z ichiga oladigan modulli API mijozini yaratishingiz mumkin.

ES Modullari (apiClient.js):

// apiClient.js
const API_BASE_URL = 'https://api.example.com';

async function get(endpoint) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`);
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

async function post(endpoint, data) {
 const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 });
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 return response.json();
}

export { get, post };

// app.js
import { get, post } from './apiClient.js';

get('/users')
 .then(users => console.log(users))
 .catch(error => console.error('Foydalanuvchilarni yuklashda xato:', error));

post('/users', { name: 'John Doe', email: 'john.doe@example.com' })
 .then(newUser => console.log('Yangi foydalanuvchi yaratildi:', newUser))
 .catch(error => console.error('Foydalanuvchini yaratishda xato:', error));

CommonJS'dan ES Modullariga migratsiya qilish

CommonJS'dan ES Modullariga o'tish murakkab jarayon bo'lishi mumkin, ayniqsa katta kod bazalarida. Quyida e'tiborga olish kerak bo'lgan ba'zi strategiyalar keltirilgan:

Node.js va ES Modullari:

Node.js ES Modullarini to'liq qo'llab-quvvatlash uchun rivojlandi. Node.js'da ES Modullaridan foydalanishingiz mumkin:

To'g'ri modul tizimini tanlash

CommonJS va ES Modullari o'rtasidagi tanlov sizning o'ziga xos ehtiyojlaringizga va siz ishlab chiqayotgan muhitga bog'liq:

Xulosa

CommonJS va ES Modullari o'rtasidagi farqlarni tushunish har qanday JavaScript dasturchisi uchun juda muhimdir. CommonJS tarixan Node.js uchun standart bo'lgan bo'lsa-da, ES Modullari standartlashtirilgan tabiati, ishlash afzalliklari va statik tahlilni qo'llab-quvvatlashi tufayli ham brauzerlar, ham Node.js uchun tezda afzal tanlovga aylanmoqda. Loyihangiz ehtiyojlari va siz ishlab chiqayotgan muhitni diqqat bilan ko'rib chiqib, siz o'z talablaringizga eng mos keladigan modul tizimini tanlashingiz va miqyosli, qo'llab-quvvatlanadigan va samarali JavaScript ilovalarini yaratishingiz mumkin.

JavaScript ekotizimi rivojlanishda davom etar ekan, eng yangi modul tizimi tendentsiyalari va eng yaxshi amaliyotlar haqida xabardor bo'lib turish muvaffaqiyat uchun juda muhimdir. Ham CommonJS, ham ES Modullari bilan tajriba o'tkazishni davom eting va modulli va qo'llab-quvvatlanadigan JavaScript kodini yaratishingizga yordam beradigan turli vositalar va usullarni o'rganing.