JavaScript

JavaScript 的命名空间

Jan 7th, 2009 Add Comment

JavaScript 的命名空间并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问, 这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.

为什么需要命名空间?

1. JavaScript 是不会禁止你重复定义函数和变量的, 但他只会使用最后定义的版本, 也就是说, 这将导致前面的失效, 令系统出错. 比如, $(id) 是最常用的, 也许你会毫不犹豫的在自己的脚本上定义这个函数, 但是当你用上 prototype, 你就会发现, 它和 prototype 的函数冲突, 并导致你的页面跑不动了. 怎么办? 这时候就需要命名空间了. 我发布的主题里面的 JavaScript 都有用命名空间包起来的, 我这么做就是为了防止和某些插件的代码发生冲突.
2. 如果你要为自己准备一套常用的函数, 或者自己搭建一个 framework, 那这个方法可以使你的代码维护起来更加方便.

怎么使用命名空间?

看以下代码, 命名空间里面定义了两个函数, 将空间命名为 myNamespace, 并声明了 $ 的对外接口. 也就是说, 我们可以在空间外部通过 myNamespace.$ 来调用 $ 函数, 但 myMethod 函数只能在空间内部使用. 因为外部调用需要通过空间来调用, 所以不会和外部函数发生冲突. 变量同理.

(function() {
	// 通过 ID 获取 Element 对象
	function $(id) {
		return document.getElementById(id);
	}
 
	// 显示对应 ID 的对象的节点类型名字
	function myMethod(id) {
		alert($(id).nodeName);
	}
 
	// 这是对外的接口
	window['myNamespace']= {}
	window['myNameSpace']['$'] = $;
})();

以上内容出自这本书: JavaScript DOM 高级程序设计

这是一本很好的 JavaScript 工具书, 我一直没有时间将它全部看完, 即便如此, 我觉得前面几章就相当的精彩了, 所以还是热烈地向各位推荐, 尤其是程序员朋友.

我以前写的一个文章 "JavaScript 初始化装载方法" 其实也出自这本书, 文中我只是小改了一下而已.

这并不是一本入门级的书, 里面没有任何关于 JavaScript 的语法, 如果你完全没有接触过 JavaScript, 我不推荐你买它. 但如果你写过一点 JavaScript 代码, 并想了解更多关于 DOM(Document Object Model) 和浏览器行为的东西, 那我相信这将是你不二的选择.

卓越购买

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: JavaScript 的命名空间

25 Comments 1 Trackbacks

瞬间的永恒 | Dec 14th, 2011 at 21:07

还没怎么看懂，希望解释更简单点
SmallHacker | Jul 25th, 2011 at 10:41

诚实的LZ啊，嘿嘿，不过确实有用
robertsky | Apr 18th, 2011 at 14:42

window['myNamespace']= {}
window['myNameSpace']['$'] = $;
博主这两段代码不也是向window添加一个名为myNamespace的对象属性吗？window['myNameSpace']['$'] = $; 这个只是将$函数的引用赋值给myNameSpace的$属性，觉得这就是个对象建立过程啊，这种方法对于防止冲突很好，不知道具体性能怎么样，难道是自运行的匿名函数回收效率高，求教
天壤 | Aug 18th, 2010 at 00:06

mg12 :
@Kael
你这个不叫 JSON 风格, 而是对象写法, 也就是把 myNamespace 作为一个 Map, 再通过前面的 Key 来取得后面的方法. 这个方法效率比较差.
其实还有一种方式的, 这个有机会我也说说这个吧.

这种方式从效率上怎么说呢？期待博主回复。
George Wing | Jan 3rd, 2010 at 16:25

不错！代码含金量高！尤其是带中文文注释
mg12 | Dec 15th, 2009 at 20:48

@Kael
你这个不叫 JSON 风格, 而是对象写法, 也就是把 myNamespace 作为一个 Map, 再通过前面的 Key 来取得后面的方法. 这个方法效率比较差.
其实还有一种方式的, 这个有机会我也说说这个吧.
Kael | Dec 15th, 2009 at 17:07

