使用過Java、C#的同學對命名空間非常的熟悉，在復雜的系統中會有N多的函數、對象，語言提供的、架構預定義的，這麼多的函數和對象，由於編程規范要求起有實際意義的名字，難免會重名發生錯誤調用，而有了命名空間煩惱就沒有了，不但可以分類組織函數與對象，還可以形成隔離，解決重名問題。
使用JavaScript就沒有這麼舒服了，Javascript只有函數作用域，什麼塊兒啊、神馬文件啊統統都認為是一個命名空間的，有時候因為一些重名問題導致的錯誤讓人莫名其妙，難以調試解決。
一個簡單的例子
復制代碼 代碼如下:
<input type="button" value="test" onclick="alert();"/>
<script type="text/javascript">
function alert(){
//.......
test2();
//.......
}
function test2(){
alert('test2')
}
在個例子在不同的浏覽器下有不同表現，IE會報Stack over flow, Firefox會死掉。。。反正都會報錯，很簡單的錯誤，代碼中自定義了一個alert函數，在alert函數中調用了test2函數，test2函數中意圖調用window的alert方法，這樣循環調用了，也許看了你會說這麼明顯的錯誤誰會犯，但是如果自定義的方法叫close（這個經常會出現吧），然後內部調用了一個外部文件的函數，該函數調用了window的close方法，這樣錯誤是不是隱蔽了很多呢。
簡單的命名空間
由於JavaScript沒有文件作用域，不同的函數分散在不同的文件中，甚至由不同的人編寫，重名的概率大大增加。是不是足夠小心就可以了呢？也不盡然，還有些意外情況，比如經常會用到繼承，於是寫了一個沒出現過的函數名extend，不料在EcmaScript5中加入了extend函數，命名空間的必要性就體現出來了。
JavaScript有函數的作用域，可以利用這點把自定義的函數寫到一個函數體內，這樣函數內的變量、對象、函數就像在一個命名空間內一樣和外部隔離。
復制代碼 代碼如下:
<input type="button" value="test" onclick="(new namespace()).alert();"/>
<script type="text/javascript">
function namespace(){
this.alert=function(){
console.log('test');
}
}
</script>
這樣自定義的alert方法就不會和window的alert沖突了。
簡單進化
這樣可以是可以，但也有問題，最大的問題在於調用方式復雜而丑陋！每次調用的時候都要實例化對象，然後調用其方法，簡單修改代碼讓其實現自動實例化。
復制代碼 代碼如下:
<input type="button" value="test" onclick="NS.alert();"/>
<script type="text/javascript">
(function namespace(){
this.alert=function(){
console.log('test');
}
window.NS=this;
})();
</script>
要看明白上面代碼首先要了解一下“立即執行函數”（江湖人是這麼稱呼的）的技巧結構類似這樣
復制代碼 代碼如下:
(function xxx(){
//function body
})();
這樣寫xxx函數就可以在定義完後自動執行，看起來神奇，其實上面寫法可以拆成這樣
復制代碼 代碼如下:
function xxx(){
//function body
}
xxx();
就是定義一個函數，然後使用括號語法調用，而函數定義外面的一層括號只起到將函數聲明轉為函數定義表達式，因為只有表達式才可以使用括號調用。看明白這些妖蛾子之後上面代碼就簡單了，在自定義namespace函數最後把this賦值為window的NS屬性，在調用的時候直接使用NS.xx就可以了。看起來好了很多。
美化一下
上面的寫法看起來不錯了，但是函數名namespace貌似是多余的了，可以美化一下
復制代碼 代碼如下:
(function (){
this.alert=function(){
console.log('test');
}
window.NS=this;
})();
變成了一個立即執行的匿名函數，美化了一些，不過看起來還是怪怪的，對呀，明明是實例化的function，為什麼方法定義不寫到prototype中呢，匿名函數怎麼寫prototype。。。，還得動動腦筋
復制代碼 代碼如下:
(function(){
var _NS=function(){
}
_NS.prototype.alert=function(){
console.log('test');
}
window.NS=new _NS();
})();
寫幾個有用的函數
querySelector和querySelectorAll是W3C提供的新的查詢接口，但是名字好長，自己寫個簡單的，innerHTML屬性也常用到，寫個簡單版仿jQuery的html方法
復制代碼 代碼如下:
(function () {
var _NS = function () {
}
_NS.prototype.select = function (selector,context) {
var context = context || document;
return context.querySelectorAll(selector);
}
_NS.prototype.isArrayLike=function(obj){
if(obj instanceof Array){
return true;
}
var length=obj.length;
if ( obj.nodeType === 1 && length ) {
return true;
}
return false;
}
_NS.prototype.html = function (obj,value) {
var isArray=this.isArrayLike(obj), i=0;
if (typeof value == 'string') {
if (!isArray) {
obj.innerHTML = value;
} else {
var length = obj.length;
while (i < length) {
obj[i].innerHTML = value;
i += 1;
}
}
} else {
if (!isArray) {
return obj.innerHTML;
} else {
return obj[0].innerHTML;
}
}
}
window.NS = new _NS();
})();
這樣一個帶有命名空間的簡單JavaScript庫就寫成了，不用擔心命名沖突了，但是用起來很不方便啊，做前端的同學都用過jQuery，人家用起來那叫一個簡單,jQuery是怎麼做的？欲知後事如何，且聽下回分解。