Làm cách nào để tham chiếu một tệp javascript từ một tệp khác?

Làm cách nào bạn có thể tải một tệp JavaScript một cách đáng tin cậy và linh hoạt? . 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, bạn có thể sử dụng các công cụ xây dựng và/hoặc chuyển mã

Mô-đun ES6

Các mô-đun ECMAScript (ES6) đã được hỗ trợ trong Node. js kể từ v8. 5, với cờ 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

4. Tất cả các tệp liên quan phải có phần mở rộng 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

5

// module.mjs
export function hello() {
  return "Hello";
}

// main.mjs
import { hello } from 'module'; // or './module'
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ác 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

// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

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

Nút. js yêu cầu

Kiểu nhập mô-đun cũ, vẫn được sử dụng rộng rãi trong Node. js, là mô-đun. hệ thống xuất/yêu cầu

// index.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const index = require('./index');
let val = index.hello(); // val is "Hello"   

Có nhiều cách khác để JavaScript đưa nội dung JavaScript bên ngoài vào trình duyệt không yêu cầu tiền xử lý

Đang tải AJAX

Bạn có thể tải tập lệnh bổ sung bằng lệnh gọi AJAX rồi sử dụng 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

6 để chạy tập lệnh đó. Đâ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 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

6 cũng có thể dẫn đến lỗi, hack và các vấn đề bảo mật

Đang tải

Giống như Nhập động, bạn có thể tải một hoặc nhiều tập lệnh bằng một lệnh gọi 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

8 bằng cách sử dụng các lời hứa để kiểm soát thứ tự thực thi đối với các phần phụ thuộc của tập lệnh bằng cách sử dụng thư viện Fetch Inject 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

2jQuery Đang tải

Thư viện jQuery cung cấp chức năng tải trong một dòng

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

3Đang tải tập lệnh động

Bạn có thể thêm thẻ tập lệnh có 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

Tập lệnh 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ã. Thẻ 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

9 có thể được đưa vào trang web 

0 hoặc được chèn ngay trước thẻ đóng 

1

Đây là một ví dụ về cách nó có thể hoạt động

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

7

Hàm này sẽ thêm một thẻ 

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

9 mới vào cuối phần đầu của trang, trong đó thuộc tính 

3 đượ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. Đang tải tập lệnh động

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 như vậy 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 trực tiếp sử dụng các thủ thuật này, bạn sẽ không thể sử dụng mã mới tải của mình ở dòng tiếp theo sau khi bạn yêu cầu tải mã vì mã vẫn đang tải

Ví dụ.

4 chứa 

5

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

0

Sau đó, bạn tải lại 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 ấy 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ụ

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

1

Sau đó, bạn viết mã bạn muốn sử dụng SAU KHI tập lệnh được tải trong hàm lambda

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

2

Sau đó, bạn chạy tất cả

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

3

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à việc bạn có bao gồm dòng 

6