曾经遇到这个问题，问JAY同学，还是mg12解答的啊，在下内牛满面。

全局变量同时也是window对象的menber，所以偶还是比较喜欢写成json的风格，虽然稍有不同。

var myNamespace = {$:function(){}, myMethod: function(){}}

ADS的确好书。
waco | Jul 30th, 2009 at 19:05

原来是这么回事.
之前我一直纳闷那个MGJS.()是什么意思呢,总算明白了.
会律博客 | Feb 5th, 2009 at 19:02

帮助大过AD!
魅族M8论坛 | Feb 2nd, 2009 at 03:06

这个是干什么的啊？看了半天没看懂
unicac | Jan 23rd, 2009 at 00:07

在卓越上看了评论，好像这本书很深奥啊！
Muyee | Jan 11th, 2009 at 19:40

貌似今天出现这种情况，赶紧跑过来看看，嘿嘿。
还有新插件，呵呵。遛了一下，感觉不错。
首领 | Jan 9th, 2009 at 02:20

右下角显示的是2.7
应该是最新的...
mg12 | Jan 8th, 2009 at 21:49

@首领
貌似我的可以哦, 你的 WordPress 什么版本的?

@xiaorsz
嗯...
xiaorsz | Jan 8th, 2009 at 11:40

这本书的确不错，有时间要好好看下！！
首领 | Jan 7th, 2009 at 23:58

呵呵...刚好看到而已...
我用inove主题的不能订阅评论,弹了个错误页面...你看一下是什么问题.谢谢了...

应有分号。处理资源 'http://greenhouse.net.ru/blog/?feed=comments-rss2' 时出错。第 18 行，位置: 49
首领 | Jan 7th, 2009 at 23:57

呵呵...刚好点进那个页面而已...
我用inove的1.2.2版和好像是1.4版都不能订阅评论...给了个错误页面...你看一下是什么问题...谢谢了...
无法显示 XML 页。
使用 XSL 样式表无法查看 XML 输入。请更正错误然后单击刷新按钮，或以后重试。

--------------------------------------------------------------------------------

应有分号。处理资源 'http://greenhouse.net.ru/blog/?feed=comments-rss2' 时出错。第 18 行，位置: 49

http://greenhouse.net.ru/blog/?p=8&cpage=1#comment-10
--------------------------------------...
mg12 | Jan 7th, 2009 at 19:13

@JAY
嘻嘻~ 都说很简单的了.

@HK
哈哈, 这书真的不错, 而且需要多看几遍.

@首领
你太迅速了, 这是我今天刚做的插件, 就被你发现了. 我自己正在测试, 过一段时间会发布的.
首领 | Jan 7th, 2009 at 19:08

请问Archives页面的那个点击年月分类的"加号"展开的效果怎么实现?
用了什么插件吗?
HK | Jan 7th, 2009 at 13:48

去购买去，学习一下
网名 | Jan 7th, 2009 at 13:34

方法很好蛮实用的·
JAY | Jan 7th, 2009 at 09:30

哦，似乎明白了……

（function{...}）

定义了一个匿名函数，后面的（）是空参数列表，实际上这是为了执行这个匿名函数的代码。
匿名函数内部定义了局部函数，并且在window对象里面注册了部分局部方法的函数指针（C的叫法）可以暴露给外部访问。可以简单的理解成为这个局部函数定义了一个可以用来访问他的别名。
JAY | Jan 7th, 2009 at 09:24

其实还是没怎么看明白……尤其是

// 这是对外的接口
window['myNamespace']= {}
window['myNameSpace']['$'] = $;

这块
免费空间 | Jan 7th, 2009 at 09:19

迷迷呼呼的看不懂啊
忘记月亮 | Jan 7th, 2009 at 09:15

前几天看你写的js代码时就遇到命名空间的问题。js学习的不够深入，没看懂还问了icyleaf。
该早点发出来。

Add Comment Read Article

JavaScript

JavaScript 的命名空间

为什么需要命名空间?

怎么使用命名空间?

Book, JavaScript, Namespace, Package, Tutorial