Cách nhập và xuất các hàm trong JavaScript
Ngày nay, JavaScript đóng một vai trò rất lớn trong việc phát triển trang web. Các nhà phát triển front-end sử dụng JavaScript để tạo các ứng dụng web tương tác. Do đó, nhu cầu về các nhà phát triển JavaScript ngày càng tăng.
Chắc chắn, JavaScript đã phát triển qua nhiều năm. ES6 đã giới thiệu nhiều tính năng mới cho ngôn ngữ này. Một trong những cách này là một cách để dễ dàng chia sẻ mã giữa các tệp JavaScript.
Nhập và xuất hàm cho JavaScript là những tính năng mới sẽ giúp bạn trở thành nhà phát triển tốt hơn. Đây là cách các tính năng này hoạt động.
Mục Lục
Mô-đun JavaScript là gì?
Mô-đun JavaScript là một tệp JavaScript chứa một bộ sưu tập mã để bạn sử dụng. Mô-đun thường được viết trong các tệp riêng biệt và được nhập bằng cách sử dụng nhập khẩu từ khóa. Nó tiết kiệm thời gian và công sức vì bạn có thể sử dụng lại sau này.
Ví dụ: nếu bạn có một hàm được gọi là tính toán ()bạn có thể đưa nó vào một tệp khác và cung cấp nó ở bất kỳ đâu trong dự án của bạn bằng cách sử dụng xuất khẩu và nhập khẩu Các chức năng JavaScript mà không có bất kỳ phiền phức nào.
Một trong những lợi ích của việc sử dụng mô-đun là nó giúp giữ cho mã của bạn có tổ chức. Nó cũng làm cho mã của bạn dễ quản lý hơn và dễ gỡ lỗi hơn.
Để sử dụng tệp JavaScript làm mô-đun, bạn cần tạo một tập lệnh trong tài liệu HTML của mình với type = “mô-đun”.
<script type="module" src="fileName.js"></script>
Có hai loại mô-đun:
- Mô-đun ECMAScript: mô-đun JavaScript tiêu chuẩn và được hỗ trợ bởi tất cả các trình duyệt chính.
- Các mô-đun CommonJS: cũ hơn và chúng không được hỗ trợ rộng rãi.
Chúng tôi sẽ tập trung vào Mô-đun ECMAScript ở đây. Nếu cần, hãy xem phần giới thiệu của chúng tôi về JavaScript để tìm hiểu những điều cơ bản.
Cách xuất các hàm trong JavaScript
Trong JavaScript, các hàm là các đối tượng hạng nhất có thể được truyền dưới dạng đối số ngoài việc được sử dụng riêng. Xuất các chức năng là một cách tốt để chuyển chúng vào các chương trình khác. Nó cũng được sử dụng khi bạn muốn tạo các thư viện có thể tái sử dụng.
Việc xuất các hàm trong JavaScript được thực hiện bằng cách sử dụng xuất khẩu hàm số. Các xuất khẩu hàm xuất một hàm đã cho để được sử dụng bởi một tệp hoặc tập lệnh khác. Bằng cách xuất các chức năng của riêng mình, chúng tôi có thể thoải mái sử dụng chúng trong các tệp hoặc tập lệnh khác mà không cần lo lắng về các vấn đề cấp phép.
Có hai cách để sử dụng xuất khẩu hoạt động hiệu quả. Chúng tôi sẽ xem xét những điều này với các ví dụ mã.
Giả sử bạn có một tệp getPersonalDetails.js có chức năng trả về tên đầy đủ của người dùng sau khi nhập dữ liệu nhanh. Hàm có dạng như sau:
function getFullName(fullName){
fullName = prompt('What is your First Name');console.log(fullName);
}
- Bạn có thể xuất chức năng này bằng cách sử dụng xuất khẩu từ khóa theo sau là tên của hàm trong dấu ngoặc nhọn. Nó trông như thế này:
export {getFullName}; - Phương pháp thứ hai là thêm xuất khẩu từ khóa ngay trước khi khai báo hàm.
export function getFullName (fullName){...}
Bạn có thể xuất nhiều hàm bằng cách sử dụng phương pháp đầu tiên. Điều này được thực hiện bằng cách bao gồm tên của các hàm mong muốn trong dấu ngoặc nhọn. Các chức năng được phân tách bằng dấu phẩy.
Ví dụ: Giả sử bạn có ba chức năng trong getPersonalDetails.js tập tin – getFullName (), getEmail (), getDob (). Bạn có thể xuất các chức năng bằng cách thêm dòng mã sau:
export {getFullName, getEmail, getDob};
Cách nhập các hàm trong JavaScript
Để sử dụng một mô-đun, trước tiên bạn cần nhập mô-đun đó. Bất kỳ hàm nào cũng có thể được nhập bằng cách sử dụng tham chiếu đường dẫn đầy đủ.
Nhập các chức năng khá đơn giản. JavaScript có một tính năng tích hợp để nhập các chức năng của riêng bạn từ các tệp khác. Nếu bạn muốn truy cập các chức năng đó từ các mô-đun khác, bạn nên đưa vào khai báo chức năng cho từng tiện ích của mình.
Một hàm cần nhập đã được xuất trong tệp gốc của nó.
Bạn có thể nhập các chức năng từ một tệp khác bằng cách sử dụng nhập khẩu chức năng từ khóa. Nhập khẩu cho phép bạn chọn phần nào của tệp hoặc mô-đun để tải.
Đây là cách bạn nhập getFullName chức năng từ getPersonalDetails.js:
import {getFullName} from './getPersonalDetails.js'Điều này sẽ làm cho chức năng này có sẵn để sử dụng trong tệp hiện tại của chúng tôi.
Để nhập nhiều hàm, các hàm cần nhập được bao gồm trong dấu ngoặc nhọn. Mỗi cái được phân tách bằng dấu phẩy (,).
import {getFullName, getEmail, getDob} from './getPersonalDetails.js'Có một cách khác để sử dụng nhập khẩu chức năng. Điều này cho phép chúng tôi nhập tất cả các bản xuất trong một tệp cụ thể. Nó được thực hiện bằng cách sử dụng nhập * dưới dạng cú pháp.
Bạn có thể nhập tất cả các mặt hàng xuất khẩu trong getPersonalDetails.js bằng cách thêm dòng mã sau:
import * as personalDetailsModule from './getPersonalDetails.js'Ở trên sẽ tạo một đối tượng có tên là PersonalDetailsModule.
Đây chỉ là một tên biến, bạn có thể đặt tên cho nó bất cứ thứ gì.
Đối tượng này chứa tất cả các lần xuất trong getPersonalDetails.js. Các chức năng được lưu trữ trong đối tượng này và có thể được truy cập theo cách bạn truy cập bất kỳ thuộc tính đối tượng nào.
Ví dụ: Chúng tôi có thể truy cập vào getFullName chức năng bằng cách thêm dòng mã sau
personalDetailsModule.getFullName();Mặc định xuất khẩu là gì?
Xuất mặc định là một chức năng xuất đặc biệt. Điều này được sử dụng nếu chỉ một biến đang được xuất từ một tệp. Nó cũng được sử dụng để tạo giá trị dự phòng cho một tệp hoặc mô-đun.
Dưới đây là một ví dụ mà chúng tôi đã sử dụng getFullName hoạt động như một mặc định:
export default function getFullName (fullName){...}Bạn không thể có nhiều hơn một giá trị làm giá trị mặc định trong mỗi mô-đun hoặc tệp.
Một Hàm được sử dụng làm mặc định được nhập khác. Đây là cách nhập getFullName hàm được sử dụng làm mặc định:
import fullName from './getPersonalDetails.js'Đây là những điểm khác biệt:
- Không có dấu ngoặc nhọn xung quanh giá trị đã nhập, Họ và tên.
- Họ và tên đây chỉ là một tên biến. Nó lưu trữ giá trị của bất kỳ chức năng mặc định nào.
Tăng cường các chức năng JavaScript của bạn
Mô-đun JavaScript là các đoạn mã có thể được sử dụng lại trong các phần khác của mã của bạn, bằng cách sử dụng các hàm JavaScript nhập và xuất. Chúng thường được viết trong các tệp riêng biệt và được nhập bằng từ khóa nhập. Một trong những lợi ích của việc sử dụng mô-đun là nó giúp giữ cho mã của bạn có tổ chức. Nó cũng làm cho mã của bạn dễ quản lý hơn và dễ gỡ lỗi hơn.