Skip to main content
0

ปกติแล้วเวลาเราเขียนโค้ด  JavaScript ก็จะรวมไว้ในไฟล์เดียว และนำไปใช้งาน แต่รู้หรือไม่ว่าเราสามารถทำการเปลี่ยนให้ไฟล์ JS ของเรากลายร่างเป็น module หรือก็คือชิ้นส่วนที่จะนำไปใช้ให้ไฟล์ JS ไฟล์อื่นเรียก หรือจะเอาไปแชร์ให้คนอื่นนำไปใช้ก็ยังได้
แล้วจริงๆ JavaScript module มันคืออะไร และทำงานยังไง ลองไปดูกัน

JavaScript module ที่ใช้กันส่วนใหญ่นั้นคือ ES module ซึ่งออกมาให้ได้ใช้กันตั้งแต่ปี 2015  โดยมีการเรียกใช้งานแบบนี้

import myModule from './modules/myModule.js';

ซึ่งการใช้งาน module นี้ก็สามารถใช้ใน Node.js ได้เช่นกันแต่จะเรียกใช้ผ่านคำสั่ง require แทน

const myModule = require(‘myModule’);

ตัวอย่างโค้ดที่จะใช้ในครั้งนี้มีโครงสร้างโปรเจ็คตามด้านล่างนี้ คือไฟล์หลักชื่อ main.js และมี module ที่จะนำมาใช้ชื่อ plant.js อยู่ในโฟลเดอร์ modules

การใช้งาน export และ import

การใช้งาน module นั้น จะต้องใช้การ ‘export ’ คู่กับ ‘import’ โดยในไฟล์ที่เราต้องการจะทำให้เป็น module เพื่อให้ไฟล์อื่นเรียกใช้เราจะต้องทำการ export 

const name = 'cactus';
function doSomething() {
    console.log("photosynthesis");
}
export {name, doSomething};

แล้วอีกไฟล์นึงเราก็ทำการ import แบบนี้

import {name, doSomething} from './modules/plant';

จะเห็นว่าเราสามารถ export ได้หลายตัวพร้อมกัน โดยค่าที่ทำการ export นั้นสามารถเป็นได้ทั้งตัวแปรและฟังก์ชัน

การเปลี่ยนชื่อตัวแปรที่จะ export หรือ import

เราสามารถเปลี่ยนชื่อตัวแปรตอนที่จะ export หรือ import ได้ ลองดูโค้ดด้านล่างนี้เป็นตัวอย่าง

const name = 'cactus';
const doSomething = function() {
    console.log("photosynthesis");
}
export {name as myFabulousName, doSomething};

จากโค้ดนี้จะเห็นว่าเราเปลี่ยนชื่อตัวแปร ‘name’ ให้เป็นชื่อ ‘myFabulousName’ ตอนที่จะทำการ export

import {myFabulousName, doSomething as doAnything} from './modules/plant';

ส่วนอันนี้เป็นการ import จะเห็นว่าเราต้อง import ชื่อตามที่ได้ตั้งไว้ตอน export คือตัวแปร ‘myFabulousName’ ส่วนตัวแปร ‘doSomething’ นั้น เราทำการเปลี่ยนชื่อที่จะไว้เรียกใช้ต่อไปในไฟล์ให้เป็น ‘doAnything’ แทนได้

ประกาศตัวแปร/ฟังก์ชันตอน export

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

export const color = "green";
export function saySomething() {
    console.log("I love water.");
}

จากโค้ดด้านบนนี้จะเห็นว่าเราสามารถแยก export หลายครั้งได้ด้วย โดยตอนเรียกใช้ก็ทำได้เหมือนปกติ

import {color, saySomething} from './modules/plant';

และแน่นอนว่าตอน import เราก็สามารถแยก import หลายครั้งได้เช่นกัน แบบนี้

import {color} from './modules/plant';
import {saySomething} from './modules/plant';

การใช้ default export/import

จากตัวอย่างที่ผ่านมาตั้งแต่ต้น ทุกครั้งที่เราจะทำการ import เราจะต้องระบุชื่อตัวแปรหรือฟังก์ชันเสมอ หมายความว่าถ้าเราไม่รู้ชื่อเราก็จะเรียกใช้งานไม่ได้ แต่ว่ายังมีสิ่งที่เรียกว่า ‘default’ ที่จะช่วยเราได้ โดยหากเราต้องการ export ค่าบางอย่างจากไฟล์ JS ของเราให้ไฟล์อื่นเรียกใช้ได้ง่ายๆ เราเพียงแค่เขียนโค้ด export แบบนี้

export default someFantasticName;

หรือแบบนี้ก็ได้ผลเหมือนกัน

export {someFantasticName as default};

เมื่อ export default แล้วเราก็ import มาใช้งานได้ง่ายๆแบบนี้เลย

import anyName from './modules/plant';

หรือแบบนี้ก็ได้

import {default as anyName} from './modules/plant';

ตอน import default นั้น เราสามารถตั้งชื่อเป็นอะไรก็ได้จากตัวอย่างคือเราใช้ชื่อ ‘anyName’ โดยค่าที่ได้จะเป็นค่าจากตัวแปร ‘someFantasticName’ ที่ export default ไว้นั่นเอง

การ import ทั้งหมด

สุดท้ายนี้ถ้าเราต้องการ import ตัวแปรหรือฟังก์ชันทุกตัวที่อีกไฟล์ได้ export ไว้ ถ้ามันมีจำนวนเยอะมาก และเรายังไม่รู้ว่าจะใช้อันไหนบ้าง แต่ก็ไม่อยากกลับมา import เพิ่มทีละตัวตอนที่จะใช้ จึงมีทางออกให้เราแบบโค้ดด้านล่างนี้

import * as plant from './modules/plant';

ตัวอย่างเวลานำไปใช้งาน เรียกใช้แบบนี้

console.log(plant.name);
console.log(plant.color);

ได้เห็นวิธีการใช้ JavaScript module แบบต่างๆกันไปแล้ว ก็ลองนำไปใช้กับโค้ดของตัวเองกันได้นะครับ น่าจะช่วยให้โค้ดที่เขียนเป็นระเบียบและจัดการได้ง่ายขึ้นแน่นอน

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า