很多學(xué)習(xí)前端開發(fā)的小伙伴都會遇到這樣的問題：在JavaScript中全局變量經(jīng)常會引起命名沖突，甚至有時侯重寫變量不是按照想像中的順序來。避免全局變量名沖突的最好辦法還是創(chuàng)建命名空間，接下來千鋒重慶Web培訓(xùn)老師就給大家分享在JavaScript中創(chuàng)建命名空間的幾種常用方法。

JavaScript的執(zhí)行環(huán)境由各種各樣的全局變量構(gòu)成，這些全局變量先于函數(shù)執(zhí)行環(huán)境而創(chuàng)建、這些全局變量都掛載于“全局對象”下。當(dāng)名稱有沖突時就會產(chǎn)生一些不可控的問題，比如命名沖突、代碼的脆弱性、難以測試等。

在編程開發(fā)中合理的使用命名空間可以避免相同的變量或?qū)ο竺Q產(chǎn)生的沖突，而且命名空間也有助于組織代碼有更強的可維護(hù)性和可讀性。JavaScript中雖然沒有提供原生的命名空間支持，但我們可以使用其他的方法（對象和閉包）實現(xiàn)類似的效果。

1、單一全局變量

JavaScript中一個流行的命名空間模式是選擇一個全局變量作為主要的引用對象，因為每個可能的全局變量都成為唯一全局變量的屬性，也就不用再創(chuàng)建多個全局變量，也就避免了和其他聲明的沖突。不過單一全局變量模式已經(jīng)在不少的JavaScript類庫中使用，如：YUI定義了唯一的YUI全局對象，jQuery定義了$和jQuery，$由其他類庫使用時使用jQuery等。示例如下：

var myApplication = (function() {

function() {

// ***

},

return {

// **

}

})();

2、命名空間前綴

命名空間前綴模式其思路非常清晰，就是選擇一個獨特的命名空間，然后在其后面聲明聲明變量、方法和對象。示例如下：

var = myApplication_propertyA = {};

var = myApplication_propertyA = {};

function myApplication_myMethod() {

// ***

}

從某種程度上來說，它確實減少了命名沖突的發(fā)生概率，但其并沒有減少全局變量的數(shù)目，在使用這種模式時一定要特別注意。

3、對象字面量表示法

對象字面量模式可以認(rèn)為是包含一組鍵值對的對象，每一對鍵和值由冒號分隔，鍵也可以是代碼新的命名空間。示例如下：

var myApplication = {

// 可以很容易的為對象字面量定義功能

getInfo:function() {

// ***

},

// 可以進(jìn)一步支撐對象命名空間

models:{},

views:{

pages:{}

},

collections:{}

};

對象字面量為我們提供了優(yōu)雅的鍵/值語法，我們可以非常便捷的組織代碼封裝不同的邏輯或功能，而且可讀性、可維護(hù)性、可擴(kuò)展性極強。

4、嵌套命名空間

嵌套命名空間模式可以說是對象字面量模式的升級版、它也是一種有效的避免沖突模式、因為即使一個命名空間存在、它也不太可能擁有同樣的嵌套子對象、示例如下：

var myApplication = myApplication || {};

// 定義嵌套子對象

myApplication.routers = myApplication.routers || {};

myApplication.routers.test = myApplication.routers.test || {};

當(dāng)然、我們也可以選擇聲明新的嵌套命名空間或?qū)傩宰鳛樗饕龑傩浴⑷纾?/p>

myApplication[′routers′] = myApplication[′routers′] || {};

使用嵌套命名空間模式可以使代碼易讀且有組織性，而且相對安全、不易產(chǎn)生沖突，其弱點是如果我們的命名空間嵌套過多會增加瀏覽器的查詢工作量。

5、立即調(diào)用的函數(shù)表達(dá)式

立即調(diào)用函數(shù)（IIFE）實際上就是匿名函數(shù)，被定義后立即被調(diào)用。IIFE是用于封裝應(yīng)用程序邏輯的常用方法，以保護(hù)它免受全局名稱空間的影響。示例如下：

// 命名空間和undefined作為參數(shù)傳遞，確保：

// 1.命名空間可以在局部修改，不重寫函數(shù)外部上下文

// 2.undefined 的參數(shù)值是確保undefined，避免ES5規(guī)范里定義的undefined

(function (namespace, undefined) {

// 私有屬性

var foo = "foo";

bar = "bar";

// 公有方法和屬性

namespace.foobar = "foobar";

namespace.sayHello = function () {

say("Hello World!");

};

// 私有方法

function say(str) {

console.log("You said:" str);

};

})(window.namespace = window.namespace || {});

可擴(kuò)展性是任何可伸縮命名空間模式的關(guān)鍵，使用IIFE可以輕松實現(xiàn)這一目的，我們可以再次使用IIFE給命名空間添加更多的功能。

6、命名空間注入

命名空間注入是IIFE的另一個變體，從函數(shù)包裝器內(nèi)部為一個特定的命名空間“注入”方法和屬性，使用this作為命名空間代理，這種模式的優(yōu)點是可以將功能行為應(yīng)用到多個對象或命名空間。示例如下：

var myApplication = myApplication || {};

myApplication.utils = {};

(function () {

var value = 5;

this.getValue = function () {

return value;

}

// 定義新的子命名空間

this.tools = {};

}).apply(myApplication.utils);

(function () {

this.diagnose = function () {

return "diagnose";

}

}).apply(myApplication.utils.tools);

// 同樣的方式在普通的IIFE上擴(kuò)展功能，僅僅將上下文作為參數(shù)傳遞并修改，而不是僅僅使用this，如果你經(jīng)常被全局變量沖突困擾，一定要牢記JavaScript命名空間知識點。