วิธีหลีกเลี่ยง Namespace Pollution ใน JavaScript

การหลีกเลี่ยง Namespace Pollution

JavaScript ไม่รองรับ function overloading เมื่อมีฟังก์ชันชื่อซ้ำ ตัวหลังจะ override ตัวก่อน ขึ้นกับลำดับโหลด หมายความว่า JS ขาด namespaces แต่เราสามารถใช้ objects สร้าง namespaces ป้องกัน name collision

var Tutorix = Tutorix || {};

โค้ดบรรทัดนี้หมายถึง: ถ้า Tutorix object มีอยู่แล้ว ใช้มัน มิฉะนั้นสร้างใหม่

สามารถสร้าง nested namespaces ได้ (namespace ใน namespace)

var Tutorix = Tutorix || {}; 
Tutorix.TeamA1 = Tutorix.TeamA1 || {};

บรรทัดที่ 2: ถ้า TeamA1 มีอยู่ ใช้มัน มิฉะนั้นสร้าง TeamA1 ว่าง

ตัวอย่างปัญหา: ส่ง 2 พารามิเตอร์ แต่ได้ 3 พารามิเตอร์ใน output เนื่องจาก namespace collision ระหว่าง Team1 และ Team2 (ใช้ชื่อฟังก์ชัน "student" เหมือนกัน)

TeamA1.js (ก่อนแก้)

<html> <body> <script> 
    function student(Fname, Lname){ 
        this.Fname = Fname; 
        this.Lname = Lname; 
        this.getFullName = function(){ 
            return this.Fname + " " + this.Lname; 
        } 
    } 
</script> </body> </html>

TeamA2.js (ก่อนแก้)

<html> <body> <script> 
    function student(Fname, Mname, Lname){ 
        this.Fname = Fname; 
        this.Mname = Mname; 
        this.Lname = Lname; 
        this.getFullName = function(){ 
            return this.Fname + " " + this.Mname + " " + this.Lname; 
        } 
    } 
</script> </body> </html>

HTML File (ก่อนแก้)

<html> <head> 
    <script type="javascript" src="TeamA1.js"></script> 
    <script type="javascript" src="TeamA2.js"></script> 
</head> <body> 
    <div id="resultDiv"></div> 
    <script> 
        document.getElementById("resultDiv").innerHTML = new student("Rajendra", "prasad").getFullName(); 
    </script> 
</body> </html>

ผลลัพธ์ (ก่อนแก้)

Rajendra prasad undefined.

เนื่องจาก TeamA2.js (3 พารามิเตอร์) override TeamA1.js (2 พารามิเตอร์)

แก้ไขด้วย Namespace

TeamA1.js (หลังแก้)

<html> <body> <script> 
    var Tutorix = Tutorix || {}; 
    Tutorix.TeamA1 = Tutorix.TeamA1 || {}; 
    Tutorix.TeamA1.student = function (Fname, Lname){ 
        this.Fname = Fname; 
        this.Lname = Lname; 
        this.getFullName = function(){ 
            return this.Fname + " " + this.Lname; 
        } 
        return this; 
    } 
</script> </body> </html>

TeamA2.js (หลังแก้)

<html> <body> <script> 
    var Tutorix = Tutorix || {}; 
    Tutorix.TeamA2 = Tutorix.TeamA2 || {}; 
    Tutorix.TeamA2.student = function (Fname, Mname, Lname){ 
        this.Fname = Fname; 
        this.Mname = Mname; 
        this.Lname = Lname; 
        this.getFullName = function(){ 
            return this.Fname + " " + this.Mname + " " + this.Lname; 
        } 
        return this; 
    } 
</script> </body> </html>

HTML File (หลังแก้)

<html> <head> 
    <script type="javascript" src="TeamA1.js"></script> 
    <script type="javascript" src="TeamA2.js"></script> 
</head> <body> 
    <script> 
        document.write(window.Tutorix.TeamA1.student("Rajendra", "prasad").getFullName()); 
        document.write(window.Tutorix.TeamA2.student("Babu", "Rajendra", "prasad").getFullName()); 
    </script> 
</body> </html>

ผลลัพธ์ (หลังแก้)

Rajendra prasad Babu Rajendra prasad

ใช้ nested namespaces ใน Tutorix มี TeamA1 และ TeamA2 ป้องกัน name collision ได้ผลลัพธ์ถูกต้องทั้งคู่