學習了解PHP的同學都知道命名空間這個概念吧,在複雜的系統中會有N多的函數、對象,語言提供的、架構預定義的,這麼多的函數和對象,由於程式規範要求起有實際意義的名字,難免會重名發生錯誤調用,而有了命名空間煩惱就沒有了,不但可以分類組織函數與對象,還可以形成隔離,解決重名問題。
使用JavaScript就沒有這麼舒服了,Javascript只有函數作用域,什麼塊兒啊、神馬檔案啊統統都認為是一個命名空間的,有時候因為一些重名問題導致的錯誤讓人莫名其妙,難以調試解決。
一個簡單的範例
<input type="button" value="test" onclick="alert();"/> <script type="text/javascript"> function alert(){ //....... test2(); //....... } function test2(){ alert('test2') } </script>
在一個範例在不同的瀏覽器下有不同表現,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(); })();
命名空間有效防止函數名稱/類別名稱和其他人的衝突,在使用多個第三方框架或類別庫的時候,一旦衝突,唯一能作的就是放棄其中一個。
從事Web開發不可避免要接觸JavaScript,目前最新版本的JavaScript還是不支援命名空間,所以命名衝突的問題凸顯無疑,想像一下你引用了兩個js文件,卻發現由於命名問題導致你不得不放棄其中一個,從而導致多寫了許多程式碼,無疑是十分令人沮喪的。在JavaScript新版本引入命名空間概念之前,發揚自立更生精神和創造性是我們程式設計師的基本義務;
相關文章:
以上是JavaScript中的命名空間的詳細內容。更多資訊請關注PHP中文網其他相關文章!