阿里淘宝的js命名空间函数namespace

阅读更多

在使用阿里开源的druid数据库连接池时，发现它的jar包中包含了三个资源包：
support.http.resources,support.
http.resources.css,
support.http.resources.js
打开看，有很多的html页面和他们的css和js文件，奇怪的是其中的jquery.min.js是被他们修改过了的，在其中增加了一个命名空间的函数：

/* 这里是经过压缩的jquery.min.js源码，省略*/

$.namespace = function() {
   var a=arguments, o=null, i, j, d;
   for (i=0; i 
 
具体代码可以参考：https://github.com/alibaba/druid/blob/master/src/main/resources/support/http/resources/js/jquery.min.js 
 
使用方法是： 
 
 
 

$.namespace("druid.common.test");

druid.common.test = function () {  
	//......
	
	return  {
		init : function() {
			
		}      
        // ... ...
	}
}();

// 可以如下调用命名空间的函数：
druid.common.test.init();

 
 
这里的含义是在window上定义了一个命名空间druid.common.test，然后在该命名空间中定义一些要使用的方法，我们在页面上使用这些方法时，就可以这样调用：druid.common.test.init(); 
 
如果我们F12打开firebug调试，点击“脚本”选项，就会在右边看到其实质就是在window上定义了一个 druid 对象，然后又在改对象上定义一个common对象，最后再common对象上定义一个test对象，init函数就是test对象上的函数或者说方法。 
 
$.namespace("druid.common.test");其实等价于下面的代码： 
 
 
 
arguments = "druid.common.test";
var d = arguments[0].split(".");
window[d[0]] = window[d[0]]||{};
window[d[0]][d[1]] = window[d[0]][d[1]]||{};
window[d[0]][d[1]][d[2]] = window[d[0]][d[1]][d[2]]||{};
 
 
 
 
 
 所以namespace函数的实质就是使用对象链条，来模拟命名空间。 
 
 
 
明白了原理，那么我们自己不使用$.namespace()函数也可以自己定义命名空间： 
 
 
 
// 假设项目名称为jblog，然后这是index.jsp页面中的js，那么可以如下这样写：
window.jblog = window.jblog || {};
window.jblog.index = window.jblog.index || {};
jblog.index = function(){
   return {
      init : function(){
             // 这里是函数init的定义
             alert('init');
      }
   }
}();

// 这样使用它：
jblog.index.init();
 
 
这样就可以将一个页面中所有的函数以及变量都放入命名空间 jblog.index 下面，极大的降低了当要引入其他js库是存在名字冲突的可能性。 
 
 
 
比如long.jsp页面中的js代码就可以将其放入命名空间 jblog.login 下面。 
 
注意代码“window.jblog = window.jblog || {};”中后面的“ || {}”不能省略，这是为了防止将原有的命名空间覆盖掉！