JavaScript 命名空间实现与演进详解

JavaScript 命名空间概述

熟悉 Java 或 C# 的开发者对命名空间概念并不陌生。在大型复杂系统中，存在大量由语言内置或框架预定义的函数与对象。遵循编程规范虽然要求命名具有实际意义，但难免导致重名并引发错误的函数调用。引入命名空间后，不仅可以对函数和对象进行分类组织，还能形成有效的隔离机制，从而彻底解决重名冲突的难题。

相比之下，JavaScript 的环境显得不够友好。由于 JS 仅具备函数作用域，而块级作用域或文件作用域均被视为共享同一个命名空间，因此极易因重名引发难以察觉且难以调试的错误。

一个简单的例子

<input type="button" value="test" onclick="alert();"/>
<script type="text/javascript">
function alert(){
                //.......
test2();
                //.......
            }
function test2(){
alert('test2')
            }

该示例在不同浏览器中表现各异：IE 会报错 Stack overflow，Firefox 则可能陷入死循环。尽管这是一个明显的逻辑错误——自定义了 alert 函数并在其中调用 test2，而 test2 又试图调用 window 的 alert 方法，导致无限递归——但在实际开发中，若自定义方法名为 close（此类命名较为常见），且内部调用了外部文件函数，该函数又调用了 window.close 方法，此类错误将变得极为隐蔽。

基础命名空间实现

简单的命名空间

鉴于 JavaScript 缺乏文件级作用域，不同函数分散于多个文件中，甚至由不同开发人员编写，重名概率显著增加。仅靠小心谨慎并不足以完全避免问题，例如经常使用的继承机制中，开发者可能定义了一个未出现的函数名 extend，却意外与 EcmaScript5 标准中新增的 extend 函数发生冲突，这凸显了命名空间的必要性。

利用 JavaScript 的函数作用域特性，可以将自定义函数封装在函数体内。这样，函数内部的变量、对象及函数便如同处于一个独立的命名空间中，与外部环境形成隔离。

<input type="button" value="test" onclick="(new namespace()).alert();"/>
<script type="text/javascript">
function namespace(){
this.alert=function(){
console.log('test');
                }
            }
</script>

通过这种方式，自定义的 alert 方法便不会与 window 对象的 alert 方法产生冲突。

命名空间进化与优化

简单进化

上述方案虽然可行，但存在明显缺陷：调用方式复杂且不够优雅。每次调用都需要先实例化对象，再调用其方法。通过修改代码，可实现自动实例化以优化体验。

<input type="button" value="test" onclick="NS.alert();"/>
<script type="text/javascript">
(function namespace(){
this.alert=function(){
console.log('test');
                }
window.NS=this;
            })();
</script>

理解上述代码需先了解“立即执行函数”（IIFE）的技巧，其结构大致如下：

(function xxx(){
//function body
 })();

这种写法使得 xxx 函数在定义完成后自动执行。看似神奇，实则可拆解为：

function xxx(){
//function body
 }
xxx();

即先定义一个函数，随后使用括号语法进行调用。函数定义外层的括号仅起到将函数声明转换为函数定义表达式的作用，因为只有表达式才能通过括号进行调用。理解这一机制后，前述代码便清晰易懂：在自定义 namespace 函数末尾将 this 赋值给 window 的 NS 属性，调用时直接使用 NS.xx 即可。这看起来更为简洁。

美化一下

上述写法已相当不错，但函数名 namespace 显得多余，可进一步优化。

(function (){
this.alert=function(){
console.log('test');
                }
window.NS=this;
            })();

这变成了一个立即执行的匿名函数，虽然形式上更美观，但仍显怪异。既然这是实例化的 function，为何不将方法定义写入 prototype 中？对于匿名函数而言，如何操作 prototype 仍需进一步思考。

(function(){
var _NS=function(){
                }
_NS.prototype.alert=function(){
console.log('test');
                }
window.NS=new _NS();
            })();

实用功能封装示例

写几个有用的函数

querySelector 和 querySelectorAll 是 W3C 提供的新查询接口，但名称较长。我们可以编写一个简单的封装，同时针对常用的 innerHTML 属性，编写一个仿 jQuery 风格的 html 方法。

(function () {
var _NS = function () {
            }
_NS.prototype.select = function (selector,context) {
var context = context || document;
return context.querySelectorAll(selector);
            }
_NS.prototype.isArrayLike=function(obj){
 if(obj instanceof Array){
 return true;
 }
var length=obj.length;
 if ( obj.nodeType === 1 && length ) {
 return true;
 }
 return false;
 }
_NS.prototype.html = function (obj,value) {
 var isArray=this.isArrayLike(obj), i=0;
if (typeof value == 'string') {
 if (!isArray) {
 obj.innerHTML = value;
 } else {
 var length = obj.length;
 while (i < length) {
 obj[i].innerHTML = value;
 i += 1;
 }
 }
 } else {
 if (!isArray) {
 return obj.innerHTML;
 } else {
 return obj[0].innerHTML;
 }
 }
 }
window.NS = new _NS();
 })();

至此，一个具备命名空间的简单 JavaScript 库雏形已成型，无需担忧命名冲突。然而，使用体验仍不够便捷。前端开发者大多熟悉 jQuery，其调用方式极为简洁。jQuery 是如何实现这一点的？欲知后事如何，且听下回分解。