ES6 - export & import xuất và lồng các file Javascript

Javascript - export & import

• Để 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), ta xét từng dạng để hiểu rõ hơn về export này nhé.

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 ý.

const member = {
    name = "Dương Minh Trí"
}
export default member;

import member from './member.js';
console.log(member()); 
/* ouput: "Dương Minh Trí" */

/* hoặc */
import TênBấtKỳ from './member.js';
console.log(TênBấtKỳ()); 
/* ouput: "Dương Minh Trí" */

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.

const member = {
    name = "Dương Minh Trí"
}

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: "Dương Minh Trí" */

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: "Dương Minh Trí" */
console.log(TênBấtKỳ.info()); 
/* ouput: New event */

• Tới đây ta đã biết được ES6 là gì rồi he, đồng thời cũng nắm được một số thay đổi mới trong ES6 rồi, vấn đề còn lại là cần thực hành nhiều để quen với những thay đổi này, khi đó mới dễ áp dụng vô công việc của các bạn được.

Theo https://hocwebchuan.com

Theo Học Web chuẩn.