前端開發(fā)知識(shí)：JavaScript命名空間常用方法

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



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

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

1、單一全局變量

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

var myApplication = (function() {

function() {

// ***

},

return {

// **

}

})();

2、命名空間前綴

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

var = myApplication_propertyA = {};

var = myApplication_propertyA = {};

function myApplication_myMethod() {

// ***

}

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

3、對(duì)象字面量表示法

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

var myApplication = {

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

getInfo:function() {

// ***

},

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

models:{},

views:{

pages:{}

},

collections:{}

};

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

4、嵌套命名空間

嵌套命名空間模式可以說是對(duì)象字面量模式的升級(jí)版、它也是一種有效的避免沖突模式、因?yàn)榧词挂粋€(gè)命名空間存在、它也不太可能擁有同樣的嵌套子對(duì)象、示例如下：

var myApplication = myApplication || {};

// 定義嵌套子對(duì)象

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

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

當(dāng)然、我們也可以選擇聲明新的嵌套命名空間或?qū)傩宰鳛樗饕龑傩?、如?br />
myApplication[′routers′] = myApplication[′routers′] || {};

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

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

立即調(diào)用函數(shù)（IIFE）實(shí)際上就是匿名函數(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可以輕松實(shí)現(xiàn)這一目的，我們可以再次使用IIFE給命名空間添加更多的功能。

6、命名空間注入

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

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

當(dāng)前名稱：前端開發(fā)知識(shí)：JavaScript命名空間常用方法
文章URL：http://muchs.cn/news2/254652.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、建站公司、營(yíng)銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信公眾號(hào)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)