Coding Gun

Module Import/Export ใน JavaScript

การเขียน Javascript ทุกอย่างเก็บไว้ใน ไฟล์ๆเดียว จะทำให้การแก้ไขนั้นเป็นไปได้ยาก ในบทความนี้เราจะมาแนะนำวิธีการแยก Javascript ออกเป็น Module ต่างๆ เพื่อให้การแก้ไขและจัดการ JavaScript ได้ง่ายขึ้น

กำหนด Type ของ JavaScript เป็น Module

เริ่มต้นที่ index.html เราจะทำการ import JavaScript เข้ามาโดยกำหนด type=module ซึ่งการกำหนดเป็น module จะเป็นการบอก browser ว่าภายใน JavaScript ที่นำเข้ามาใช้งานอาจมีการ import JavaScript ไฟล์อื่นๆเพิ่มเข้ามาอีกก็ได้ และการกำหนด type=module จะเป็นการบอก browser ให้ Load JavaScript เข้ามาแบบ Defer (Load JavaScript แบบ Asynchronous และทำการ execute Javascript หลังจากที่แปล HTML เสร็จแล้ว จะไม่มีการหยุดการทำงานของ HTML Parser เลย)

1
2
3
4
5
6
7

<html>
    <head>
        ....
        <script type="module" src="./script.js"></script>
        ....
    </head>
</html>

ถ้าไม่ได้กำหนด type=module จะขึ้น error ว่า Can’t use import statement outside a module

แยกไฟล์ออกเป็น Module

ขั้นตอนต่อไปก็เป็นการสร้างไฟล์ Customer ขึ้นมาโดยที่ Customer.js นั้นจะสามารถ export สิ่งต่างๆเหล่านี้ออกมาได้

การ export ออกมามีได้หลายลักษณะดังนี้

Export JSON(Object)

รูปแบบแรกเป็นการ export JSON(Object) ออกมาโดยนำ keyword export ไปวางไว้หน้า object ตัวที่ต้องการ export ออกมาได้เลย 

1
2
3
4
5
6

export const customer = {
    name: "John Doe",
    age: "42",
    favoriteColor: "grey",
    Province: "Bangkok"
};

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

1
2
3
4
5
6
7
8

const customer = {
    name: "John Doe",
    age: "42",
    favoriteColor: "grey",
    Province: "Bangkok"
};

export {customer}

เราสามารถใช้ keyword default เพื่อที่จะบอกว่าเวลา export ออกไปเราจะให้มันถูกเก็บอยู่ในตัวแปรที่ชื่อว่า default ซึ่งเราจะเห็นความแตกต่างในการใช้ในหัวข่้อการ import module เข้าไปใช้งาน

1
2
3
4
5
6
7
8

const customer = {
    name: "John Doe",
    age: "42",
    favoriteColor: "grey",
    Province: "Bangkok"
};

export default customer

เวลาเรา export default จะไม่ใช้วงเล็บ เพราะสิ่งที่ return ออกไปจะอยู่ในตัวแปร default

Export Class

การ export ออกไปทั้ง class เลยจะทำให้ code นั้นมีความยืดหยุ่นกว่าการ export ออกไปทั้ง object เนื่องจากเราสามารถกำหนด parameters ที่ส่งเข้ามาให้กับ constructor เพิื่อสร้าง object ในแบบที่เราต้องการได้

1
2
3
4
5
6
7
8

class Customer{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

export {customer}

Export Functions

รูปแบบนี้เป็นการเลือก export ออกมาแค่บาง function เท่านั้น ไม่ได้ต้องการทั้ง object โดยเราอาจแค่อยากให้เรียกใช้งานเฉพาะบาง function หรือ เราอาจมี code เก่าที่เขียนด้วย JavaScript ES5 ที่เป็น function อย่างในตัวอย่างนี้

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function getCustomer(){
    return {
    name: "Jenny Doe",
    age: "35",
    favoriteColor: "grey",
    Province: "Bangkok"
    }
}

function getNextCustomer() {
    return {
        name: "Jack Doe",
        age: "25",
        favoriteColor: "grey",
        Province: "Bangkok"
    }
}

export {getCustomer, getNextCustomer}

Export Anonymous Function

การ export anonymous function ออกมาใช้ในกรณีที่เราต้องการ export ทั้ง context ออกมาเลยโดยที่ไม่ได้อยากตั้งชื่อให้มันซ้ำซ้อน โดยเราจะ export แบบนี้

1
2
3
4
5
6
7
8

export default () => {
    return {
        name: "John Doe",
        age: "42",
        favoriteColor: "grey",
        Province: "Bangkok"
    }
}

Import JavaScript Module

ในไฟล์ script.js(ที่ Load เข้ามาใน index.html) เราจะ import เอา JavaScript Module เข้ามาใช้งานซึ่งจะมีกี่ Module ก็ได้

1

import {customer} from './customer.js';

หลัง from จะเป็น relative path ไปยัง JavaScript Module ที่อาจวางไว้ใน sub-folder ย่อยๆลงไปก็ได้ ในตัวอย่างนี้่ใช้ ./customer.js เพราะ scirpt.js กับ cusotmer.js อยู่ใน folder เดียวกัน

ถ้าหลังจาก from เริ่มต้นด้วย “/” จะใช้การกำหนด path แบบ absolute path ซึ่งจะเริ่มต้นที่ root

ในตัวอย่างนี้เราแค่ import Customer.js เข้ามาเพียง module เดียวเท่านั้น แต่ในการใช้งานจริงเราสามารถ Load JavaScript Module อื่นๆเข้ามาอีกกี่ตัวก็ได้

ถ้าเราต้องการเปลี่ยนชื่อ object ที่ export ออกมาให้เป็นชื่ออื่นสามารถใช้ keyword as ได้ ยกตัวอย่างเช่น ถ้าเราต้องการจะเปลี่ยนจาก customer เป็น member เราจะเขียนแบบนี้

1

import {customer as member} from './customer.js';

หรือเราสามารถ import แบบ * ก็ได้ การ import แบบ * JavaScript จะทำการเก็บทุกสิ่งที่ export ออกมาจาก customer.js ไปไว้ในตัวแปรที่เราตั้งขึ้น เช่น ในตัวอย่างเราจะนำทุกอย่างที่ export ออกมาไปไว้ในตัวแปรชื่อ member

1

import * as member from './customer.js';

Import Constant

เวลาเราเรียกใช้งาน ถ้าเรา export constant ออกมาเราจะเรียกแบบนี้ 

1
2
3

import {customer as member} from './customer.js';

const customer = member

ถ้าเราใช้ export default customer จะต้องเขียนแบบนี้ 

1
2
3

import * as member from './customer.js';

const customer = member.default

Import Class

ถ้าเรา export ออกมาเป็น class เราจะเรียกใช้แบบนี้ 

1
2
3

import * as member from './customer.js';

const jim = new member.Customer('Jim Doe', 45)

Import Function

ถ้าเรา export ออกมาเป็น function เราจะเรียกแบบนี้ 

1
2
3
4

import * as member from './customer.js';

const jenny = member.getCustomer();
const jack = member.getNextCustomer();

Import Anonymous Function

และถ้าเรา export anonymous function ออกมาเราจะต้องเรียกแบบนี้ 

1
2
3

import * as member from './customer.js';

const customer = member.default();

เราจะใช้การ export anonymous function ออกมาเก็บไว้ในตัวแปรที่ชื่อ default แล้วก็ทำการ execute anonymous function นี้ทันทีเราเลยต้องมี วงเล็บต่อท้าย default

Phanupong Permpimol
Follow me