Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptで名前空間の汚染を回避する方法は？

名前空間の汚染の回避

Javascript 関数のオーバーロードをサポートしていません 。したがって、同じ名前の2つの関数を使用すると、これらの関数が読み込まれる順序に応じて、一方の関数がもう一方の関数をオーバーライドします。これは、JavaScriptに名前空間がないことを意味します （命名規則）。ただし、オブジェクトは使用できます 名前の衝突を回避できるように名前空間を作成します。 

var Tutorix = Tutorix || {};

上記のコード行は、 Tutorix オブジェクトはすでに存在している場合はそれを使用します。それ以外の場合は、新しいオブジェクトを作成します。

別の名前空間内の名前空間であるネストされた名前空間を作成することもできます。

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

上記のコード行の2行目は、 TeamA1 すでに存在する場合はそのオブジェクトを使用します。それ以外の場合は、空の TeamA1を作成します。 オブジェクト。

次の例では、HTMLファイルで2つのパラメーターのみを渡しているにもかかわらず、出力で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 、TeamA1.jsにアクセスするために2つのパラメーター「Rajendra」と「prasad」のみを送信しましたが、出力には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ファイル

両方の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 名前の衝突を避けるため 。名前空間の衝突が回避されたため、個々のスクリプトごとに出力が得られました。


  1. JavaScriptで配列を減らす方法は？

    以下は、JavaScriptで配列を減らすためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>   &n

  2. JavaScriptを使用してテーブルにNULL値を挿入しないようにするにはどうすればよいですか？

    テーブルに挿入されたnull値を取り除くには、値を入力するときに条件を確認する必要があります。 NULLをチェックする条件は次のとおりです- while( !( yourVariableName1==null || yourVariableName2==null || yourVariableName3==null…...N){    // yourStatement1    .    .    N } 上記のロジックでは、null値を挿入することはできません。 これで、forループを使用して、