กำหนด namespace ให้กับ JavaScript

โดยปกติแล้วภาษา JavaScript เองไม่มี namespace รองรับ (อ้างอิงจากเอกสารในปี 2020 ของ Mozilla) แต่เมื่อเราเขียนไปเรื่อยๆ ขอบเขตงานโตขึ้น โอกาสที่ชื่อ Class จะซ้ำกันมีมากขึ้น แม้จะอยู่ต่าง Folder หรือ Directory กันก็ตาม การที่จะเจอกับข้อผิดพลาด SyntaxError: redeclaration ก็ย่อมมีมากขึ้นตาม. การกำหนด namespace จะเข้ามาช่วยตรงนี้ได้ ซึ่งมันทำได้ดีมากในภาษา PHP และอื่นๆ แต่ทีนี้ JavaScript โดยตัวมันเองไม่มีรองรับ จะทำอย่างไร?

ทำความเข้าใจกับ Class ใน JavaScript ES6 (2015)

Class เป็นสิ่งที่ถูกเพิ่มเข้ามาใน JavaScript ES6 ซึ่งลักษณะการเขียนมี 2 แบบ. อย่างแรกคือ declarations, อย่างที่สองคือ expressions.

Class declarations

class Cars {
    iDrive(carName) {
        return 'I drive ' + carName;
    }
}
let CarClass = new Cars();
console.log(CarClass.iDrive('Sedan'));// ได้ I drive Sedan

Class expressions

let Cars = class {
    iDrive(carName) {
        return 'I drive ' + carName;
    }
}
let CarClass = new Cars();
console.log(CarClass.iDrive('Sedan'));// ได้ I drive Sedan

จากทั้ง 2 แบบ Cars คือชื่อ class และ iDrive คือชื่อ method วิธีการประกาศ class นั้นต่างกันแต่วิธีเรียกใช้จะเหมือนกัน.

กำหนด namespace

ข้อติดขัดเล็กน้อยสำหรับเทคนิคที่เราจะใช้ในการกำหนด namespace ให้กับ class คือเราจะประกาศ class แบบ declarations ไม่ได้ เพราะโดยหลักภาษา เราไม่สามารถเขียน class Namespace.ClassName {} ได้ ดังนั้นวิธีเดียวสำหรับการกำหนด namespace ให้กับ class แบบนี้คือใช้การประกาศ class แบบ expressions.

ตัวอย่าง

let Vehicle = {};// namespace คือ Vehicle

Vehicle.Cars = class {
    iDrive(carName) {
        return 'I drive ' + carName;
    }
}

let CarClass = new Vehicle.Cars();
console.log(CarClass.iDrive('Sedan'));// จะได้ I drive Sedan

จากตัวอย่าง Vehicle คือ namespace ที่เพิ่มเข้าไป ตัวชื่อ class คือ Cars ส่วนการเรียกใช้ก็แค่เพิ่ม Vehicle. เข้าไปเท่านั้น. ทั้งนี้หากต้องการ namespace ที่ลึกลงไปอีกหลายขั้น ตัวอย่างเช่น Vehicle.Land.Cars ก็ให้เพิ่มลงในการประกาศตัวแปรได้เลย. ตัวอย่าง.

let Vehicle = {
    Land: {}
};

Vehicle.Land.Cars = class {
    // ...
}

ใช้ Modules

JavaScript Modules ก็เป็นอีกหนึ่งความสามารถที่เพิ่มเข้ามาในรุ่น ES6 (2015) เช่นกัน. สิ่งที่ต้องเปลี่ยนเล็กน้อยในการเรียกใช้ JavaScript แบบ module คือการกำหนด type="module" ให้กับแท็ก <script> แทนที่จะเป็น type="application/javascript" เหมือนอย่างเคย.

จากตัวอย่างต่อไปนี้ สมมุติว่าไฟล์ index.html, cars.js อยู่ในโฟลเดอร์เดียวกัน.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS ES module as namespace.</title>
    </head>
    <body>
        <div id="result-placeholder"></div>
        <script type="module">
            import * as ModuleCars from './cars.js';
            let Cars = new ModuleCars.Cars();
            let outputResult= Cars.iDrive('Sedan');

            let placeholder = document.getElementById('result-placeholder');
            placeholder.innerHTML = outputResult;
        </script>
    </body>
</html>

index.html

export {Cars};

let Cars = class{
    iDrive(name) {
        return 'I drive ' + name;
    }
}

cars.js

เมื่อเปิดดูหน้าเว็บ index.html ก็จะได้ผลลัพธ์ I drive Sedan ปรากฏบนหน้าเว็บ.

ทำความเข้าใจกับ Class ใน JavaScript ES6 (2015)

Class declarations

Class expressions

กำหนด namespace

ใช้ Modules

ใส่ความเห็น ยกเลิกการตอบ