JavaScript命名空间

JavaScript由于不像其他OO语言那样有namespace，所有全局变量（不管是有意还是无意）都会被添加到window对象里。这样既容易造成命名冲突，还不便于管理。本篇就介绍一下JavaScript中如何实现命名空间namespace。

首先你需要确定一下按什么规则定义命名空间，通常会按项目名或功能名来分配命名空间。例如我司开发的X控件库，所有对象就挂在全局变量X下：

var X = {};
X.xButton = {};
…
X.xInputField = {};

X变量作为根变量，底下各控件，如按钮使用X.xButton，文本框用X.xInputField，这样团队可以放心大胆地为自己开发的控件定义属性和方法，或调用他人开发的控件代码，而不必担心命名冲突。类似地jQuery库都挂在jQuery对象下，Yahoo库都挂在Y对象下，这样可以即便于管理，也防止了命名污染。

如果你就一个文件，上面这样就够了。但通常项目不止一个文件，尤其是引入多个库时，要保证多个库的根命名空间不冲突。即便是同一个库，有多个文件的话，也要保证多文件内定义的子命名空间不冲突。

先看避免多个库的根命名空间冲突（虽然概率可能比较小）。

例如jQuery里$对象是jQuery对象的别名，但如果其他库也用$对象，就会发生冲突。别看现在jQuery牛bi哄哄，早期jQuery刚推出时心也是很虚的，因此jQeruy提供了noConflict方法可以让渡根对象$的控制权。

例如下面3个例子：直接放弃$，将$改名，将$移到一个新的命名空间下

//直接放弃$jQuery.noConflict();
jQuery("p").hide();         //使用 jQuery的代码$("content").style.display = "none";    //使用其他库的 $()//将$改名var j = jQuery.noConflict();
j("p").hide();              //使用 jQuery的代码$("content").style.display = "none";    //使用其他库的 $()//将$移到一个新的命名空间下var newQuery = {};
newQuery.$ = jQuery.noConflict(true);
newQuery.$("div.aa").css("background-color","red"); //使用 jQuery的代码$("div.aa").css("background-color","blue");         //使用其他库的 $()

当然关于noConflict更多例子请自行查阅jQuery官网。

再看避免同一个库内多个子命名空间的冲突。通常可以自定义一个生成命名空间的函数，将命名空间传入并进行检查，没有就新建，有了就沿用：

var X = {    namespace: function(ns) {   //将命名空间传入该方法进行检查
        var parts = ns.split("."),
            object = this, i, len;        for(i = 0, len = parts.length; i < len; i++) {            if (typeof object[parts[i]] === "undefined") {
                object[parts[i]] = {};  //没有就新建
            }
            object = object[parts[i]];
        }        return object;
    }
}
X.namespace("xButton.widget");
X.namespace("xInputField.widget ");

X.xButton.widget = …
X.xInputField.widget = …

根据功能划分的各文件，都调用自定义的namespace方法来声明需要的命名空间，开发者就不必担心命名空间冲突的问题了。

作者：张歆琳
链接：https://www.jianshu.com/p/ec9350a61cfb