九、在JavaScript当中定义命名空间

我们人类的语言是有限的，为了方便管理同名但功能不同的函数，高级语言当中都引入了命名空间的概念，但是在JS当中是没有这一概念的，这次我们来仿造一个命名空间出来，可能健壮性不是很强，但可以作为一个学习的参考。

本文捎带复习JS面向对象的基本知识，以及F12脚本调试器的使用方法介绍。

我们人类的语言是有限的，为了方便管理同名但功能不同的函数，高级语言当中都引入了命名空间的概念，但是在JS当中是没有这一概念的，这次我们来仿造一个命名空间出来，可能健壮性不是很强，但可以作为一个学习的参考。

本文捎带复习JS面向对象的基本知识，以及F12脚本调试器的使用方法介绍。

首先直接贴代码：

 

function DefineNamespace(name) {
    if (!name) { return null; }
    var level = name.split(".");
    var floder = window[level[0]] = window[level[0]] || {};
    for (var i = 1; i < level.length; i++) {
        floder = floder[level[i]] = floder[level[i]] || {};
    }
}

DefineNamespace("MyNamespace.IO");
MyNamespace.IO.Read = function () {
    alert("test");
}

MyNamespace.IO.Read();

 

这段代码在下面的运行部分首先定义了一个名为“MyNamespace.IO”的命名空间，然后为其添加Read函数，最后调用这个函数。

关注一下DefineNamespace这个函数，第一行不解释，第二行的作用是将MyNamespace.IO拆成两部分。值得关注的是第三行代码：

 

var floder = window[level[0]] = window[level[0]] || {};

为了解释这行代码做了什么，我们可以打开IE自带的F12开发人员工具，对浏览器顶级对象window下的MyNamespace添加监视，并打上几个断点，操作如图：

按F10单步调试，当代码走过第三行时，floder被赋值了一个空对象：

在这一行代码当中我们看到了两个等号，即A=B=C的形式，那么程序会先执行B=C，将结果赋值给A。

先来看最右边的{}，这是Javascript定义对象的方式，以下两行代码是等效的：

 

var myObj = new Object();

var myObj = {};

而window[level[0]]中的level[0]就是上面取到的"MyNamespace"，window[level[0]]是取浏览器顶级对象window当中的"MyNamespace"子对象，我们在上面的图中可以看到这个对象一开始是空的。

所以“window[level[0]] || {}”这部分就表示先找window下有没有"MyNamespace"对象，如果没有就返回一个空对象，有就返回它自身，这样做的目的是防止第二次创建同名命名空间把第一次盖掉，如果真的同名了，就返回原来的对象，这种手段可以理解为一种单例模式。

最后把返回的命名空间对象交给floder变量，它是"MyNamespace"对应的根元素，也就是在第二张途中看到的这个空Object，这个元素被挂在了window对象当中，可以供我们调用。

然后看接下来的for循环：

for ( var i = 1; i < level.length; i++) {

     floder = floder[level[i]] = floder[level[i]] || {};

}

首先i是从1开始的，也就是说，从“IO”这个子层开始的，因为对象可以通过[]这种索引器取子对象，所以这里同理先判断命名空间根元素下有没有IO这个元素，如果没有则将IO对象添加到根元素下。接下来添加第二层、第三层……

当执行完第一次后，可以看到在根元素下已经有IO对象了：

紧跟着调用后面的方法定义：

在这样，就能通过MyNamespace.IO.Read();的方式调用命名空间下的函数了。

这段代码在下面的运行部分首先定义了一个名为“MyNamespace.IO”的命名空间，然后为其添加Read函数，最后调用这个函数。

关注一下DefineNamespace这个函数，第一行不解释，第二行的作用是将MyNamespace.IO拆成两部分。值得关注的是第三行代码：

var floder = window[level[0]] = window[level[0]] || {};

为了解释这行代码做了什么，我们可以打开IE自带的F12开发人员工具，对浏览器顶级对象window下的MyNamespace添加监视，并打上几个断点，操作如图：

按F10单步调试，当代码走过第三行时，floder被赋值了一个空对象：

在这一行代码当中我们看到了两个等号，即A=B=C的形式，那么程序会先执行B=C，将结果赋值给A。

先来看最右边的{}，这是Javascript定义对象的方式，以下两行代码是等效的：

var myObj = new Object();

var myObj = {};

而window[level[0]]中的level[0]就是上面取到的"MyNamespace"，window[level[0]]是取浏览器顶级对象window当中的"MyNamespace"子对象，我们在上面的图中可以看到这个对象一开始是空的。

所以“window[level[0]] || {}”这部分就表示先找window下有没有"MyNamespace"对象，如果没有就返回一个空对象，有就返回它自身，这样做的目的是防止第二次创建同名命名空间把第一次盖掉，如果真的同名了，就返回原来的对象，这种手段可以理解为一种单例模式。

最后把返回的命名空间对象交给floder变量，它是"MyNamespace"对应的根元素，也就是在第二张途中看到的这个空Object，这个元素被挂在了window对象当中，可以供我们调用。

然后看接下来的for循环：

for ( var i = 1; i < level.length; i++) {

     floder = floder[level[i]] = floder[level[i]] || {};

}

首先i是从1开始的，也就是说，从“IO”这个子层开始的，因为对象可以通过[]这种索引器取子对象，所以这里同理先判断命名空间根元素下有没有IO这个元素，如果没有则将IO对象添加到根元素下。接下来添加第二层、第三层……

当执行完第一次后，可以看到在根元素下已经有IO对象了：

紧跟着调用后面的方法定义：

在这样，就能通过MyNamespace.IO.Read();的方式调用命名空间下的函数了。