Các phiên bản cũ của JavaScript không có nhập, bao gồm hoặc yêu cầu, vì vậy nhiều cách tiếp cận khác nhau cho vấn đề này đã được phát triển.
Nhưng kể từ năm 2015 (ES6), JavaScript đã có tiêu chuẩn mô-đun ES6 để nhập mô-đun trong Node.js, cũng được hầu hết các trình duyệt hiện đại hỗ trợ .
Để tương thích với các trình duyệt cũ hơn, hãy xây dựng các công cụ như Webpack và Rollup và / hoặc các công cụ dịch mã như Babel có thể sử dụng .
Mô-đun ES6
Các mô-đun ECMAScript (ES6) đã được hỗ trợ trong Node.js kể từ v8.5, với --experimental-modulescờ và vì ít nhất Node.js v13.8.0 không có cờ. Để bật "ESM" (so với hệ thống mô-đun kiểu CommonJS trước đây của Node.js ["CJS"]), bạn có thể sử dụng "type": "module"trong package.jsonhoặc cung cấp cho các tệp phần mở rộng .mjs. (Tương tự, các mô-đun được viết bằng mô-đun CJS trước đó của Node.js có thể được đặt tên .cjsnếu mặc định của bạn là ESM.)
Sử dụng package.json:
{
"type": "module"
}
Sau đó module.js:
export function hello() {
return "Hello";
}
Sau đó main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Sử dụng .mjs, bạn có module.mjs:
export function hello() {
return "Hello";
}
Sau đó main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
Mô-đun ECMAScript trong trình duyệt
Các trình duyệt đã hỗ trợ tải trực tiếp các mô-đun ECMAScript (không yêu cầu công cụ như Webpack) kể từ Safari 10.1, Chrome 61, Firefox 60 và Edge 16. Kiểm tra hỗ trợ hiện tại tại caniuse . Không cần sử dụng .mjstiện ích mở rộng của Node.js ; trình duyệt hoàn toàn bỏ qua phần mở rộng tập tin trên các mô-đun / tập lệnh.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Đọc thêm tại https://jakearchibald.com/2017/es-modules-in-browsers/
Nhập động trong trình duyệt
Nhập động cho phép tập lệnh tải các tập lệnh khác khi cần:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Đọc thêm tại https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js yêu cầu
Kiểu mô-đun CJS cũ hơn, vẫn được sử dụng rộng rãi trong Node.js, là module.exports/require system.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Có nhiều cách khác để JavaScript đưa nội dung JavaScript bên ngoài vào các trình duyệt không yêu cầu tiền xử lý.
Đang tải AJAX
Bạn có thể tải một tập lệnh bổ sung với một cuộc gọi AJAX và sau đó sử dụng evalđể chạy nó. Đây là cách đơn giản nhất, nhưng nó bị giới hạn trong miền của bạn do mô hình bảo mật hộp cát JavaScript. Sử dụng evalcũng mở ra cánh cửa cho các lỗi, hack và các vấn đề bảo mật.
Đang tải
Giống như Nhập khẩu động, bạn có thể tải một hoặc nhiều tập lệnh bằng một fetchcuộc gọi bằng cách sử dụng lời hứa để kiểm soát thứ tự thực hiện cho các phụ thuộc tập lệnh bằng thư viện Fetch Tiêm :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
Đang tải jQuery
Các jQuery thư viện cung cấp chức năng tải trong một dòng :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Đang tải tập lệnh động
Bạn có thể thêm thẻ tập lệnh với URL tập lệnh vào HTML. Để tránh chi phí hoạt động của jQuery, đây là một giải pháp lý tưởng.
Kịch bản thậm chí có thể nằm trên một máy chủ khác. Hơn nữa, trình duyệt đánh giá mã. Các <script>thẻ có thể được tiêm vào một trong hai trang web <head>, hoặc chèn ngay trước thẻ đóng </body>thẻ.
Đây là một ví dụ về cách thức này có thể hoạt động:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
Hàm này sẽ thêm một <script>thẻ mới vào cuối phần đầu của trang, trong đó srcthuộc tính được đặt thành URL được cung cấp cho hàm làm tham số đầu tiên.
Cả hai giải pháp này đều được thảo luận và minh họa trong JavaScript Madness: Dynamic Script Loading .
Phát hiện khi tập lệnh đã được thực thi
Bây giờ, có một vấn đề lớn bạn phải biết về. Làm điều đó có nghĩa là bạn tải mã từ xa . Các trình duyệt web hiện đại sẽ tải tệp và tiếp tục thực thi tập lệnh hiện tại của bạn vì chúng tải mọi thứ không đồng bộ để cải thiện hiệu suất. (Điều này áp dụng cho cả phương thức jQuery và phương thức tải tập lệnh động thủ công.)
Điều đó có nghĩa là nếu bạn sử dụng các thủ thuật này trực tiếp, bạn sẽ không thể sử dụng mã mới được tải của mình dòng tiếp theo sau khi bạn yêu cầu nó được tải , bởi vì nó sẽ vẫn đang tải.
Ví dụ: my_lovely_script.jschứa MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Sau đó, bạn tải lại các trang nhấn F5. Và nó hoạt động! Gây nhầm lẫn...
Vậy giờ làm gì với nó ?
Chà, bạn có thể sử dụng bản hack mà tác giả gợi ý trong liên kết tôi đưa cho bạn. Tóm lại, đối với những người vội vàng, anh ta sử dụng một sự kiện để chạy chức năng gọi lại khi tập lệnh được tải. Vì vậy, bạn có thể đặt tất cả mã bằng thư viện từ xa trong chức năng gọi lại. Ví dụ:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Sau đó, bạn viết mã bạn muốn sử dụng SAU kịch bản được tải trong hàm lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Sau đó, bạn chạy tất cả:
loadScript("my_lovely_script.js", myPrettyCode);
Lưu ý rằng tập lệnh có thể thực thi sau khi DOM được tải hoặc trước đó, tùy thuộc vào trình duyệt và liệu bạn có bao gồm dòng không script.async = false;. Có một bài viết tuyệt vời về tải Javascript nói chung về vấn đề này.
Hợp nhất / tiền xử lý mã nguồn
Như đã đề cập ở đầu câu trả lời này, nhiều nhà phát triển sử dụng (các) công cụ xây dựng / dịch mã như Parcel, Webpack hoặc Babel trong các dự án của họ, cho phép họ sử dụng cú pháp JavaScript sắp tới, cung cấp khả năng tương thích ngược cho các trình duyệt cũ hơn, kết hợp các tệp, thu nhỏ, thực hiện tách mã, v.v.