如何在 JavaScript 中宣告名稱空間?


名稱空間是一個程式設計概念,它為識別符號(型別、函式、變數等的名稱)提供作用域,以避免名稱衝突。例如,程式可能需要在許多上下文中使用相同的變數名。在這種情況下,名稱空間將分離這些上下文,以便可以在許多名稱空間中使用相同的識別符號。

本教程將介紹 JavaScript 中名稱空間的初始化應用。JavaScript 中預設情況下沒有名稱空間。構建一個包含所有函式和變數的全域性物件,可以重複使用 JavaScript 名稱空間功能。由於現代 Web 應用程式使用了許多庫和元件,因此應使用名稱空間來避免程式碼中的混淆。

使用物件字面量表示法建立名稱空間

在這種方法中,我們將使用物件字面量表示法。

物件字面量表示法中,JavaScript 名稱空間只能宣告一次,並且只能在該名稱空間內編寫函式。

這可以比作一個具有鍵值對集合的物件,其中鍵也可以代表新的名稱空間,在每對鍵值之間使用冒號分隔。

物件字面量的優點是它們有助於正確組織程式碼和引數,同時不會汙染全域性名稱空間。

如果您想要設計可以擴充套件以啟用深度分層且易於閱讀的結構,它們非常有用。

與簡單的全域性變數相反,物件字面量通常還會考慮檢查是否存在具有相同名稱的變數,從而大大降低了發生衝突的可能性。

語法

第一步是初始化一個空的名稱空間 -

Var <namespace> = { };

然後可以使用以下方法訪問名稱空間的變數 -

<namespace>.<identifier>

方法

  • 我們建立一個名為“student”的物件,然後在其中聲明瞭兩個函式getStudentName()getStudentAddress()

  • getStudentName()函式內部,我們有一個變數初始化為學生的姓名並返回它。

  • getStudentAddress()函式內部,我們有一個變數初始化為學生的地址並返回它。

  • 在物件外部,我們呼叫這些函式,並且類似地列印每個值。

  • 這樣,studentNamestudentAddress就在student下名稱空間化:student.getStudentName()student.getstudentAddress()

示例

在下面的示例中,我們使用了物件字面量表示法在 JavaScript 中宣告名稱空間。

<html>
<head>
   <title> JavaScript Namespace </title>
</head>
<body>
   <h2> Namespace with Object Literal Notation </h2>
   <script>
      var student = {
         getStudentName: function() {
            var studentName = "Vivek Kumar lives in ";
            return studentName;
         },
         getstudentAddress: function() {
            var studentAddress = "Kota, India";
            return studentAddress;
         }
      };
      document.write(student.getStudentName());
      document.write(student.getstudentAddress());
   </script>
</body>
</html>

在上面的輸出中,使用者可以觀察到,當引用學生姓名和地址時,它們會被打印出來。

帶引數的名稱空間

在這種方法中,我們將看到帶引數的名稱空間宣告。使用返回表示模組公共介面的物件的函式包裝器,名稱空間使其功能能夠包含在全域性作用域內。立即呼叫該函式並將輸出分配給名稱空間變數。動態名稱空間,通常稱為名稱空間注入,適用於此名稱空間。它由一個在函式包裝器內部專門引用的代理表示。在這裡,我們將為自執行函式提供名稱空間引數。


語法

讓我們看下面的示例以更好地理解此方法。


var <name> = {};
(function(variable) {
   <name>.variable= function() {
   var x = "ABCD";
   return x;
};

方法

  • 我們建立一個名為student的物件。在這裡,我們在函式內部聲明瞭一個名為professor的名稱空間。

  • 然後,我們在其中聲明瞭三個函式getStudentName()、getStudentAddress() 和getStudentLOB()

  • getStudentName()函式內部,我們有一個變數初始化為學生的姓名並返回它。

  • getStudentAddress()函式內部,我們有一個變數初始化為學生的地址並返回它。

  • getStudentLOB()函式中,我們正在初始化學生工作的公司。

  • 當我們關閉函式時,會引用物件student。在物件外部,我們呼叫這些函式,並且類似地列印每個值。

  • 這樣,name、LOB和address就在student下名稱空間化:student.getStudentName()、student.getstudentAddress()和student.getstudentLOB()。

示例

下面的示例演示了使用名稱空間作為引數的 JavaScript 名稱空間概念。

<html>
<head>
   <title> JavaScript Namespace </title>
</head>
<body>
   <h1>Namespace as argument </h1>
   <script>
      var student = {};
      (function(professor) {
         professor.getStudentName = function() {
            var name = "Milind living in ";
            return name;
         };
         professor.getStudentAddress = function() {
            var address = "Mumbai, India works with ";
            return address;
         };
         professor.getstudentLOB = function() {
            var LOB = "Microsoft";
            return LOB;
         }
      })(student);
      document.write(student.getStudentName());
      document.write(student.getStudentAddress());
      document.write(student.getstudentLOB());
   </script>
</body>
</html>

使用者可以觀察到,名稱空間作為引數提供。name、address和LOB從物件外部訪問並列印。

結論

我們學習了在 JavaScript 中宣告名稱空間的兩種方法。第一種方法是物件字面量表示法,第二種方法是在我們可以提供名稱空間作為引數時。在 JavaScript 中,在 Web 應用程式上工作時,名稱空間提供了隔離和免受其他 JavaScript 程式碼的影響。當表達名稱空間時,“覆蓋”了我們可能沒有意識到的相同變數。

使用名稱空間的 JavaScript 程式碼組織性更好,並且更易於閱讀、理解和根據需要進行調整。由於我們正在使用名稱空間函式和定義,因此網頁的指令碼應保持在頁面 HTML 的上方,確保在頁面載入時立即訪問任何引用和建立的物件。在任何應用程式中使用名稱空間都提高了程式碼的可讀性,並有助於輕鬆除錯。

更新於: 2022-07-22

4K+ 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.