Import "as" và Export "as" trong JavaScript (Đổi tên khi import/export)

Đổi tên khi Import/Export với từ khóa "as" (ES6)

Từ khóa as cho phép đổi tên khi export hoặc import, hữu ích tránh xung đột tên hoặc đặt tên rõ nghĩa hơn.

Export as

// sample.js
function testImport() { return 'Module imported'; }
function tellTime() { return new Date(); }

// Export với tên khác
export { testImport as test, tellTime };

// Hoặc export default với tên khác
export { testImport as default };

Import as

// script.js
import { test, tellTime as showTime } from './sample.js';
// test = testImport, showTime = tellTime

// Import default với tên tùy ý
import myDefault from './sample.js';

Ví dụ hoàn chỉnh (3 file)

1. sample.js

function testImport() {
    return "Module testImport đã được import";
}

function tellTime() {
    return new Date().toLocaleString('vi-VN');
}

// Export với tên khác (alias)
export { testImport as test, tellTime };

2. script.js

// Import với đổi tên
import { test, tellTime as showTime } from "./sample.js";

const resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click', () => {
    resultEle.innerHTML += test() + "
";
    resultEle.innerHTML += showTime();
});

3. index.html

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Import as / Export as</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; font-weight: 500; color: rebeccapurple; font-family: monospace; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Import as và Export as trong JavaScript</h1>
    <div class="result"></div>
    <button class="Btn">THỰC HIỆN</button>
    <h3>Nhấn nút để chạy hàm import với tên alias</h3>
    <script src="script.js" type="module"></script>
</body>
</html>

Các pattern phổ biến

1. Tránh xung đột tên

// utils/date.js
export function format() { ... }
export function parse() { ... }

// utils/string.js
export function format() { ... }
export function parse() { ... }

// main.js - import cả 2, đổi tên
import { format as formatDate, parse as parseDate } from './utils/date.js';
import { format as formatStr, parse as parseStr } from './utils/string.js';

2. Namespace import (Import tất cả thành object)

import * as DateUtils from './utils/date.js';
import * as StrUtils from './utils/string.js';

DateUtils.format();
StrUtils.format();

3. Re-export với đổi tên (Barrel file)

// index.js - gom tất cả exports
export { default as Button } from './Button';
export { default as Card } from './Card';
export { format as formatDate } from './dateUtils';
export { parse as parseDate } from './dateUtils';

4. Default export với tên cụ thể khi import

// module.js
export default function() { return 'default'; }

// main.js - tên tùy ý
import myFunction from './module.js';
import theMainFunc from './module.js';

Tóm tắt cú pháp