在看阿里员工写的开源数据库连接池的druid的源代码时,发现了其中在jquery的原代码中又定义了一个命名空间的函数:$.namespace(),其代码如下:

网址为:https://github.com/alibaba/druid/blob/master/src/main/resources/support/http/resources/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;
};

使用方法为:

<script type="text/javascript" src="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这个名称,实质上是个引用或者说指针,他指向heap上的全局window对象,stack上的window引用指向heap上的全局window对象,这个指向关系是不可覆盖,不可修改的。上面我修改了stack上的window,视图让他指向Null对象,但是修改是无效的。

我们利用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呢?这里的原因是,没有理解引用的含义。o 和 window 都是stack上的一个变量,他们都指向heap上的全局window对象,我们修改 o 这个引用,让它指向另外的一个空对象,而这并不会同时修改stack上的window这个引用的指向。也就是就像两条绳子 a, b 都指向一条船,我让其中的一条绳子b指向第二条船,并不会影响绳子a还指向第一条船。

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)命名空间其实是对象链条来模拟的;

3)理解引用的含义:引用是个在stack上的变量,可以修改它指向不同的对象,要访问或者说修改他指向的对象,必须使用 “.” 点操作符,比如 o.index ={}; 而单纯的修改 o ,比如 o = {}; 并不会修改他指向的对象,因为 没有访问到他指向的对象,怎么能修改到他指向的对象呢?

上面我们搞明白了$.namespace函数的来龙去脉,下面我们看看他的使用如何理解:

$.namespace("druid.index");
druid.index=function(){
var i,j; // 定义变量
return {
login:function(){
//login 方法的实现
},
submit:function(){
// submit 方法的实现
}
};
}();

首先 $.namespace("druid.index"); 定义了一个命名空间:druid.index,它其实是 window.druid.index , 然后下面将一个匿名函数的调用的返回值赋值给window.druid.index:

druid.index=function(){
// ...
}();

然后这个函数返回的是: return {} ,这是什么?显然我们在js中可以这样定义一个对象: var obj = {}; 所以这里返回的是一个js对象,那么这个js对象的内容是什么呢:{login:xxx, submit:xxx} 这是什么??显然这和我们的 json 格式是一模一样的,所以返回的对象是一个json对象,当然也是一个js对象,只不过,该json对象的属性的值,不是普通的字符串或者json对象,而是一个函数,仅此而已。

深入剖析js命名空间函数namespace的更多相关文章

  1. JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  2. 由命名空间函数而引发思考--js中的对象赋值问题

    最近没有编码任务,作为一个才毕业的小辣鸡,给的任务就是看一下公司的新系统,熟悉怎么用哪些地方是干什么的. 下午喝了两杯水,感觉有点浪.然后就开始看了下代码.发现有一个函数是这样子的. var TX = ...

  3. 命名空间(namespace)// 友元函数

    17.2.命名空间 命名空间(namespace)为防止名字冲突提供了更加可控的机制.命名空间能够划分全局命名空间,这样使用独立开发的库更加容易了.一个命名空间就是一个作用域,通过在命名空间内部定义库 ...

  4. js命名空间笔记

    在量比较大或者多人编写的情况下,命名冲突就很有可能发生,同一个页面引用了两个命名相同功能不同的文件,调用的时候就会出问题.因此使用JS命名空间很重要. 1.采用字面量方法创建命名空间: var a={ ...

  5. c++,命名空间(namespace)

    1.什么是命名空间: 命名空间:实际上就是一个由程序设计者命名的内存区域,程序设计者可以根据需要指定一些有名字的空间域,把一些全局实体分别放在各个命名空间中,从而与其他全局实体分隔开来. 2.命名空间 ...

  6. 转载 jQuery和js自定义函数和文件的方法(全网最全)

    jQuery和js自定义函数和文件的方法(全网最全)    版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...

  7. 1.2 C++命名空间(namespace)

    参考:http://www.weixueyuan.net/view/6326.html 总结: C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespac ...

  8. js匿名函数测试

    js匿名函数测试 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

随机推荐

  1. P6 Professional Installation and Configuration Guide (Microsoft SQL Server Database) 16 R1

    P6 Professional Installation and Configuration Guide (Microsoft SQL Server Database) 16 R1       May ...

  2. spring.Net之Ioc在MVC中的使用

    1.引入dll Common.Logging.dll Spring.Core.dll Spring.Web.dll Spring.Web.Extensions.dll Spring.Web.Mvc4. ...

  3. 【C#进阶系列】03 配置文件管理与程序集的引用版本重定向

    先来点与标题不相关的: CLR支持两种程序集:弱命名程序集和强命名程序集. 两者的区别在于强命名程序集使用发布者的公钥和私钥进行签名.由于程序集被唯一性地标识,所以当应用程序绑定到强命名程序集时,CL ...

  4. sql server 2008出现评估期已过的问题

    我的sql server2008用来半年吧,那天的昨天还能用,到了180天后,就不能用了,具体问题如下: 出了这个问题后,就打不开sql server了 解决方法: 1.打开安装中心,升级sql se ...

  5. Titanium开发环境搭建第一个坑

    操作系统: Ubuntu 12.04 LTS AMD64 在Titanium Studio中,装Titanium CLI怎么都不能成功,到了一个进度,发现卡在那里,硬盘一直狂闪,发现在Studio的文 ...

  6. 利用多写Redis实现分布式锁原理与实现分析(转)

    利用多写Redis实现分布式锁原理与实现分析   一.关于分布式锁 关于分布式锁,可能绝大部分人都会或多或少涉及到. 我举二个例子:场景一:从前端界面发起一笔支付请求,如果前端没有做防重处理,那么可能 ...

  7. sublimeText插件推荐

    工欲善其事必先利其器.sublimeText是前端开发工程师的一把利器,它的优点包含: 随时保留文件的修改 Goto Anything,智能搜索; 简单全面的插件体系; 代码地图; 快速启动 ... ...

  8. 代码导出Reporting Services报表文件

    背景部分 使用Reporting Services很容易制作和发布我们需要的报表,报表效果也还不错 不过如果报表数据过大或报表数量过多,打开及查看报表感觉可能就是另外一回事了 好在Reporting ...

  9. 如何在树莓派上运行雷神之锤III

    昨天在树莓派上尝试运行了一下雷神之锤III,流畅运行,效果不错~~~ RPI这个小身板的东东总是可以给你带来惊喜,这里记录一下步骤以备后续再用 先确保RPI的程序和固件都已经更新 sudo apt-g ...

  10. 转:纠结的Shim

    原文地址:http://www.haorooms.com/post/requirejs_sy_lj RequireJs已经流行很久了,它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延 ...