Bài này Thế giới JS share cho ae một kỹ thuật khó trong javascript đó là cách include file js vs file js khác. Trong JavaScript gốc trước khi Mô-đun ES6 2015 được giới thiệu không có chức năng import, include(bao gồm) hoặc yêu cầu(require). Trước đó, chúng ta có thể tải một tệp JavaScript vào một tệp JavaScript khác bằng cách sử dụng thẻ script bên trong DOM, tập lệnh đó sẽ được tải xuống và thực thi ngay lập tức.
Bây giờ sau khi phát minh ra các mô-đun ES6, có rất nhiều cách tiếp cận khác nhau để giải quyết vấn đề này đã được phát triển và thảo luận bên dưới.
Mô-đun ES6: Mô-đun ECMAScript (ES6) đã được hỗ trợ trong Node.js kể từ v8.5. Trong mô-đun này, chúng tôi định nghĩa các hàm đã xuất trong một tệp và import chúng trong một ví dụ khác.
Có hai cách phổ biến để gọi tệp JavaScript từ một chức năng khác được liệt kê bên dưới:
- Kỹ thuật Ajax
- nối các tập tin
Ví dụ về kỹ thuật Ajax:
- Tệp JavaScript bên ngoài có tên là “main.js”
// This alert will export in the main file
alert("Hello vpsus")
- Tệp main: Tệp này sẽ import tệp “main.js” ở trên
<!DOCTYPE html>
<html>
<head>
<title>
Calling JavaScript file from
another JavaScript file
</title>
<script type="text/javascript">
var script = document.createElement('script');
script.src =
"https://media.vpsus.us/wp-content/uploads/20190704153043/main.js";
document.head.appendChild(script)
</script>
</head>
<body>
</body>
</html>
Nối các tệp Ví dụ: Tại đây import nhiều tệp JavaScript vào một tệp JavaScript duy nhất và gọi tệp main JavaScript đó từ một hàm.
- Tệp JavaScript bên ngoài có tên là “main.js”
// This alert will export in the main file
alert("Hello vpsus")
- Tệp JavaScript bên ngoài “second.js”
// This alert will export in the main file
alert("Welcome to vpsus")
- Tệp JavaScript bên ngoài “master.js”
function include(file) {
var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;
document.getElementsByTagName('head').item(0).appendChild(script);
}
/* Include Many js files */
include('https://media.vpsus.vn/wp-content/uploads/20190704153043/main.js');
include('https://media.vpsus.vn/wp-content/uploads/20190704162640/second.js');
- Tệp main: Tệp này sẽ import vào tệp “master.js” ở trên
src="https://media.vpsus.vn/wp-content/uploads/20190704162730/master.js">
Trên đây là tất cả những gì về include một tệp trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới include một tệp, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
