JavaScript เวอร์ชันเก่าไม่มีการนำเข้ารวมหรือต้องการจึงมีการพัฒนาวิธีการต่าง ๆ มากมายสำหรับปัญหานี้
แต่ตั้งแต่ปี 2015 (ES6), JavaScript ได้มีโมดูล ES6มาตรฐานกับโมดูลนำเข้าใน Node.js ซึ่งได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยที่สุด
เข้ากันได้กับเบราว์เซอร์รุ่นเก่าสร้างเครื่องมือเช่นWebpackและRollupและ / หรือเครื่องมือ transpilation เช่นบาเบลสามารถนำมาใช้
โมดูล ES6
โมดูล ECMAScript (ES6) ได้รับการสนับสนุนใน Node.jsตั้งแต่ v8.5 ด้วย--experimental-modulesแฟล็กและตั้งแต่อย่างน้อย Node.js v13.8.0 ที่ไม่มีแฟล็ก ต้องการเปิดใช้งาน "ESM" (เมื่อเทียบกับก่อนหน้านี้ระบบโมดูล CommonJS สไตล์ Node.js ของ [ "CJS"]) ที่คุณใช้งานได้ทั้ง"type": "module"ในหรือให้ไฟล์นามสกุลpackage.json .mjs(ในทำนองเดียวกันโมดูลที่เขียนด้วยโมดูล CJS ก่อนหน้าของ Node.js สามารถตั้งชื่อ.cjsหากค่าเริ่มต้นของคุณคือ ESM)
การใช้package.json:
{
"type": "module"
}
จากนั้นmodule.js:
export function hello() {
return "Hello";
}
จากนั้นmain.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
ใช้.mjsคุณมีmodule.mjs:
export function hello() {
return "Hello";
}
จากนั้นmain.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
โมดูล ECMAScript ในเบราว์เซอร์
เบราว์เซอร์ได้มีการสนับสนุนสำหรับการโหลดโมดูล ECMAScript โดยตรง (เครื่องมือเช่น Webpack ไม่จำเป็นต้องใช้) ตั้งแต่ซาฟารี 10.1 Chrome 61, Firefox 60 และขอบ 16. ตรวจสอบปัจจุบันสนับสนุนที่caniuse ไม่จำเป็นต้องใช้.mjsส่วนขยายของ Node.js เบราว์เซอร์ไม่สนใจส่วนขยายไฟล์ทั้งหมดในโมดูล / สคริปต์
<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);
}
อ่านเพิ่มเติมได้ที่https://jakearchibald.com/2017/es-modules-in-browsers/
การนำเข้าแบบไดนามิกในเบราว์เซอร์
การนำเข้าแบบไดนามิกช่วยให้สคริปต์โหลดสคริปต์อื่น ๆ ตามต้องการ:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
อ่านเพิ่มเติมได้ที่https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js ต้องการ
สไตล์โมดูล CJS ที่เก่ากว่าซึ่งยังคงใช้กันอย่างแพร่หลายใน Node.js คือระบบmodule.exports/require
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
มีวิธีอื่น ๆ สำหรับ JavaScript ที่จะรวมเนื้อหา JavaScript ภายนอกในเบราว์เซอร์ที่ไม่ต้องการการประมวลผลล่วงหน้า
AJAX กำลังโหลด
คุณสามารถโหลดสคริปต์เพิ่มเติมด้วยการโทร AJAX จากนั้นใช้evalเพื่อเรียกใช้ นี่เป็นวิธีที่ตรงไปตรงมามากที่สุด แต่ถูก จำกัด ไว้ที่โดเมนของคุณเนื่องจากรูปแบบการรักษาความปลอดภัยจาวาสคริปต์ Sandbox การใช้evalยังเปิดประตูสู่ข้อบกพร่องแฮ็คและปัญหาด้านความปลอดภัย
กำลังโหลดกำลังโหลด
เช่นเดียวกับ Dynamic Imports คุณสามารถโหลดสคริปต์หนึ่งหรือหลายสคริปต์fetchโดยใช้สัญญาเพื่อควบคุมลำดับการดำเนินการสำหรับการอ้างอิงสคริปต์โดยใช้ไลบรารีFetch Inject :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
กำลังโหลด jQuery
jQueryห้องสมุดมีฟังก์ชันการโหลดในหนึ่งบรรทัด :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
การโหลดสคริปต์แบบไดนามิก
คุณสามารถเพิ่มแท็กสคริปต์ด้วย URL สคริปต์ใน HTML เพื่อหลีกเลี่ยงโอเวอร์เฮดของ jQuery นี่เป็นทางออกที่ดีที่สุด
สคริปต์สามารถอยู่ในเซิร์ฟเวอร์อื่นได้ นอกจากนี้เบราว์เซอร์จะประเมินโค้ด <script>แท็กสามารถฉีดเข้าไปในทั้งหน้าเว็บ<head>หรือแทรกก่อนปิด</body>แท็ก
นี่คือตัวอย่างของวิธีการทำงาน:
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)
}
ฟังก์ชั่นนี้จะเพิ่ม<script>แท็กใหม่ที่ส่วนท้ายของส่วนหัวของหน้าซึ่งsrcมีการตั้งค่าคุณลักษณะเป็น URL ที่กำหนดให้กับฟังก์ชั่นเป็นพารามิเตอร์แรก
ทั้งแก้ปัญหาเหล่านี้ได้รับการกล่าวถึงและแสดงในJavaScript บ้า: สคริปต์แบบไดนามิกโหลด
การตรวจจับเมื่อสคริปต์ถูกดำเนินการ
ขณะนี้มีปัญหาใหญ่ที่คุณต้องรู้ ทำอย่างนั้นก็หมายความว่าคุณได้จากระยะไกลโหลดรหัส เว็บเบราว์เซอร์สมัยใหม่จะโหลดไฟล์และดำเนินการกับสคริปต์ปัจจุบันของคุณเพราะจะโหลดทุกอย่างแบบอะซิงโครนัสเพื่อปรับปรุงประสิทธิภาพ (สิ่งนี้ใช้ได้กับทั้งวิธี jQuery และวิธีการโหลดสคริปต์แบบไดนามิกด้วยตนเอง)
หมายความว่าหากคุณใช้เทคนิคเหล่านี้โดยตรงคุณจะไม่สามารถใช้รหัสที่เพิ่งโหลดใหม่ในบรรทัดถัดไปหลังจากที่คุณขอให้โหลดเพราะมันจะยังคงโหลดอยู่
ตัวอย่างเช่น: my_lovely_script.jsประกอบด้วย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
จากนั้นคุณโหลดการกดปุ่มเพจF5อีกครั้ง และมันใช้งานได้! ทำให้เกิดความสับสน ...
ดังนั้นจะทำอย่างไรกับมัน?
คุณสามารถใช้แฮ็คที่ผู้เขียนแนะนำในลิงก์ที่ฉันให้ไว้ โดยสรุปสำหรับคนที่รีบร้อนเขาใช้เหตุการณ์เพื่อเรียกใช้ฟังก์ชันการเรียกกลับเมื่อโหลดสคริปต์ ดังนั้นคุณสามารถใส่รหัสทั้งหมดโดยใช้รีโมตไลบรารีในฟังก์ชันการโทรกลับ ตัวอย่างเช่น:
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);
}
จากนั้นคุณเขียนรหัสที่คุณต้องการใช้หลังจากที่สคริปต์โหลดในฟังก์ชั่นแลมบ์ดา :
var myPrettyCode = function() {
// Here, do whatever you want
};
จากนั้นคุณเรียกใช้ทั้งหมดที่:
loadScript("my_lovely_script.js", myPrettyCode);
โปรดทราบว่าสคริปต์อาจทำงานหลังจากโหลด DOM หรือก่อนหน้าขึ้นอยู่กับเบราว์เซอร์และระบุว่าคุณรวมบรรทัดscript.async = false;ไว้หรือไม่ มีบทความยอดเยี่ยมเกี่ยวกับการโหลด Javascript โดยทั่วไปซึ่งกล่าวถึงเรื่องนี้
การผสานซอร์สโค้ด / การประมวลผลล่วงหน้า
ตามที่กล่าวไว้ด้านบนของคำตอบนี้นักพัฒนาจำนวนมากใช้เครื่องมือ build / transpilation เช่น Parcel, Webpack หรือ Babel ในโครงการของพวกเขาช่วยให้พวกเขาใช้ไวยากรณ์ JavaScript ที่กำลังจะมาถึงให้ความเข้ากันได้ย้อนหลังสำหรับเบราว์เซอร์รุ่นเก่า ทำการแยกรหัส ฯลฯ