Kiến thức ES6 - Export và Import

​

Khái niệm:

• Để dễ làm việc, quản lý các chức năng file javascript, chúng ta thường tách các phần riêng biệt ra riêng từng file khác nhau, khi đó nhu cầu lồng ghép các function của file này vào file kia để sử dụng các function đã có là khó tránh khỏi, khi này ta sẽ sử dụng:
  • Câu lệnh export để các file chấp nhận việc xuất các function
  • Câu lệnh import để file liên kết với các function của file được export.
• Javascript - export & import có 2 dạng là theo mặc định (default), và theo tên (name)

Javascript - export theo mặc định (default)​

Khi sử dụng export default, file import sẽ không phụ thuộc vào tên function hay class, do đó có thể đặt tùy ý.

File export member.js​	File app.js import file member.js​
const member = { name = "Lê Đăng Dũng" } export default member;	import member from './member.js'; console.log(member()); /* ouput: "Lê Đăng Dũng" */ /* hoặc */ import TênBấtKỳ from './member.js'; console.log(TênBấtKỳ()); /* ouput: "Lê Đăng Dũng" */

Javascript - export theo tên (named)​

Khi sử dụng export named, bạn sẽ dễ dàng import từng function hay class theo ý muốn.

File export member.js​	File app.js import file member.js​
const member = { name = "Lê Đăng Dũng" } const info = { event = "New event" } export {member, info}	/* Import từng function, class theo tên: */ import {member, info} from './member.js'; console.log(member()); /* ouput: "Lê Đăng Dũng" */ console.log(info()); /* ouput: New event */ /* hoặc import tất cả function và class: */ import * as TênBấtKỳ from './member.js'; console.log(TênBấtKỳ.member()); /* ouput: "Lê Đăng Dũng" */ console.log(TênBấtKỳ.info()); /* ouput: New event */

Tới đây chắc mọi người cũng đã có cái nhìn tổng quan về ES6 rồi nhở, vấn đề giờ là đi vào thực hành thuii.​