在JavaScript中实现命名空间
注:好久没写了,今天把我在公司内网写的文章拷一份,出来露露脸,刚转Web开发,所以开始学JavaScript!
在引入命名空间之前,一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突,在一个公司内部项目组之间可以通过命名预定(比如加前缀等)解决这个问题,但是把视线放到整个软件开发领域,在当今协作开发相当盛行的时代,这个问题却依然存在。在使用多个第三方框架或类库的时候,你唯一能作的就是祈祷它们的命名不要冲突,如果真正发生这种灾难的话,你唯一能作的就是放弃其中一个(注:可能是我孤陋寡闻,呵呵)。命名空间的引入相当程度上解决了这个问题,当然,如果你使用的命名空间和其他公司不幸一样,而对方又是微软、SUN等大佬,那恭喜你,呵呵@_@!
从事Web开发不可避免要接触JavaScript,目前最新版本的JavaScript还是不支持命名空间,所以命名冲突的问题凸显无疑,想象一下你引用了两个js文件,却发现由于命名问题导致你不得不放弃其中一个,从而导致多写了许多代码,无疑是十分令人沮丧的。在JavaScript新版本引入命名空间概念之前,发扬自立更生精神和创造性是我们程序员的基本义务;-)
实现前提:与Delphi、C#等语言不同,JavaScript中的类并不是对象的定义,事实上JavaScript中并不存在真正的类,这里的类实际上是用函数模拟实现的,而JavaScript中的函数实际上是一个对象,因此在JavaScript中:一个类就是一个对象。这和传统概念概念极为不同,在JavaScript中,创建某个类的实例实际上就是将类(=对象,记住)复制了一份。看到这里,有点设计模式概念的应该就可以看出来了,在JavaScript中,类机制使用了原型(prototype)模式。
实现原理:既然看清楚了类的本质,那么问题就简单了,如果将GEA项目组所有JS类和函数作为属性放在名为GEA的对象里面,然后将GEA对象以属性的方式放在名为Grandsoft对象里面不就可以达到我们的目的,比如Grandsoft.GEA.Person实际上是在Grandsoft对象的属性GEA(也是一个对象)中的类Person(还是一个对象)。
实现非常简单,整个命名空间机制的实现不超过20行代码,分析如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
上面就是在JavaScript中模拟命名空间机制的完整实现,使用方式如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
哈哈,简单吧,这么简单的代码我就不多说了,大家自己看着玩吧,其实我有点懒,呵呵@_@!!!
posted on 2006-10-11 18:17 游民一族 阅读(435) 评论(16) 编辑 收藏 引用 收藏至365Key
评论
# re: [原创]在JavaScript中实现命名空间 2006-10-11 18:32 eden
这可不是一般的冷饭。。。 回复
# re: [原创]在JavaScript中实现命名空间 2006-10-11 18:38 游民一族
呵呵,体谅一下,刚开始学JS嘛 回复
# re: [原创]在JavaScript中实现命名空间 2006-10-11 18:39 还是匿了吧
无言 回复
# re: [原创]在JavaScript中实现命名空间 2006-10-11 18:45 游民一族
这种实现网上有很多了么?我想了好几个小时才有思路并实现出来的,太伤心了 回复
# re: 在JavaScript中实现命名空间 2006-10-11 19:58 真无语。。。
呵呵,能把自己东西共享出来,还是鼓励下吧。
不过真的是。。。还是不说好了,,呵呵
回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:01 游民一族
哈哈,看来真的是一大盆冷饭,不过我在网上找咋就找不到类似的实现呢?莫非我的关键字选的有问题么? 回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:12 游民一族
嘿,还真找到一个(http://blog.sina.com.cn/u/493d4751010003o0),不过写得和我不一样,而且也没我这个好玩吧?! 回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:23 真无语。。。
去看看atlas的js库都有。晕哦。楼主好孤漏 回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:28 游民一族
哈哈,看了一下atlas,用法居然和我差不多,不过不知道它是怎么实现的,没看到源码,看来我果然是天才(开个玩笑,嘿嘿)。 回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:33 游民一族
大家可以到这里看看Atlas的命名空间的使用方式:
http://blog.cdbook.cn/user1/atlas/archives/2006/2006925164154.html
-> 以前用“JAVASCRIPT + 命名空间”一个都找不到,刚才用“ATLAS+命名空间”搜出一堆,不过好像都是Atlas里面的
-> 大家如果有好的相关的资源,希望贴出来大家学习学习
-> 还有,除了说冷饭之外,大家也帮忙提出一点建设性的意见,看有没有更优美的方式 回复
# re: 在JavaScript中实现命名空间 2006-10-11 20:47 Jeffrey Zhao
哎,说句实话……JS里实现Namespace……的确没有什么好说的,很容易想到的做法。可能楼主的确接触JS的时间不长吧…… 回复
# re: 在JavaScript中实现命名空间 2006-10-11 21:31 游民一族
好吧,我承认我是个土人,看电视睡觉去喽,呵呵@_@!!! 回复
# re: 在JavaScript中实现命名空间 2006-10-12 08:50 浪子
比较优秀的js framework都有命名空间的概念
# re: 在JavaScript中实现命名空间 2006-10-12 09:07 robinhood
楼主的实现挺好的
我个人的实现方式还是直接创造对象来实现命名空间的
楼主的实现和Yahoo UI中的实现差不多
多多交流! 回复
# re: 在JavaScript中实现命名空间 2006-10-12 09:13 游民一族
@浪子
谢谢,不过目前不想使用任何framework,因为我是想学javascript而不是学习怎么使用某个框架,等把基础打好了,以后需要做东西的时候再用XX框架也不迟。
参考人家优秀的代码确实是个学习的捷径,不过我有个毛病,看多了别人的东西后自己的思路就会受到影响,呵呵,典型的意志不坚定分子,再次感谢 回复
# re: 在JavaScript中实现命名空间 2006-10-12 09:30 萧远山
研究精神值得鼓励,加油! 回复
网址:http://www.cnblogs.com/leafyoung/archive/2006/10/11/526570.html?Pending=true#Post