JavaScript 中的命名空间

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

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

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

• namespace1.js在将鼠标指针指向

  元素时处理将背景颜色更改为“黄色”并将文本颜色更改为“灰色”的事件。

• namespace2.js处理将鼠标指针从

  元素移开时将背景颜色更改为“粉红色”并将文本颜色更改为“木炭”的事件。

HTML

 
  
  Namespacing in JavaScript
 
 
    This is the div
  
    
    
 

命名空间1.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();

命名空间2.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();

输出：

• 将鼠标指针指向

  元素。

  

• 将鼠标指针移离

  元素。

  

如果不使用命名空间，则会在两个或多个 JavaScript 文件中使用相同的函数时发生错误，因为 JavaScript 中的函数是全局声明的。在我们的例子中，'colorDiv'函数在 namespace1.js 和 namespace2.js 中都使用。如果在上面的例子中没有使用命名空间，那么它会抛出一个错误：“Uncaught SyntaxError: Identifier 'colorDiv' has already been declared at namespace2.js”。