หลีกเลี่ยงมลพิษเนมสเปซ
จาวาสคริปต์ ไม่รองรับฟังก์ชัน โอเวอร์โหลด . ดังนั้น เมื่อมีการใช้ฟังก์ชันสองฟังก์ชันที่มีชื่อเดียวกัน ฟังก์ชันหนึ่งจะแทนที่ฟังก์ชันอื่นๆ โดยขึ้นอยู่กับลำดับที่ฟังก์ชันเหล่านี้โหลด ซึ่งหมายความว่าจาวาสคริปต์ไม่มี เนมสเปซ (หลักการตั้งชื่อ). อย่างไรก็ตาม เราสามารถใช้ วัตถุ เพื่อสร้างเนมสเปซเพื่อไม่ให้ชื่อชนกัน
var Tutorix = Tutorix || {}; โค้ดข้างบนบอกว่าถ้า Tutorix วัตถุมีอยู่แล้วจากนั้นใช้ มิฉะนั้น สร้างวัตถุใหม่
นอกจากนี้เรายังสามารถสร้างเนมสเปซที่ซ้อนกันซึ่งเป็นเนมสเปซภายในเนมสเปซอื่นได้
var Tutorix = Tutorix || {};
Tutorix.TeamA1 = Tutorix.TeamA1 || {}; ในบรรทัดข้างบนของโค้ดบรรทัดที่สอง แสดงว่าถ้า TeamA1 มีอยู่แล้วให้ใช้วัตถุนั้น มิฉะนั้นให้สร้าง TeamA1 . ที่ว่างเปล่า วัตถุ
ในตัวอย่างต่อไปนี้ แม้ว่าเราจะส่งพารามิเตอร์เพียง 2 รายการในไฟล์ HTML แต่เราจะได้รับพารามิเตอร์ 3 รายการในผลลัพธ์ นี่เป็นเพราะ การชนกันของเนมสเปซ ที่เกิดขึ้นระหว่าง Team1 และ Team2 (ทั้งคู่ใช้ชื่อฟังก์ชันเดียวกัน "นักเรียน ")
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
<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.
ตั้งแต่ การชนกันของเนมสเปซ เกิดขึ้นระหว่าง Teama1.js และ TeamA2.js แม้ว่าเราจะส่งพารามิเตอร์ "Rajendra" และ "prasad" เพียง 2 พารามิเตอร์เพื่อเข้าถึง TeamA1.js เราก็ได้พารามิเตอร์ 3 ตัว "Rajendra prasad undefined" ในเอาต์พุต นี่เป็นเพราะ Teama2.js ซึ่งมี 3 พารามิเตอร์ได้แทนที่ TeamA1.js .
ดังนั้นเพื่อหลีกเลี่ยง ชื่อชนกัน . ประเภทนี้ เราต้องสร้างเนมสเปซโดยใช้วัตถุ
TeamA1.js
ในโค้ดเนมสเปซต่อไปนี้ TeamA1 ถูกสร้างขึ้นโดยใช้วัตถุอื่นที่เรียกว่า Tutorix .
<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
ในโค้ดเนมสเปซต่อไปนี้ TeamA2 ถูกสร้างขึ้นโดยใช้วัตถุอื่นที่เรียกว่า Tutorix .
<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
รวมไฟล์ js (TeamA1.js และ TeamA2.js) ไว้ในไฟล์ HTML
<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
ในตัวอย่างข้างต้น เราได้ใช้เนมสเปซที่ซ้อนกัน ที่อยู่ใน Tutorix เนมสเปซที่เราซ้อน TeamA1 และ TeAMA2 เพื่อหลีกเลี่ยงชื่อชนกัน . เนื่องจากมีการหลีกเลี่ยงการชนกันของเนมสเปซ เราจึงได้ผลลัพธ์สำหรับสคริปต์แต่ละรายการ
