Trong bài viết này, chúng tôi sẽ thảo luận về cách đưa tệp javascript vào tệp javascript khác. Chúng ta sẽ đi sâu vào nhập và xuất các mô-đun trong javascript
Mô-đun ES6 là gì?
Trong thời kỳ đầu của web, vai trò của JavaScript chỉ giới hạn ở việc xác thực biểu mẫu và cung cấp một chút tính tương tác, vì vậy không cần các tập lệnh lớn
Ngày nay, JavaScript đã trở thành ngôn ngữ chính để phát triển các ứng dụng web, bao gồm cả backend và frontend. Do đó, kích thước của các chương trình JS cũng tăng theo cấp số nhân, khiến việc quản lý mã trở nên khó khăn hơn
Điều này thúc đẩy việc sử dụng hệ thống mô-đun, một cách để chia mã thành nhiều tệp và thư mục nhưng vẫn đảm bảo tất cả các đoạn mã có thể truy cập lẫn nhau
Vì các phiên bản cũ của JavaScript không có hệ thống mô-đun riêng nên nhiều thư viện JavaScript đi kèm với hệ thống mô-đun riêng của chúng. Ví dụ - CommonJS và RequireJS
JavaScript đã giới thiệu một hệ thống mô-đun riêng trong ES6 [ECMAScript 6 - tên chính thức của JavaScript] được gọi là Mô-đun ES6
Mô-đun ES6 chỉ là một tệp chứa mã JS với hai đặc điểm
- Nó tự động ở chế độ nghiêm ngặt. điều này cấm sử dụng các lỗi cẩu thả trong mã, chẳng hạn như sử dụng các biến mà không xác định
- Bạn có thể sử dụng từ khóa nhập hoặc xuất bên trong nó. cung cấp một cách để chia sẻ mã với các tệp khác
Hãy thảo luận về các cách khác nhau để đạt được tính mô-đun và tìm hiểu cách nhập tệp JS vào tệp JS
Lấy đi
Mô-đun ES6 là một tệp JS có thể xuất mã của nó để chia sẻ với các tệp khác cũng như nhập và sử dụng mã từ các tệp JS khác
Các cách phổ biến để bao gồm một tệp JavaScript trong một tệp JavaScript khác
Trong phần này, chúng ta sẽ tìm hiểu về hai cách phổ biến để bao gồm một tệp JS trong một tệp JS khác
- Sử dụng mô-đun ES6
- Sử dụng chức năng yêu cầu Node JS
Sử dụng nhập/xuất. mô-đun ES6
Hãy bắt đầu bằng cách sử dụng cách nhập và xuất ES6. Tạo một tệp có tên utils. js và định nghĩa hàm sau và hằng số bên trong nó
export function greet[name] { return `Hello, ${name}`; } export const message = "How you doing?";Lưu ý rằng chúng ta đã sử dụng từ khóa export trước hàm và biến để xác định rằng các đối tượng này có thể được sử dụng bởi các tệp khác
Xin chào, ${name} là một mẫu chữ trong JavaScript. Nó cho phép chúng ta nhúng các biến bên trong một chuỗi bằng cách sử dụng cú pháp $ và {}
Bây giờ, tạo một tệp khác có tên chính. js và viết đoạn mã sau vào đó
import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Trong dòng đầu tiên, chúng tôi đang nhập lời chào và tin nhắn từ utils. js bằng cách chỉ định chúng bên trong dấu ngoặc nhọn {}.
Sau dòng này, chúng ta có thể sử dụng các đối tượng đã nhập vì chúng được định nghĩa trong cùng một tệp. Sau đó, bảng điều khiển của chúng tôi đã ghi lại đầu ra của cả hai đối tượng.Cú pháp ES6 để nhập. nhập {đối tượng1, đối tượng2,. } từ 'tên tệp. js'
Nếu bạn định sử dụng các mô-đun ES6 trong môi trường nút js, hãy nhớ đặt tên cho các tệp của bạn bằng. tiện ích mở rộng mjs hoặc đặt "loại". "mô-đun" trong gói. tập tin json
Sử dụng xuất mặc định
Chúng ta có thể sử dụng từ khóa default để xuất một đối tượng theo mặc định từ một tệp. Điều đó có nghĩa là gì? . Tạo chức năng chào trong utils. js xuất mặc định bằng cách thêm mặc định trước nó
export default function greet[name] { return `Hello, ${name}`; }Bây giờ, bạn có thể nhập nó vào chính. js như thế này
import randomName from "./utils.js"; const greet_scaler = randomName["Scaler"]; console.log[greet_scaler]; // Hello, ScalerNó sẽ hoạt động giống như trước đây
Trong khi thực hiện xuất mặc định, RandomName được nhập từ lời chào. js. Vì RandomName không có trong utils. js, xuất mặc định [trong trường hợp này là lời chào[]] được xuất dưới dạng Random_name
Lưu ý 📝
Hãy thảo luận về một số điểm quan trọng liên quan đến các mô-đun ES6 mà người ta nên nhớ khi sử dụng chúng
Chúng tôi phải xóa các dấu ngoặc nhọn khi nhập các bản xuất mặc định.
Ví dụ, nếu chúng ta đã giữ các dấu ngoặc nhọn trong ví dụ RandomName ở trên như thế này.import { randomName } from "./utils.js";Nó sẽ đưa ra một lỗi nói rằng không có xuất như vậy tồn tại
Một tệp có thể chứa nhiều lần xuất. Tuy nhiên, chúng tôi chỉ có thể xác định một lần xuất mặc định duy nhất trong một tệp.
Do đó mã JavaScript sau không hợp lệ ❌.export default function greet[name] { return `Hello, ${name}`; } export default defaultMessage = "Not Possible"; export const message = "How you doing?";Chúng tôi không thể sử dụng tên bí danh khi nhập xuất bình thường.
Do đó, lần nhập sau không hợp lệ ❌.import { randomMessage } from "./utils.js";Chúng tôi phải sử dụng cùng một tên khi nhập xuất thông thường
Chúng ta có thể kết hợp xuất mặc định và bình thường như thế này
import defaultExport, {export1, export2} from "file.js"Lưu ý, chúng tôi đã sử dụng {} để xuất có tên [bình thường] và đặt xuất mặc định không có {}
Chúng tôi có thể nhập toàn bộ nội dung của mô-đun bằng cách sử dụng *
Sau đó, bạn có thể truy cập tất cả quá trình xuất bằng cách sử dụng mô-đun dưới dạng không gian tên
Bạn có thể xuất tất cả các đối tượng cùng nhau ở cuối tệp Ví dụ
function greet[name] { return `Hello, ${name}`; } const message = "How you doing?"; export { greet, message };Bạn có thể đổi tên xuất khẩu và nhập khẩu
- Ví dụ đổi tên xuất khẩu.
0và trong tệp nhập.import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?
1import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing? - Ví dụ về đổi tên nhập khẩu.
2và trong tệp xuấtimport { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?
Điều này có thể giúp quản lý xung đột tên giữa các lần nhập tương tự
- Ví dụ đổi tên xuất khẩu.
Bây giờ, chúng ta sẽ xem cách chạy các mô-đun ES6 này bên trong trình duyệt
Sử dụng các mô-đun ECMAScript [ES6] trong trình duyệt
Hầu hết các trình duyệt hiện đại như chrome, safari và firefox đều hỗ trợ chạy trực tiếp các mô-đun ES6. Hãy thử chạy các mô-đun đã tạo trước đó trong trình duyệt
Trong phần trước, chúng tôi đã tạo hai tệp JS với mã sau
- đồ dùng. js_______0
- chủ yếu. js
4import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?
trong chính. js, chúng tôi đã nhập và sử dụng một hàm từ utils. js bằng cách sử dụng từ khóa nhập khẩu
Bây giờ, chúng tôi muốn chạy chính. js bằng trình duyệt bằng cách liên kết chính. js thành tệp HTML
Do đó, hãy tạo một chỉ mục. html và bao gồm tệp chính. js kịch bản như sau
5import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Chúng ta cần thuộc tính type="module" trong
Bây giờ giữ các tiện ích. js như sau
6import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Và thêm đoạn mã sau vào chính. js
7import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Giải thích $ là bí danh của đối tượng jQuery, chúng tôi sử dụng nó để truy cập các chức năng khác nhau do jQuery cung cấp. Ở đây, chúng tôi đang chuyển đường dẫn của tệp JS tới hàm getScript. Hàm getScript sẽ thực thi mã của utils. js và trả về dữ liệu [văn bản của utils. js] trong hàm gọi lại. Bên trong chức năng gọi lại, chúng tôi đang xử lý dữ liệu của tệp
Hàm gọi lại là một hàm được truyền vào một hàm khác dưới dạng đối số, sau đó hàm này được gọi bên trong hàm bên ngoài để hoàn thành một số loại quy trình hoặc hành động
Đây là đầu ra cho đoạn mã trên
Lấy đi
- jQuery cung cấp hàm getScript để tải và thực thi một tệp JS trong một tệp JS khác
Đang tải tập lệnh động
Chúng ta có thể tránh việc sử dụng hàm getScript của jQuery bằng cách tự chèn một thẻ script
Đây là cách bạn sẽ làm điều đó trong phần chính. tập tin js
8import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Giải thích Chúng tôi đã tạo một thẻ tập lệnh và đặt thuộc tính nguồn của nó thành đường dẫn của tệp JavaScript. Sau đó, chúng tôi đã thêm thẻ script vào phần tử nội dung.
Kiểm tra bảng điều khiển ngay bây giờ và bạn sẽ thấy đầu ra giống như trước đây.Trong ví dụ trên, chúng tôi đã bao gồm một tệp JS duy nhất trong tệp chính. js, chúng ta có thể làm tương tự với nhiều tệp
Tạo một tập tin đầu tiên. js với đoạn mã sau
9import { greet, message } from "./utils.js"; const greet_scaler = greet["Scaler"]; console.log[greet_scaler]; // Hello, Scaler console.log[message]; // How you doing?Tạo một tệp khác thứ hai. js như sau
0export default function greet[name] { return `Hello, ${name}`; }Bây giờ, trong chính. js, bạn có thể bao gồm cả hai tệp như sau
1export default function greet[name] { return `Hello, ${name}`; }Đó là mã giống như trước đây nhưng bây giờ trong một chức năng. Làm cho nó dễ dàng hơn để gọi nó nhiều lần. Bạn chỉ cần bao gồm chính. js trong HTML, hai tệp còn lại sẽ tự động được đưa vào
Lấy đi
Chúng ta có thể tự động chèn thẻ tập lệnh bằng cách sử dụng thao tác DOM để tải và thực thi tệp JS mà không cần jQuery
Phát hiện khi tập lệnh đã được thực thi
Hiện tại, đã xảy ra sự cố với giải pháp trên [Tải tập lệnh động]. Nếu chúng tôi cố gắng truy cập một biến từ tệp đã nhập ngay sau khi thêm nó vào HTML, chúng tôi sẽ gặp lỗi vì trình duyệt tải các tệp JS không đồng bộ [đồng thời] để cải thiện hiệu suất
Ví dụ: nếu đây là tiện ích. tập tin js
2export default function greet[name] { return `Hello, ${name}`; }Và chúng tôi đang cố gắng truy cập hằng số tin nhắn trong chính. js như thế này
3export default function greet[name] { return `Hello, ${name}`; }Chúng tôi sẽ gặp phải lỗi sau
4export default function greet[name] { return `Hello, ${name}`; }Để giải quyết vấn đề này, chúng ta phải đảm bảo rằng mọi mã trong chính. js sử dụng các đối tượng từ utils. js được chạy sau khi tệp được tải.
Đối với điều này, chúng ta có thể sử dụng chức năng gọi lại trên thuộc tính onload của thẻ script.5export default function greet[name] { return `Hello, ${name}`; }Dòng chính ở đây là. scriptTag. onload = gọi lại;. Hàm gọi lại chỉ được gọi khi tập lệnh được tải. Bây giờ, đầu ra sẽ chính xác
Làm cách nào để nhập hàm từ các tệp khác trong JavaScript?
Trả lời. Sử dụng Tuyên bố xuất và nhập .Bạn có thể nhập hàm trong JavaScript không?
Có thể nhập bất kỳ chức năng nào 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.Làm cách nào để sử dụng một chức năng từ một tệp khác trong JavaScript React?
Cách nhập hàm từ một tệp khác trong React. Xuất hàm từ file A , e. g. hàm xuất sum[] {}. Nhập hàm trong tệp B dưới dạng import {sum} from '. /another-file'. Sử dụng hàm đã nhập trong tệp B.Làm cách nào để gọi một hàm từ một trang khác trong JavaScript?
Gọi một hàm bằng tệp JavaScript bên ngoài . Khi tệp JavaScript được tạo, chúng ta cần tạo một tài liệu HTML đơn giản. Để đưa tệp JavaScript của chúng tôi vào tài liệu HTML, chúng tôi phải sử dụng thẻ scriptChủ Đề