JavaScript 命名空间

默认情况下，JavaScript缺乏命名空间，但我们可以使用对象来创建命名空间。嵌套命名空间是另一个命名空间的内部命名空间。在JavaScript中，我们可以通过在另一个对象内部创建一个对象来定义嵌套命名空间。

JavaScript命名空间： 命名空间是指为标识符（类型名称、函数名称、变量名称等）提供范围以防止它们之间的冲突的编程范式。例如，同一个变量名称可能在程序的不同上下文中都被使用到。

示例： 一个HTML文件，在其中我们调用两个JavaScript文件，namespace1.js和namespace2.js。

namespace1.js 处理将背景颜色更改为‘黄色’，将文本颜色更改为‘灰色’的事件，当鼠标指针指向 <div> 元素时。
namespace2.js 处理将背景颜色更改为‘粉色’，将文本颜色更改为‘炭黑色’的事件，当鼠标指针从 <div> 元素移开时。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8" /> 
  <title>Namespacing in JavaScript</title> 
 </head> 
 <body> 
    <div id="output">This is the div</div> 
  
    <script src="./namespace1.js"></script> 
    <script src="./namespace2.js"></script> 
 </body> 
</html>

namespace1.js

let MAC = { 
    colorDiv: function(ev){ 
        let target = ev.currentTarget; 
        target.style.backgroundColor = 'yellow'; 
        target.style.color = '#808080'; 
    },  
    init: function(){ 
        let divA = document.getElementById('output'); 
        divA.addEventListener('mouseover', 
        MAC.colorDiv); 
    } 
} 
  
MAC.init();

namespace2.js

let WIN = { 
    colorDiv: function(ev){ 
        let target = ev.currentTarget; 
        target.style.backgroundColor = 'pink'; 
        target.style.color = '#36454F'; 
    },  
    init: function(){ 
        let divB = document.getElementById('output'); 
        divB.addEventListener('mouseout', 
        this.colorDiv); 
    } 
} 
  
WIN.init();

输出：

当将鼠标指针指向<div>元素时。

JavaScript 命名空间

当将鼠标指针移出<div>元素时。

JavaScript 命名空间

如果不使用命名空间，那么在两个或多个JavaScript文件中使用相同函数会出现错误，因为JavaScript中的函数是全局声明的。在我们的示例中，’colorDiv’函数同时在namespace1.js和namespace2.js中使用。如果在上述示例中不使用命名空间，则会抛出错误：“在namespace2.js中已经声明了标识符’colorDiv’的错误:“Uncaught SyntaxError: Identifier ‘colorDiv’ has already been declared”。