Javascript cơ bản: ES6 import, export các modules


Module là khái niệm mà Javascript ES6 đưa ra dùng để tách các phần code riêng rẽ với nhau ra, code trong 1 module thì chỉ chạy được trong module nếu không được export ra ngoài để dùng.

Tại sao lại sử dụng module trong Javascript

Source code viết bằng module thì việc đóng gói, bảo trì và tái sử sụng từng phần riêng rẻ của mỗi module sẽ trở nên dễ dàng hơn. Module hóa thì khi sử dụng thư viện được viết của người khác cũng trở nên dễ dàng và tránh lãng phí bộ nhớ khi ta chỉ cần load những phần cần thiết của thư viện vào code của mình thôi.

Ví dụ ta có file MyMath.js có 2 hàm cộng vào trừ, ES6 cho phép ta chỉ export 1 hàm ra ngoài là hàm cộng thôi, còn hàm trừ không cho phép dùng nơi khác thì ta làm như sau:

// MyMath.js
function cong(a, b) {
  return a + b;
}

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

export { cong };

Bây giờ muốn dùng hàm cộng này tại nơi khác thì phải làm như thế nào?
Ta sẽ dùng hàm này trong file index.js, khi load file này trên trình duyệt thì ta phải dùng <script type=”module”> và cần dùng 1 web server để chạy file index.html sau:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="index.js"></script>
  </head>
  <body></body>
</html>

ở file index.js ta sẽ import hàm cộng trong 2 dấu ngoặc nhọn {}

// index.js
import { cong } from './MyMath.js';

let result = cong(1, 2);
console.log(result);

Bay giờ nếu ta thử import thêm hàm trừ thì sẽ bị báo lỗi
Uncaught SyntaxError: The requested module ‘./MyMath.js’ does not provide an export named ‘tru’

// index.js
import { cong, tru } from './MyMath.js';

let result = cong(1, 2);
console.log(result);

Bay giờ ta muốn import mà không dùng dấu ngoặc {} thì như thế nào?
Nếu vậy khi export thì thêm default, mỗi file thì chỉ có export default 1 lần.
Giã sử ta thêm biến PI vào trong MyMath.js, export default và sử dụng ở index.js như sau:

// MyMath.js
function cong(a, b) {
  return a + b;
}

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

export { cong };

const PI = 3.1415926535;
export default PI;
// index.js
import { cong } from './MyMath.js';
import PI from './MyMath.js';

let result = cong(1, 2);
console.log(result);

console.log(PI);

Hay cách import ngắn gọn hơn là

// index.js
import PI, { cong } from './MyMath.js';

let result = cong(1, 2);
console.log(result);

console.log(PI);

Nếu ta dùng Webpack để đóng gói các file hoặc dùng require trong Node.js thì các import khác 1 chút là không cần phần mở rộng của file:

// index.js
import PI, { cong } from './MyMath';

let result = cong(1, 2);
console.log(result);

console.log(PI);

Xem thêm các bài viết sau: