不一样的Javascript（13）——模块化与命名空间

1. 假设一个项目的Javascript代码分成三个模块，分别放在三个文件里。第一个文件的内容如下：

// Module A in ModuleA.js
var name = "Harry";

function printName() {
    console.log("I'm in ModuleA, " + name);
}

第二个文件的内容如下：

// Module B in ModuleB.js
var name = "Peter";

function printName() {
    console.log("I'm in ModuleB, " + name);
}

第三个模块调用前两个模块的函数：

//Module C in ModuleC.js
printName();

当第三个模块的代码得到执行的时候，输出是什么？我们注意到在模块A和B中都定义了一个函数printName和变量name。由于两个模块出现了相同的函数名和变量名，它们会相互覆盖。因此第三个模块在调用函数printName的时候，最终输出依赖模块A和B的载入顺序。如果模块A载入的时间比模块B早，那么模块A中printName和name都会被模块B覆盖，因此最终输出的是I'm in ModuleB, Peter。反之，如果模块B载入的时间比模块A早，那么最终的输出为I'm in ModuleA, Harry。

这样的结果通常不是我们想要的。我们需要把模块A和B都封装起来，确保两个模块中的函数和变量不会相互覆盖。下面是修改之后的模块A的代码：

// Module A in ModuleA.js
(function() {
    var name = "Harry";

    function printName() {
        console.log("I'm in ModuleA, " + name);
    }
    
    ModuleA = {
        printName: printName
    };
})();

我们在模块A中定义了一个全局变量ModuleA，并添加了一个属性printName，指向了函数printName。我们注意到定义在模块A中函数printName是嵌套在一个匿名函数里面，那么它只是在这个匿名函数内部可见，在该匿名函数的外面就不能调用这个函数了。

同样，模块B的代码如下：

// Module B in ModuleB.js
(function() {
    var name = "Peter";

    function printName() {
        console.log("I'm in ModuleB, " + name);
    }
    
    ModuleB = {
        printName: printName
    };
})();    

我们在模块B中定义了一个全局变量ModuleB，并添加了一个属性printName，指向了函数printName。

模块C在调用前面两个模块的代码也需要做相应的修改：

// Module C in ModuleC.js
ModuleA.printName(); // I'm in ModuleA, Harry
ModuleB.printName(); // I'm in ModuleB, Peter

在模块C中，我们通过全局变量ModuleA和ModuleB分别调用两个模块的函数。那么没有添加到这两个全局变量的其他变量（如name）和函数，都是模块内部的私有变量和私有函数，在模块之外不可访问。