JavaScript命名空间

14 Jul

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *