?🎬 岸邊的風(fēng)：個(gè)人主頁

?🔥?個(gè)人專欄?:《 VUE 》?《 javaScript 》

???生活的理想，就是為了理想的生活?!

目錄

命名空間（Namespace）

命名空間（Namespace）使用場景

第三方庫

兼容性

模塊

3. 命名空間與模塊的對比

命名空間（Namespace）

在 TypeScript 中，命名空間是一種將代碼封裝在一個(gè)特定名稱下的方式，以防止全局作用域污染并避免命名沖突。命名空間在 TypeScript 中非常重要，因?yàn)樗鼈優(yōu)槟K化和封裝提供了靈活的選項(xiàng)。

創(chuàng)建命名空間的語法如下：

namespace MyNamespace {export const myVar: number = 10;export function myFunction(): void {console.log("Hello from MyNamespace");}
}

在此例中，我們創(chuàng)建了一個(gè)名為MyNamespace的命名空間，該命名空間內(nèi)有一個(gè)變量myVar和一個(gè)函數(shù)myFunction。export關(guān)鍵字允許我們從命名空間外部訪問這些元素。

命名空間中的元素可以通過以下方式訪問：

console.log(MyNamespace.myVar); // 輸出：10
MyNamespace.myFunction(); // 輸出：Hello from MyNamespace

我們也可以使用嵌套的命名空間：

namespace ParentNamespace {export namespace ChildNamespace {export const myVar: number = 20;}
}
console.log(ParentNamespace.ChildNamespace.myVar); // 輸出：20

命名空間（Namespace）使用場景

在 TypeScript 的早期版本中，命名空間被廣泛地使用來組織和包裝一組相關(guān)的代碼。然而，隨著 ES6 模塊系統(tǒng)（ES6 Modules）的出現(xiàn)和廣泛使用，命名空間的用法變得越來越少，現(xiàn)在被視為一種遺留的方式來組織代碼。

第三方庫

一些第三方庫仍然使用命名空間來組織自己的代碼，并提供命名空間作為庫的入口點(diǎn)。在這種情況下，我們需要使用命名空間來訪問和使用庫中的類型和函數(shù)。

namespace MyLibrary {export function myFunction() {// ...}
}MyLibrary.myFunction();

兼容性

在一些遺留的 JavaScript 代碼或庫中，命名空間仍然是一種常見的組織代碼的方式。如果我們需要與這些代碼進(jìn)行交互，我們可能需要?jiǎng)?chuàng)建命名空間來適應(yīng)它們。

// legacy.js
var MyNamespace = {myFunction: function() {// ...}
};MyNamespace.myFunction();

在上面的示例中，我們演示了命名空間的幾個(gè)使用場景。第一個(gè)示例展示了如何使用命名空間訪問和使用第三方庫的函數(shù)。第二個(gè)示例展示了如何使用命名空間來管理全局狀態(tài)。第三個(gè)示例展示了如何在與遺留 JavaScript 代碼進(jìn)行交互時(shí)創(chuàng)建命名空間。

雖然在現(xiàn)代 TypeScript 開發(fā)中，模塊是更常見和推薦的代碼組織方式，但命名空間仍然在特定的情況下具有一定的用處，并且在與一些特定的庫或代碼進(jìn)行交互時(shí)可能是必需的。

模塊

在 TypeScript 中，模塊是另一種組織代碼的方式，但它們更關(guān)注的是依賴管理。每個(gè)模塊都有其自己的作用域，并且只有明確地導(dǎo)出的部分才能在其他模塊中訪問。

創(chuàng)建和使用模塊的方式如下：

在myModule.ts文件中：

export const myVar: number = 10;
export function myFunction(): void {console.log("Hello from myModule");
}

在另一個(gè)文件中導(dǎo)入和使用模塊：

import { myVar, myFunction } from './myModule';console.log(myVar); // 輸出：10
myFunction(); // 輸出：Hello from myModule

在 TypeScript 中，我們可以使用模塊解析策略（如 Node 或 Classic），以確定如何查找模塊。這些策略在?tsconfig.json?文件的?compilerOptions?選項(xiàng)下的?moduleResolution?選項(xiàng)中定義。

3. 命名空間與模塊的對比

雖然命名空間和模塊在某種程度上有所相似，但它們有以下幾個(gè)關(guān)鍵區(qū)別：

1. 作用域：命名空間是在全局作用域中定義的，而模塊則在自己的作用域中定義。這意味著，在模塊內(nèi)部定義的所有內(nèi)容默認(rèn)情況下在模塊外部是不可見的，除非顯式地導(dǎo)出它們。

2. 文件組織：命名空間通常用于組織在同一文件中的代碼，而模塊則是跨文件進(jìn)行組織。

3. 依賴管理：模塊關(guān)注的是如何導(dǎo)入和導(dǎo)出功能，以便管理代碼之間的依賴關(guān)系。相比之下，命名空間并未對依賴管理提供明確的支持。

4. 使用場景：隨著 ES6 模塊語法的普及，現(xiàn)代 JavaScript 項(xiàng)目通常更傾向于使用模塊來組織代碼。然而，對于一些遺留項(xiàng)目或那些需要將多個(gè)文件合并為一個(gè)全局可用的庫的場景，命名空間可能更為合適。