module ES6 và Cách sử dụng Nhập và Xuất trong JavaScript

Với ES2015 (ES6), có hỗ trợ tích hợp cho các module trong JavaScript. Giống như với CommonJS, mỗi file là module riêng của nó. Để làm cho các đối tượng, hàm, lớp hoặc biến khả dụng với thế giới bên ngoài, đơn giản là xuất chúng và sau đó nhập chúng vào những nơi cần thiết trong các file khác. Angular 2 sử dụng nhiều module ES6, vì vậy cú pháp sẽ rất quen thuộc với những người đã làm việc trong Angular. Cú pháp khá đơn giản:

Xuất khẩu

Bạn có thể xuất từng thành viên một. Những gì không được xuất sẽ không có sẵn trực tiếp bên ngoài module :

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

Hoặc bạn có thể xuất các thành viên mong muốn trong một câu lệnh duy nhất ở cuối module :

export { myNumbers, myLogger, Alligator };

Xuất với alias

Bạn cũng có thể đặt alias cho các thành viên đã xuất với từ khóa as :

export { myNumbers, myLogger as Logger, Alligator }

Xuất mặc định

Bạn có thể xác định xuất mặc định với từ khóa mặc định :

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];

export default function myLogger() {
  console.log(myNumbers, pets);
}

export class Alligator {
  constructor() {
    // ...
  }
}

Nhập khẩu

Việc nhập cũng rất đơn giản, với từ khóa nhập , các thành viên sẽ được nhập trong dấu ngoặc nhọn và sau đó là vị trí của module liên quan đến file hiện tại:

import { myLogger, Alligator } from 'app.js';

Nhập với alias

Bạn cũng có thể đặt alias thành viên tại thời điểm nhập:

import myLogger as Logger from 'app.js';

Nhập tất cả các thành viên đã xuất

Bạn có thể nhập mọi thứ được nhập bởi một module như thế này:

import * as Utils from 'app.js';

Điều này cho phép bạn truy cập vào các thành viên có ký hiệu dấu chấm:

Utils.myLogger();

Nhập một module với một thành viên mặc định

Bạn nhập thành viên mặc định bằng cách đặt tên mà bạn chọn. Trong ví dụ sau Logger là tên được đặt cho thành viên mặc định đã nhập:

import Logger from 'app.js';

Và đây là cách bạn nhập các thành viên không phải mặc định lên trên thành viên mặc định:

import Logger, { Alligator, myNumbers } from 'app.js';

Tags:

Các tin liên quan

Khám phá các hàm Async / Await trong JavaScript
2020-09-04
Giải thích về phương pháp rút gọn JavaScript
2020-09-04
filter () Phương thức mảng trong JavaScript
2020-09-03
Hiểu các hàm mũi tên trong JavaScript
2020-07-31
Cách tạo phần tử kéo và thả với Vanilla JavaScript và HTML
2020-07-27
Hiểu các chữ mẫu trong JavaScript
2020-06-30
Cách sử dụng .map () để lặp lại thông qua các mục mảng trong JavaScript
2020-05-19
Hiểu về cấu trúc hủy, tham số khôi phục và cú pháp trải rộng trong JavaScript
2020-05-12
Cách gỡ lỗi JavaScript với Google Chrome DevTools và Visual Studio Code
2020-05-08
Thanh tiến trình trang với các biến JavaScript và CSS
2020-04-16