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是怎麼做的?欲知後事如何,且聽下回分解。

發佈留言