Video học lập trình mỗi ngày

Import và Export Modules trong JavaScript là một trong những tính năng tuyệt vời với JavaScript, tính năng này lại giúp chúng trông có vẻ như Java vậy. Nhưng lạ một chỗ là Tipjs lại chưa hề đề cập hay nói cách khác là Tipjs chưa có một bài viết nào về Import và Export ES6 này. Và ngay đây, thì tipjs sẽ trình bày về tính năng này trong bài post này.

Trước khi ES6 giới thiệu trong JavaScript về tính năng Import và Export thì ở ES5 chúng ta cũng đã từng sử dụng require() function. Giờ đây mọi chuyện cũng đã khác, và thân thiện hơn như ai đã từng code qua ngôn ngữ Java. Để tiếp cho các bạn hiểu thì, chúng ta nói sơ qua module là gì?

Module là gì?

Nói ngắn gọn và rõ ràng là... Một module là một file. Hay là "One script is one module". Những module có thể load nhiều function bởi hai keywords đặc biệt đó là Import và Export. Và đặc biệt module này có thể gọi và sử dụng một module khác. Nói về hai keywords Import và Export một chút.

• Import: cho phép import các functionality từ các module khác.
• Export: Khai báo những variables hoặc function cho phép những module khác truy cập và sử dụng

Exporting Modules JavaScript

Export trong JavaScript có hai loại phổ biến là named and default. 

# Named Export 

Trong JavaScript ES6, named export được sử dụng để xuất nhiều thứ từ một module bằng cách thêm keyword export vào khai báo của chúng. Những thứ được export sẽ được phân biệt bằng tên. Sau đó import những thứ chúng ta cần sử dụng bằng cách bao quanh chúng cặp dấu ngoặc nhọn { }. Tên của module đã nhập phải giống với tên của module đã xuất.

//-------util.js------
export function addTwoNumbers(x,y){
  return x + y
}
export let students = ['wisdom','bill','fred','grim']

# Default Export

Default Export trong Javascript ES6 chỉ cho phép xuất một mặc định cho mỗi file. Default Export có thể cho một function, class hoặc một object.

//----myFunction.js ----
export default function () {
  alert("Hello Default Export")
}

Notes: Nên nhớ rằng một module bạn có thể khai báo nhiều hơn một default export. Nhưng theo tôi, thay thế điều đó thì bạn nên sử dụng named export thì code có vẻ tường minh và giúp bạn có thể định danh code tốt hơn.

Importing Modules JavaScript

Để import một module vào một script thì bạn có thể sử dụng import. Ví dụ chúng ta có những module dùng named export thì bạn có thể import như thế này.

//----main.js---
import { addTwoNumbers, students } from 'util';

Ở đây, chúng ta khai báo import một cách rõ ràng, nhưng chúng ta cũng có thể sử dụng import theo alias như dưới đây. 

# Importing with alias

import * as util from 'util';

console.log(util.addTwoNumbers(2,13))
console.log(util.students)

Cú pháp ở đây khá đơn giản, nó dạng như thế này: import * as name from "module-name"

Ngoài ra bạn cũng có thể sử dụng alias "as" để định dạnh lại nếu chưa quen thuộc hoặc tuỳ theo dự án của mình. Nếu như bạn có một module export như thế này:

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // a list of exported variables

Thì việc định danh lại cũng không hề quá khó

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

Kết luận

Những lợi ích của ES6 mang lại cho developers quá nhiều lợi ích trong đó có việc giúp bạn sắp xếp code của chúng ta trông gọn gàng hơn rất nhiều. Trong đó có tính năng mà chúng ta vừa nói qua. Đó là import và export. Nếu bạn cảm thấy hứng thú hơn nữa thì có thể tìm hiều nhiều tính năng của ES6 ở bài trước kia mà cũng tôi đã đề cập.

Ref: 

javascript.info

codesource.io