JavaScript 名稱空間

謙行發表於2013-08-20
JavaScript

使用過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是怎麼做的？欲知後事如何，且聽下回分解。

相關文章