JavaScript Module ใน 3 นาที

ปกติแล้วเวลาเราเขียนโค้ด  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 แบบต่างๆกันไปแล้ว ก็ลองนำไปใช้กับโค้ดของตัวเองกันได้นะครับ น่าจะช่วยให้โค้ดที่เขียนเป็นระเบียบและจัดการได้ง่ายขึ้นแน่นอน