Cum sa folosesti module in JavaScript

In this tutorial, you'll learn about Cum sa folosesti module in JavaScript. We cover key concepts, practical examples, and best practices.

Modulele in JavaScript permit impartirea codului in fisiere separate, fiecare cu propriul scop. Acest ghid iti arata cum sa folosesti import si export pentru cod modular.

Quick Fix

1. Exportul numit (named export)

Exporta mai multe valori dintr-un fisier:

// math.js
export const PI = 3.14159;

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

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

2. Importul numit (named import)

Importa doar ce ai nevoie:

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

console.log(add(5, 3));
console.log(PI * 2);

8
6.28318

3. Exportul default

Fiecare modul poate avea un singur export default:

// user.js
export default class User {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Salut, sunt ${this.name}`;
    }
}

// utils.js
export default function formatDate(date) {
    return date.toISOString().split('T')[0];
}

4. Importul default

Importa exportul default fara acolade:

import User from './user.js';
import formatDate from './utils.js';

const user = new User('Ion');
console.log(user.greet());
console.log(formatDate(new Date()));

Salut, sunt Ion
2025-01-15

5. Importul combinat si redenumirea

Poti importa default si named impreuna, si redenumi:

import User, { PI as mathPI, add } from './user.js';
import * as math from './math.js';

console.log(math.add(10, 20));
console.log(math.PI);

30
3.14159

6. Re-exportul

Un modul poate re-exporta din alte module pentru a crea puncte de intrare centralizate:

// index.js
export { add, multiply } from './math.js';
export { default as User } from './user.js';
export { default as formatDate } from './utils.js';

// app.js
import { add, User, formatDate } from './index.js';

Prevention

• Foloseste export default pentru clasa/functia principala a modulului
• Foloseste named exports pentru utilitare si constante
• Nu crea dependente circulare intre module
• Foloseste extensia .js in importuri (sau .mjs pentru ES modules stricte)

Common Mistakes

1. A uita extensia fisierului -- import { x } from './math' trebuie sa fie './math.js' in browser
2. A folosi acolade la import default -- import { User } cauta un named export; default se importa fara acolade
3. A crea export default si named cu acelasi nume -- default si named sunt spatii de nume separate
4. A muta obiectul importat -- importurile sunt read-only; nu poti reatribui variabilele importate
5. A nu sti ca importurile sunt hoisted -- importurile sunt mutate automat la inceputul fisierului

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP si Durga Antivirus Pro. Instrumentele DodaTech se integreaza perfect cu JavaScript pentru productivitate si securitate sporite.