如何在 JavaScript 中宣告名稱空間?
名稱空間是一個程式設計概念,它為識別符號(型別、函式、變數等的名稱)提供作用域,以避免名稱衝突。例如,程式可能需要在許多上下文中使用相同的變數名。在這種情況下,名稱空間將分離這些上下文,以便可以在許多名稱空間中使用相同的識別符號。
本教程將介紹 JavaScript 中名稱空間的初始化和應用。JavaScript 中預設情況下沒有名稱空間。構建一個包含所有函式和變數的全域性物件,可以重複使用 JavaScript 名稱空間功能。由於現代 Web 應用程式使用了許多庫和元件,因此應使用名稱空間來避免程式碼中的混淆。
使用物件字面量表示法建立名稱空間
在這種方法中,我們將使用物件字面量表示法。
在物件字面量表示法中,JavaScript 名稱空間只能宣告一次,並且只能在該名稱空間內編寫函式。
這可以比作一個具有鍵值對集合的物件,其中鍵也可以代表新的名稱空間,在每對鍵值之間使用冒號分隔。
物件字面量的優點是它們有助於正確組織程式碼和引數,同時不會汙染全域性名稱空間。
如果您想要設計可以擴充套件以啟用深度分層且易於閱讀的結構,它們非常有用。
與簡單的全域性變數相反,物件字面量通常還會考慮檢查是否存在具有相同名稱的變數,從而大大降低了發生衝突的可能性。
語法
第一步是初始化一個空的名稱空間 -
Var <namespace> = { };然後可以使用以下方法訪問名稱空間的變數 -
<namespace>.<identifier>
方法
我們建立一個名為“student”的物件,然後在其中聲明瞭兩個函式getStudentName()和getStudentAddress()。
在getStudentName()函式內部,我們有一個變數初始化為學生的姓名並返回它。
在getStudentAddress()函式內部,我們有一個變數初始化為學生的地址並返回它。
在物件外部,我們呼叫這些函式,並且類似地列印每個值。
這樣,studentName和studentAddress就在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 的上方,確保在頁面載入時立即訪問任何引用和建立的物件。在任何應用程式中使用名稱空間都提高了程式碼的可讀性,並有助於輕鬆除錯。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP