JavaScript 命名空間使用介紹_javascript技巧-js教程-PHP中文網

JavaScript 命名空間使用介紹_javascript技巧

WBOY

發布： 2016-05-16 17:24:10

原創

1608 人瀏覽過

使用過Java、C#的同學對命名空間非常的熟悉，在複雜的系統中會有N多的函數、對象，語言提供的、架構預定義的，這麼多的函數和對象，由於程式設計規範要求起有實際意義的名字，難免會重名發生錯誤調用，而有了命名空間煩惱就沒有了，不但可以分類組織函數與對象，還可以形成隔離，解決重名問題。

使用JavaScript就沒有這麼舒服了，Javascript只有函數作用域，什麼塊兒啊、神馬文件啊統統都認為是一個命名空間的，有時因為一些重名問題導致的錯誤讓人莫名其妙，難以調試解決。

一個簡單的例子

複製程式碼程式碼如下:

由於JavaScript沒有檔案作用域，不同的函數分散在不同的檔案中，甚至由不同的人編寫，重名的機率大大增加。是不是夠小心就可以了呢？也不盡然，還有些意外狀況，例如常常會用到繼承，於是寫了一個沒出現過的函數名稱extend，不料在EcmaScript5中加入了extend函數，命名空間的必要性就體現出來了。

JavaScript有函數的作用域，可以利用這點把自訂的函數寫到一個函數體內，這樣函數內的變數、物件、函數就像在一個命名空間內一樣和外部隔離。

複製程式碼

程式碼如下:

this.alert=function( ){ console.log('test');

}

        
這樣自訂的alert方法就不會跟window的alert衝突了。 

簡單進化

這樣可以是可以，但也有問題，最大的問題在於呼叫方式複雜而醜陋！每次呼叫的時候都要實例化對象，然後呼叫其方法，簡單修改程式碼讓其實現自動實例化。

複製程式碼

程式碼如下:

//function 身體

})();

這樣寫xxx函數就可以在定義完後自動執行，看起來神奇，其實上面寫法可以拆成這樣

複製程式碼

程式碼如下:function xxx(){

function xxx(){
//function 身體

}

xxx();

就是定義一個函數，然後使用括號語法調用，而函數定義外面的一層括號只起到將函數聲明轉為函數定義表達式，因為只有表達式才可以使用括號調用。看懂這些妖蛾之後上面程式碼就簡單了，在自訂namespace函數最後把this賦值為window的NS屬性，在呼叫的時候直接使用NS.xx就可以了。看起來好了很多。

美化一下

上面的寫法看起來不錯了，但是函數名稱namespace似乎是多餘的了，可以美化一下

複製程式碼程式碼如下:

( function(){
                    console.log('test');
              window.NS=this;
            })();

變成了一個立即執行的匿名函數，美化了一些，不過看起來還是怪怪的，對呀，明明是實例化的function，為什麼方法定義不寫到prototype中呢，匿名函數怎麼寫prototype 。 。 。 ，還得動動腦筋

複製碼

程式碼如下:( tion (){

}

                       console.log('test');
               ;
            })();

寫幾個有用的函數

querySelector和querySelectorAll是W3C提供的新的查詢接口，但是名字好長，自己寫個簡單的，innerHTML屬性也常用到，寫個簡單版仿jQuery的html方法

複製程式碼

程式碼如下:

(function () {
            var _NS = function () {

      _NS.prototype.select = 函數（選擇器，下方）{
var context = context || document;
               return context.querySelectorAll(selector);

            _NS.prototype.isArrayLike=function(obj){
                    return true;                }

                var length=obj.length;
                         return true;
                         }

            _NS.prototype.html = function (obj,value) {

                if (typeof value == 'string') {
                          obj.innerHTML = value;
                        var length = obj.length;
                        while (i                          obj[i].innerHTML = value;

i = 1;
}

}

                } else {
                    if (!isArray) {
                       return obj.innerHTML;
                  } else {
                        return obj[0].innerHTML;
                    }
                }
            }

            window.NS = new _NS();
        })();

這樣一個有命名空間的簡單JavaScript庫就寫成了，不用擔心命名衝突了，但是用起來很不方便啊，做前端的同學都用過jQuery，人家用起來那叫一個簡單,jQuery是怎麼做的？欲知後事如何，且聽下回分解。