Làm cách nào để gọi chức năng xuất trong JavaScript?

Trong lập trình, các mô-đun là các đơn vị chức năng độc lập có thể được chia sẻ và sử dụng lại giữa các dự án. Chúng làm cho cuộc sống của chúng tôi với tư cách là nhà phát triển trở nên dễ dàng hơn, vì chúng tôi có thể sử dụng chúng để tăng cường các ứng dụng của mình bằng chức năng mà chúng tôi không phải tự viết. Chúng cũng cho phép chúng tôi sắp xếp và tách mã của chúng tôi, dẫn đến các ứng dụng dễ hiểu, gỡ lỗi và bảo trì hơn

Trong bài viết này, tôi sẽ kiểm tra cách làm việc với các mô-đun trong Node. js, tập trung vào cách xuất và sử dụng chúng

Các định dạng mô-đun khác nhau

Vì JavaScript ban đầu không có khái niệm về mô-đun, nhiều định dạng cạnh tranh đã xuất hiện theo thời gian. Dưới đây là danh sách những điều chính cần lưu ý

• Định dạng Định nghĩa Mô-đun Không đồng bộ [AMD] được sử dụng trong trình duyệt và sử dụng hàm

  const user = require['./user'];
  console.log[`User: ${user.getName[]}`];
  

  2 để xác định mô-đun
• Định dạng CommonJS [CJS] được sử dụng trong Node. js và sử dụng

  const user = require['./user'];
  console.log[`User: ${user.getName[]}`];
  

  3 và

  const user = require['./user'];
  console.log[`User: ${user.getName[]}`];
  

  4 để xác định các phụ thuộc và mô-đun. Hệ sinh thái npm được xây dựng dựa trên định dạng này
• Định dạng Mô-đun ES [ESM]. Kể từ ES6 [ES2015], JavaScript hỗ trợ định dạng mô-đun gốc. Nó sử dụng từ khóa

  const user = require['./user'];
  console.log[`User: ${user.getName[]}`];
  

  5 để xuất API công khai của mô-đun và từ khóa

  const user = require['./user'];
  console.log[`User: ${user.getName[]}`];
  

  6 để nhập nó
• Hệ thống. định dạng đăng ký được thiết kế để hỗ trợ các mô-đun ES6 trong ES5
• Định dạng Universal Module Definition [UMD] có thể được sử dụng cả trong trình duyệt và trong Node. js. Nó rất hữu ích khi một mô-đun cần được nhập bởi một số trình tải mô-đun khác nhau

Xin lưu ý rằng bài viết này chỉ đề cập đến định dạng CommonJS, tiêu chuẩn trong Node. js. Nếu bạn muốn đọc bất kỳ định dạng nào khác, tôi đề xuất bài viết này, của tác giả SitePoint, Jurgen Van de Moere

Yêu cầu một mô-đun

Nút. js đi kèm với một tập hợp các mô-đun tích hợp sẵn mà chúng ta có thể sử dụng trong mã của mình mà không cần phải cài đặt chúng. Để làm được điều này, chúng ta cần yêu cầu module sử dụng từ khóa

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

3 và gán kết quả cho một biến. Điều này sau đó có thể được sử dụng để gọi bất kỳ phương thức nào mà mô-đun hiển thị

Ví dụ: để liệt kê nội dung của một thư mục, bạn có thể sử dụng mô-đun hệ thống tệp và phương thức

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

8 của nó

const fs = require['fs'];
const folderPath = '/home/jim/Desktop/';

fs.readdir[folderPath, [err, files] => {
  files.forEach[file => {
    console.log[file];
  }];
}];

Lưu ý rằng trong CommonJS, các mô-đun được tải đồng bộ và được xử lý theo thứ tự xảy ra

Tạo và xuất một mô-đun

Bây giờ hãy xem cách tạo mô-đun của riêng chúng ta và xuất nó để sử dụng ở nơi khác trong chương trình của chúng ta. Bắt đầu bằng cách tạo tệp

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

9 và thêm phần sau

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

Bây giờ hãy tạo một tệp

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

00 trong cùng một thư mục và thêm tệp này

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

Chạy chương trình bằng cách sử dụng

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

01 và bạn sẽ thấy đầu ra sau cho thiết bị đầu cuối

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

0

Vì vậy, những gì đã xảy ra ở đây? . Sau đó, trong tệp

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

00, chúng tôi đang nhập chức năng này và thực hiện nó. Cũng lưu ý rằng trong câu lệnh

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

3, tên mô-đun có tiền tố là

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

07, vì đây là tệp cục bộ. Cũng lưu ý rằng không cần thêm phần mở rộng tệp

Xuất nhiều phương thức và giá trị

Chúng ta có thể xuất nhiều phương thức và giá trị theo cùng một cách

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

0

Và trong

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

00

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

2

Đoạn mã trên tạo ra cái này

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

3

Lưu ý cách chúng tôi đặt tên cho biến

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

09 đã xuất có thể là bất kỳ thứ gì chúng tôi ưa thích [trong trường hợp này là ___200]. Nó không nhất thiết phải giống với tên biến ban đầu

Các biến thể trong cú pháp

Tôi cũng nên đề cập rằng có thể xuất các phương thức và giá trị khi bạn thực hiện, không chỉ ở cuối tệp

Ví dụ

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

6

Và nhờ có nhiệm vụ phá hủy, chúng tôi có thể chọn những gì chúng tôi muốn nhập

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

7

Như bạn có thể mong đợi, nhật ký này

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

8

Xuất giá trị mặc định

Trong ví dụ trên, chúng tôi đang xuất các hàm và giá trị riêng lẻ. Điều này rất hữu ích cho các chức năng của trình trợ giúp có thể cần thiết trên một ứng dụng, nhưng khi bạn có một mô-đun chỉ xuất một thứ, thì việc sử dụng

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4 sẽ phổ biến hơn

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

0

Và trong

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

00

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

1

Đoạn mã trên ghi lại điều này

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

2

Đâu là sự khác biệt giữa

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4 và

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04?

Trong hành trình của bạn trên Web, bạn có thể bắt gặp cú pháp sau

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

3

Ở đây, chúng tôi đang chỉ định các hàm và giá trị mà chúng tôi muốn xuất sang thuộc tính

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04 trên

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

06 — và tất nhiên, điều này hoạt động tốt

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

7

Nhật ký này như sau

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

8

Vậy sự khác biệt giữa

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4 và

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04 là gì?

Chà, đại loại, nhưng không hẳn…

Để minh họa điều tôi muốn nói, hãy thay đổi mã trong

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

00 để ghi lại giá trị của

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

06

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

6

Điều này tạo ra

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

7

Như bạn có thể thấy,

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

06 có thuộc tính

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04. Hãy thêm một cái gì đó vào nó

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

8

kết quả này

const getName = [] => {
  return 'Jim';
};

exports.getName = getName;

9

Gán thuộc tính cho

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04 cũng thêm chúng vào

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4. Điều này là do [ban đầu, ít nhất]

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04 là tham chiếu đến

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4

Vậy tôi nên sử dụng cái nào?

Vì

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4 và

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

04 đều trỏ đến cùng một đối tượng, thông thường bạn sử dụng cái nào không quan trọng. Ví dụ

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

0

Mã này sẽ dẫn đến đối tượng được xuất của mô-đun là

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

29

Tuy nhiên có một lời cảnh báo. Bất cứ điều gì bạn gán cho

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

4 là những gì được xuất từ ​​mô-đun của bạn

Vì vậy, hãy làm như sau

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

1

Điều này sẽ chỉ dẫn đến một hàm ẩn danh được xuất. Biến

const user = require['./user'];
console.log[`User: ${user.getName[]}`];

31 sẽ bị bỏ qua

Nếu bạn muốn đọc thêm về sự khác biệt, tôi giới thiệu bài viết này

Sự kết luận

Các mô-đun đã trở thành một phần không thể thiếu trong hệ sinh thái JavaScript, cho phép chúng tôi soạn các chương trình lớn từ các phần nhỏ hơn. Tôi hy vọng bài viết này đã giới thiệu tốt cho bạn về cách làm việc với chúng trong Node. js, cũng như giúp làm sáng tỏ cú pháp của chúng

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, vui lòng truy cập diễn đàn SitePoint để bắt đầu thảo luận

Làm cách nào để gọi hàm xuất JavaScript?

Làm cách nào để xuất bằng JavaScript?

Chúng tôi có thể xuất hàm trong JavaScript không?

Làm cách nào để xuất hàm JavaScript từ tệp này sang tệp khác?