如何避免JavaScript中的名称空间污染？

2024-04-21 19:04:04 387

避免命名空间污染

Javascript 不支持 函数重载。因此，当使用两个具有相同名称的函数时，一个函数将根据另一个函数的加载顺序来覆盖另一个函数。这意味着javascript缺少命名空间（命名约定）。但是，我们可以使用对象创建命名空间，从而避免名称冲突。

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之间发生命名空间冲突，即使我们仅发送2个参数“Rajendra”和“prasad”以访问TeamA1.js，我们在输出中仍得到3个参数“Rajendraprasadundefined”。这是因为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 以避免名称冲突。由于避免了命名空间冲突，因此我们获得了每个单独脚本的输出。

如何避免JavaScript中的名称空间污染？

避免命名空间污染

TeamA1.js

TeamA2.js

HTML文件

输出结果

TeamA1.js

TeamA2.js

HTML文件

输出结果

热门推荐

随机推荐