JavaScript 命名空间实现原理与代码示例

JavaScript 命名空间背景与必要性

注：这是之前在公司内网分享的技术文章，现整理发布。作者刚转行 Web 开发，正在学习 JavaScript。

在引入命名空间之前，开发人员常面临函数名或类名与其他库冲突的难题。虽然公司内部可通过加前缀等约定解决，但在广泛的软件协作开发中，这一问题依然突出。使用多个第三方框架时，往往只能祈祷命名不冲突，否则可能导致不得不放弃其中一个库的尴尬局面（注：或许是我见识有限）。命名空间的引入在很大程度上缓解了此问题。当然，若不幸与其他大公司（如微软、SUN）使用的命名空间完全一致，那确实是个挑战。

Web 开发必然涉及 JavaScript，而当前主流版本的 JavaScript 原生并不支持命名空间，导致命名冲突问题尤为显著。试想引用两个 JS 文件，却因命名冲突被迫放弃其中一个，从而增加大量冗余代码，这令人沮丧。在 JavaScript 新版本正式引入命名空间概念之前，发挥自主创新能力是程序员的职责。

JavaScript 类机制与命名空间实现前提

实现前提：与 Delphi、C# 等语言不同，JavaScript 中的“类”并非对象的定义。事实上，JavaScript 中不存在真正的类，所谓的类是用函数模拟实现的。由于 JavaScript 中的函数本身就是一个对象，因此：一个类就是一个对象。这与传统面向对象概念截然不同。在 JavaScript 中，创建类的实例实际上是将类（即对象）复制了一份。具备设计模式知识的读者可以看出，JavaScript 的类机制使用了原型（prototype）模式。

实现原理：既然明确了类的本质，问题便迎刃而解。若将 GEA 项目组的所有 JS 类和函数作为属性置于名为 GEA 的对象中，再将 GEA 对象以属性形式置于名为 Grandsoft 的对象中，即可达成目标。例如，Grandsoft.GEA.Person 实际上是指 Grandsoft 对象的属性 GEA（也是一个对象）中的类 Person（仍是一个对象）。

命名空间核心实现代码解析

实现非常简洁，整个命名空间机制的代码不超过 20 行，具体分析如下：

// 声明一个全局对象 Namespace，用于注册命名空间

Namespace = new Object();
// 全局对象仅包含 register 函数，参数为命名空间的全路径，例如 "Grandsoft.GEA"
Namespace.register = function(fullNS)
{  
// 将命名空间字符串按 '.' 分割成数组，例如 ['Grandsoft', 'GEA']
var nsArray = fullNS.split('.');
var sEval = "";
var sNS = "";
for (var i = 0; i < nsArray.length; i++)
    {  
if (i != 0) sNS += ".";
sNS += nsArray[i];
// 依次构建创建命名空间对象（若不存在）的语句
// 例如先创建 Grandsoft，再创建 Grandsoft.GEA，依此类推
sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();";
    }  
if (sEval != "") eval(sEval);
}  
上述代码即为 JavaScript 中模拟命名空间机制的完整实现，具体使用方式如下：
命名空间注册与类定义示例// 注册命名空间 Grandsoft.GEA 和 Grandsoft.GCM
Namespace.register("Grandsoft.GEA");
Namespace.register("Grandsoft.GCM");
// 在 Grandsoft.GEA 命名空间下声明类 Person
Grandsoft.GEA.Person = function(name, age)
{  
this.name = name;
this.age = age;
}  
// 为类 Person 添加公共方法 show()
Grandsoft.GEA.Person.prototype.show = function()
{  
alert(this.name + " is " + this.age + " years old!");
}  
// 演示如何使用类 Person
var p = new Grandsoft.GEA.Person("yanglf", 25);
p.show();

实现简单，此处不再赘述，供读者参考实践。