네임스페이스 오염 방지
자바스크립트 함수 오버로딩을 지원하지 않음 . 따라서 동일한 이름을 가진 두 함수가 사용되면 이러한 함수가 로드되는 순서에 따라 한 함수가 다른 함수를 재정의합니다. 이는 자바스크립트에 네임스페이스가 없음을 의미합니다. (이름 지정 규칙). 그러나 객체를 사용할 수 있습니다. 이름 충돌을 방지할 수 있도록 네임스페이스를 생성합니다.
var Tutorix = Tutorix || {}; 위 코드 줄은 Tutorix 개체가 이미 있는 경우 사용하고, 그렇지 않으면 새 개체를 만듭니다.
다른 네임스페이스 내부에 네임스페이스인 중첩된 네임스페이스를 생성할 수도 있습니다.
var Tutorix = Tutorix || {};
Tutorix.TeamA1 = Tutorix.TeamA1 || {}; 위의 코드 줄에서 두 번째 줄은 TeamA1 이미 존재하는 개체를 사용하고, 그렇지 않으면 빈 TeamA1 을 만듭니다. 개체.
다음 예제에서는 HTML 파일에서 2개의 매개변수만 전달하지만 출력에서 3개의 매개변수를 얻습니다. 이는 네임스페이스 충돌 때문입니다. 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 파일
<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 , TeamA1.js에 액세스하기 위해 "Rajendra" 및 "prasad" 매개변수 2개만 보냈지만 출력에는 "Rajendra prasad undefined" 매개변수가 3개 있습니다. 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 파일
HTML 파일에 js 파일(TeamA1.js 및 TeamA2.js)을 모두 포함합니다.
<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 이름 충돌을 피하기 위해 . 네임스페이스 충돌을 방지했기 때문에 각 개별 스크립트에 대한 출력을 얻었습니다.