Làm cách nào để nhập chức năng từ một tệp JavaScript khác?

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 đó, đã có sự gia tăng nhu cầu đối với các nhà phát triển JavaScript

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ữ. Một trong số đó là cách dễ dàng chia sẻ mã giữa các tệp JavaScript

Chức năng nhập và xuất cho JavaScript là các 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ô-đun JavaScript là gì?

Mô-đun JavaScript là một tệp JavaScript chứa một bộ mã để bạn sử dụng. Các mô-đun 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. 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 gọi là tính toánSum(), bạn có thể đưa nó vào một tệp khác và làm cho nó có sẵn ở bất kỳ đâu trong dự án của bạn bằng cách sử dụng các hàm JavaScript xuất và nhập mà không gặp bất kỳ phiền phức nào.

Một trong những lợi ích của việc sử dụng các 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 tập lệnh trong tài liệu HTML của mình với loại = "mô-đun"

 <script type="module" src="fileName.js">script>
 

Có hai loại mô-đun

1. Mô-đun ECMAScript. các mô-đun JavaScript tiêu chuẩn và được hỗ trợ bởi tất cả các trình duyệt chính
2. 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 các Mô-đun ECMAScript tại đâ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 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 sang 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

Xuất hàm trong JavaScript được thực hiện bằng hàm xuất. Hàm xuất xuất một hàm nhất định sẽ đượ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ể tự do sử dụng chúng trong các tệp hoặc tập lệnh khác mà không phải lo lắng về vấn đề cấp phép

Có hai cách để sử dụng chức năng xuất hiệu quả. Chúng ta sẽ xem xét những điều này với các ví dụ về 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ấu nhắc. Chức năng trông như thế này

 function getFullName(fullName){
            fullName = prompt('What is your First Name');
           

            console.log(fullName);
        }
 

1. Bạn có thể xuất hàm này bằng cách sử dụng từ khóa xuất theo sau là tên của hàm trong ngoặc nhọn. Nó trông như thế này.

    export {getFullName}; 

2. Cách thứ hai là thêm từ khóa export ngay trước khi khai báo hàm.

    export function getFullName (fullName){...} 

 function getFullName(fullName){
            fullName = prompt('What is your First Name');
           

            console.log(fullName);
        }
 

Cách nhập hàm trong JavaScript

Để sử dụng một mô-đun, trước tiên bạn cần nhập nó. Bất kỳ hàm nào cũng có thể được nhập bằng tham chiếu đường dẫn đầy đủ

Nhập 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

Bạn có thể nhập các hàm từ một tệp khác bằng cách sử dụng chức năng từ khóa nhập. Nhập cho phép bạn chọn phần nào của tệp hoặc mô-đun sẽ tải

Đây là cách bạn nhập chức năng getFullName của chúng tôi 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ách nhau bởi dấu phẩy (,)

 import {getFullName, getEmail, getDob} from './getPersonalDetails.js' 

Có một cách khác để sử dụng chức năng nhập. Đ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 cú pháp nhập * dưới dạng

Bạn có thể nhập tất cả các bản xuất trong getPersonalDetails của chúng tôi. 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

Đối tượng này chứa tất cả các bản xuất trong getPersonalDetails của chúng tôi. 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 hàm getFullName bằng cách thêm dòng mã sau

Xuất mặc định 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ỉ có một biến được xuất từ ​​một tệp. Nó cũng được sử dụng để tạo giá trị dự phòng cho tệp hoặc mô-đun

Dưới đây là một ví dụ mà chúng tôi đã sử dụng chức năng getFullName làm mặc định

 export default function getFullName (fullName){...} 

Hàm được sử dụng làm mặc định được nhập theo cách khác. Đây là cách nhập chức năng getFullName của chúng tôi được sử dụng làm mặc định

 import fullName from './getPersonalDetails.js' 

Dưới đây là những khác biệt

1. Không có dấu ngoặc nhọn xung quanh giá trị đã nhập, fullName
2. fullName ở đây chỉ là 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 chức năng JavaScript của bạn

Các 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 các 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

Tôi có thể gọi một hàm JS từ một tệp JS khác không?

Làm cách nào để gọi một hàm từ tệp JavaScript bên ngoài?