首页 > 代码库 > 深入剖析js命名空间函数namespace
深入剖析js命名空间函数namespace
在看阿里员工写的开源数据库连接池的druid的源代码时,发现了其中在jquery的原代码中有定义了一个命名空间的函数:$.namespace(),其代码如下:
网址为:https://github.com/alibaba/druid/blob/master/src/main/resources/support/http/resources/js/jquery.min.js
使用方法为:
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.1.min.js"></script><script type="text/javascript">$.namespace("druid.index");druid.index=function(){ var i,j; // 定义变量 return { login:function(){ //login 方法的实现 }, submit:function(){ // submit 方法的实现 } }}//使用命名空间的函数druid.index.login();druid.index.submit();
这样的话,就不会在全局变量区,引入很多的函数,将所有要使用的函数已经变量都放入了命名空间druid.index中,避免了不同js库中的函数名的冲突。
但是namespace函数的定义如何理解呢?
$.namespace = function() { var a=arguments, o=null, i, j, d; for (i=0; i<a.length; i=i+1) { d=a[i].split("."); o=window; for (j=0; j<d.length; j=j+1) { o[d[j]]=o[d[j]] || {}; o=o[d[j]]; } } return o; };
思考了很久,才明白他其实是利用了全局window对象的不可覆盖性,来达到目的的。比如我们看下面的代码:
console.log(window);window = {};console.log(window);window = null;console.log(window);window = undefined;console.log(window);
打印的结果都是 window, 而不会是 null 或者 undefined。也就是说window是个极其特殊的对象,他是不可覆盖的。
我们利用firebug来调试看看命名空间到底是如何实现的,我们一步一步的接近目标,先看如下代码:
(function(){ var o = window; console.log(o); // 打印Window o.druid={}; console.log(o); // 打印Window console.log(o.druid); // 打印 Object {}})();
firebug中显示的对象为:
上面这个结果应该很好理解,因为 o指向了window,所以o.index = {}; 也就相当于 window.index = {}; 在window上定义了一个名叫index的对象。
下面我们在上面的代码上加码,在前进一步,接着看:
(function(){ var o = window; console.log(o); // 打印Window o.druid={}; console.log(o); // 打印Window console.log(o.druid); // 打印 Object {} o = o.druid; console.log(o); // 打印 Object {} console.log(window); // 打印Window console.log(o.druid); // 打印 undefined})();
对应firebug中对象和上一步一样,没有变化:
上面的代码中:o = o.druid; 之后,因为 o 是指向 window,为什么console.log(o); 打印 Object {};而 console.log(window); 打印输出Window呢?这里的原因就是 window 的不可覆盖性!也就是说 o = o.druid 导致o被空对象覆盖了,按照道理因为 o 指向window,那么window也应该指向了一个空对象,但是因为widnow不可覆盖,所以这里,仅仅覆了o,而没有同时覆window对象,因为window不可覆盖。
o = o.druid; 执行之后,o 不再执行window对象了,而是指向了window.druid对象,那么最后的console.log(o.druid);为什么打印输出 undefined 呢?很简单,因为 o 已经指向了 window.druid; 而window.druid是个空对象,其下并没有个druid的属性,所以自然就打印输出 undefined 了。
也就是说最后的console.log(o.druid); 就相当于 console.log(window.druid.druid);
好,理解了上面的代码,我们在加上一段代码:
(function(){ var o = window; console.log(o); // 打印Window o.druid={}; console.log(o); // 打印Window console.log(o.druid); // 打印 Object {} o = o.druid; console.log(o); // 打印 Object {} console.log(window); // 打印Window console.log(o.druid); // 打印 undefined o.index = {}; console.log(o.index); // 打印 Object {} o = o.index; console.log(o.index); // undefined})();
对应的firebug中显示的对象为:
我们看到了已经形成了我们需要的命名空间:window.druid.index ,其实命名空间是使用对象链条来实现的。
因为 o = o.druid; 之后,o 已经指向了 window.druid ,那么 o.index = {}; 就相当于 window.druid.index = {};
而 后面的 o = o.index; 又将 o 对象变成了一个空对象,不再指向 window.druid,打印一个空对象的 index 属性自然就输出 undefined.
到这里已经就可以完全理解namespace函数的定义了。
其实核心的就两点:
1)利用了 window 对象的不可覆盖性(“不可覆盖”这个术语是我自己瞎取的^_^);
2)命名空间其实是对象链条来模拟的;
深入剖析js命名空间函数namespace