很多學習前端開發的小伙伴都會遇到這樣的問題：在JavaScript中全局變量經常會引起命名沖突，甚至有時侯重寫變量不是按照想象中的順序來。避免全局變量名沖突的最好辦法還是創建命名空間，接下來小編就給大家分享在JavaScript中創建命名空間的幾種常用方法。



JavaScript的執行環境由各種各樣的全局變量構成，這些全局變量先于函數執行環境而創建、這些全局變量都掛載于“全局對象”下。當名稱有沖突時就會產生一些不可控的問題，比如命名沖突、代碼的脆弱性、難以測試等。

在編程開發中合理的使用命名空間可以避免相同的變量或對象名稱產生的沖突，而且命名空間也有助于組織代碼有更強的可維護性和可讀性。JavaScript中雖然沒有提供原生的命名空間支持，但我們可以使用其他的方法（對象和閉包）實現類似的效果。

1、單一全局變量

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

var myApplication = (function() {

function() {

// ***

},

return {

// **

}

})();

2、命名空間前綴

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

var = myApplication_propertyA = {};

var = myApplication_propertyA = {};

function myApplication_myMethod() {

// ***

}

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

3、對象字面量表示法

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

var myApplication = {

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

getInfo:function() {

// ***

},

// 可以進一步支撐對象命名空間

models:{},

views:{

pages:{}

},

collections:{}

};

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

4、嵌套命名空間

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

var myApplication = myApplication || {};

// 定義嵌套子對象

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

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

當然、我們也可以選擇聲明新的嵌套命名空間或屬性作為索引屬性、如：

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

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

5、立即調用的函數表達式

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

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

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

// 2.undefined 的參數值是確保undefined，避免ES5規范里定義的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 || {});

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

6、命名空間注入

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

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

當前名稱：前端開發知識：JavaScript命名空間常用方法
文章URL：http://www.js-pz168.com/news2/254652.html

成都網站建設公司_創新互聯，為您提供手機網站建設、建站公司、營銷型網站建設、自適應網站、微信公眾號、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