快捷導(dǎo)航

JavaScript 命名空間使用介紹

更新時(shí)間：2013年08月29日 00:20:06 作者：

使用JavaScript實(shí)現(xiàn)命名空間就沒(méi)有這么舒服了，Javascript只有函數(shù)作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認(rèn)為是一個(gè)命名空間的，有時(shí)候因?yàn)橐恍┲孛麊?wèn)題導(dǎo)致的錯(cuò)誤讓人莫名其妙，難以調(diào)試解決

使用過(guò)Java、C#的同學(xué)對(duì)命名空間非常的熟悉，在復(fù)雜的系統(tǒng)中會(huì)有N多的函數(shù)、對(duì)象，語(yǔ)言提供的、架構(gòu)預(yù)定義的，這么多的函數(shù)和對(duì)象，由于編程規(guī)范要求起有實(shí)際意義的名字，難免會(huì)重名發(fā)生錯(cuò)誤調(diào)用，而有了命名空間煩惱就沒(méi)有了，不但可以分類(lèi)組織函數(shù)與對(duì)象，還可以形成隔離，解決重名問(wèn)題。

使用JavaScript就沒(méi)有這么舒服了，Javascript只有函數(shù)作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認(rèn)為是一個(gè)命名空間的，有時(shí)候因?yàn)橐恍┲孛麊?wèn)題導(dǎo)致的錯(cuò)誤讓人莫名其妙，難以調(diào)試解決。

一個(gè)簡(jiǎn)單的例子

復(fù)制代碼代碼如下:

<input type="button" value="test" onclick="alert();"/>

        <script type="text/javascript">
            function alert(){
                //.......

                test2();
                //.......
            }

            function test2(){
                alert('test2')
            }

在個(gè)例子在不同的瀏覽器下有不同表現(xiàn)，IE會(huì)報(bào)Stack over flow, Firefox會(huì)死掉。。。反正都會(huì)報(bào)錯(cuò)，很簡(jiǎn)單的錯(cuò)誤，代碼中自定義了一個(gè)alert函數(shù)，在alert函數(shù)中調(diào)用了test2函數(shù)，test2函數(shù)中意圖調(diào)用window的alert方法，這樣循環(huán)調(diào)用了，也許看了你會(huì)說(shuō)這么明顯的錯(cuò)誤誰(shuí)會(huì)犯，但是如果自定義的方法叫close（這個(gè)經(jīng)常會(huì)出現(xiàn)吧），然后內(nèi)部調(diào)用了一個(gè)外部文件的函數(shù)，該函數(shù)調(diào)用了window的close方法，這樣錯(cuò)誤是不是隱蔽了很多呢。

簡(jiǎn)單的命名空間

由于JavaScript沒(méi)有文件作用域，不同的函數(shù)分散在不同的文件中，甚至由不同的人編寫(xiě)，重名的概率大大增加。是不是足夠小心就可以了呢？也不盡然，還有些意外情況，比如經(jīng)常會(huì)用到繼承，于是寫(xiě)了一個(gè)沒(méi)出現(xiàn)過(guò)的函數(shù)名extend，不料在EcmaScript5中加入了extend函數(shù)，命名空間的必要性就體現(xiàn)出來(lái)了。

JavaScript有函數(shù)的作用域，可以利用這點(diǎn)把自定義的函數(shù)寫(xiě)到一個(gè)函數(shù)體內(nèi)，這樣函數(shù)內(nèi)的變量、對(duì)象、函數(shù)就像在一個(gè)命名空間內(nèi)一樣和外部隔離。

復(fù)制代碼代碼如下:

<input type="button" value="test" onclick="(new namespace()).alert();"/>

        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log('test');
                }
            }
        </script>

這樣自定義的alert方法就不會(huì)和window的alert沖突了。

簡(jiǎn)單進(jìn)化

這樣可以是可以，但也有問(wèn)題，最大的問(wèn)題在于調(diào)用方式復(fù)雜而丑陋！每次調(diào)用的時(shí)候都要實(shí)例化對(duì)象，然后調(diào)用其方法，簡(jiǎn)單修改代碼讓其實(shí)現(xiàn)自動(dòng)實(shí)例化。

復(fù)制代碼代碼如下:

<input type="button" value="test" onclick="NS.alert();"/>

        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log('test');
                }

                window.NS=this;
            })();
        </script>

要看明白上面代碼首先要了解一下“立即執(zhí)行函數(shù)”（江湖人是這么稱(chēng)呼的）的技巧結(jié)構(gòu)類(lèi)似這樣

復(fù)制代碼代碼如下:

(function xxx(){

//function body

})();

這樣寫(xiě)xxx函數(shù)就可以在定義完后自動(dòng)執(zhí)行，看起來(lái)神奇，其實(shí)上面寫(xiě)法可以拆成這樣

復(fù)制代碼代碼如下:

function xxx(){

//function body

}

xxx();

就是定義一個(gè)函數(shù)，然后使用括號(hào)語(yǔ)法調(diào)用，而函數(shù)定義外面的一層括號(hào)只起到將函數(shù)聲明轉(zhuǎn)為函數(shù)定義表達(dá)式，因?yàn)橹挥斜磉_(dá)式才可以使用括號(hào)調(diào)用?？疵靼走@些妖蛾子之后上面代碼就簡(jiǎn)單了，在自定義namespace函數(shù)最后把this賦值為window的NS屬性，在調(diào)用的時(shí)候直接使用NS.xx就可以了?？雌饋?lái)好了很多。

美化一下

上面的寫(xiě)法看起來(lái)不錯(cuò)了，但是函數(shù)名namespace貌似是多余的了，可以美化一下

復(fù)制代碼代碼如下:

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

                window.NS=this;
            })();

變成了一個(gè)立即執(zhí)行的匿名函數(shù)，美化了一些，不過(guò)看起來(lái)還是怪怪的，對(duì)呀，明明是實(shí)例化的function，為什么方法定義不寫(xiě)到prototype中呢，匿名函數(shù)怎么寫(xiě)prototype。。。，還得動(dòng)動(dòng)腦筋

復(fù)制代碼代碼如下:

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

                }
                _NS.prototype.alert=function(){
                    console.log('test');
                }
                window.NS=new _NS();
            })();

寫(xiě)幾個(gè)有用的函數(shù)

querySelector和querySelectorAll是W3C提供的新的查詢(xún)接口，但是名字好長(zhǎng)，自己寫(xiě)個(gè)簡(jiǎn)單的，innerHTML屬性也常用到，寫(xiě)個(gè)簡(jiǎn)單版仿jQuery的html方法

復(fù)制代碼代碼如下:

(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();
})();

這樣一個(gè)帶有命名空間的簡(jiǎn)單JavaScript庫(kù)就寫(xiě)成了，不用擔(dān)心命名沖突了，但是用起來(lái)很不方便啊，做前端的同學(xué)都用過(guò)jQuery，人家用起來(lái)那叫一個(gè)簡(jiǎn)單,jQuery是怎么做的？欲知后事如何，且聽(tīng)下回分解。

您可能感興趣的文章: