在使用阿里开源的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 || {};”中后面的“ || {}”不能省略,这是为了防止将原有的命名空间覆盖掉!