โมดูลจาวาสคริปต์

สารบัญ

โมดูล

โมดูล JavaScript ช่วยให้คุณสามารถแยกโค้ดของคุณออกเป็นไฟล์แยกกันได้

ทำให้ง่ายต่อการรักษาฐานรหัส

โมดูลจะถูกนำเข้าจากไฟล์ภายนอกด้วยคำสั่ง import

โมดูลยังอาศัย type="module" ในแท็ก <script>

ตัวอย่าง

<script type="module">
import message from "./message.js";
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

ส่งออก

โมดูลที่มี ฟังก์ชัน หรือ ตัวแปร สามารถจัดเก็บไว้ในไฟล์ภายนอกใดก็ได้

การส่งออกมีสองประเภท: การส่งออกที่มีชื่อ และ การส่งออกเริ่มต้น

การส่งออกที่มีชื่อ

ให้เราสร้างไฟล์ชื่อ person.js และ เติมสิ่งที่เราต้องการส่งออก

คุณสามารถสร้างการส่งออกที่มีชื่อได้สองวิธี ในบรรทัดทีละรายการหรือทั้งหมดพร้อมกันที่ด้านล่าง

ในบรรทัดทีละรายการ:

<รหัส class="w3-codespan">person.js

export const name = "Jesse";
export const age = 40;

ทั้งหมดในครั้งเดียวที่ด้านล่าง:

<รหัส class="w3-codespan">person.js

const name = "Jesse";
const age = 40;

export {name, age};

การส่งออกเริ่มต้น

ให้เราสร้างอีกไฟล์ชื่อ message.js และ ใช้เพื่อสาธิตการส่งออกเริ่มต้น

คุณสามารถมีการส่งออกเริ่มต้นในไฟล์ได้เพียงรายการเดียวเท่านั้น

ตัวอย่าง

<รหัส class="w3-codespan">message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

นำเข้า

คุณสามารถนำเข้าโมดูลลงในไฟล์ได้สองวิธี ขึ้นอยู่กับว่ามีการตั้งชื่อหรือไม่ การส่งออกหรือการส่งออกเริ่มต้น

การส่งออกที่มีชื่อจะถูกสร้างขึ้นโดยใช้เครื่องหมายปีกกา การส่งออกเริ่มต้นไม่ได้

นำเข้าจากการส่งออกที่มีชื่อ

นำเข้าการส่งออกที่มีชื่อจากไฟล์ person.js:

import { name, age } from "./person.js";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

นำเข้าจากการส่งออกเริ่มต้น

นำเข้าการส่งออกเริ่มต้นจากไฟล์ message.js:

import message from "./message.js";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

บันทึก

โมดูลใช้งานได้กับโปรโตคอล HTTP เท่านั้น

หน้าเว็บที่เปิดผ่านโปรโตคอล file:// ไม่สามารถใช้การนำเข้า/ส่งออกได้