`
focus2008
  • 浏览: 26432 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

阿里淘宝的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<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;
};

具体代码可以参考:https://github.com/alibaba/druid/blob/master/src/main/resources/support/http/resources/js/jquery.min.js
使用方法是:
<sctipt type="text/javascript">
$.namespace("druid.common.test");

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

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

这里的含义是在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 || {};”中后面的“ || {}”不能省略,这是为了防止将原有的命名空间覆盖掉!
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics