溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
好程序員分享 JavaScript 命名空間模式實例詳解， 本文實例講述了 JavaScript命名空間模式 ， 具體如下：
命名空間可以被認為是唯一標識符下代碼的邏輯分組。為什么會出現命名空間這一概念呢？因為可用的單詞數太少，并且不同的人寫的程序不可能所有的變量都沒有重名現象。在 JavaScript中，命名空間可以幫助我們防止與全局命名空間下的其他對象或變量產生沖突。命名空間也有助于組織代碼，有更強的可維護性和可讀性。本文旨在探討JavaScript里的幾種常見命名空間模式，為我們提供一個思路。
JavaScript執行環境有很多獨特之處，全局變量和函數的使用就是其中之一。JavaScript的執行環境由各種各樣的全局變量構成，這些全局變量先于函數執行環境而創建。這些全局變量都掛載于“全局對象”下，在瀏覽器中，window對象就等同于全局對象。那么，在全局作用域中聲明的任何變量和函數都是window對象的屬性，當名稱有沖突時，就會產生一些不可控的問題。全局變量會帶來以下問題：
命名沖突
代碼的脆弱性
難以測試
在編程開發中合理的使用命名空間，可以避免相同的變量或對象名稱產生的沖突。而且，命名空間也有助于組織代碼，有更強的可維護性和可讀性。 JavaScript中雖然沒有提供原生的命名空間支持，但我們可以使用其他的方法（對象和閉包）實現類似的效果。下面就是一些常見的命名空間模式：
1.單一全局變量
JavaScript中一個流行的命名空間模式是選擇一個全局變量作為主要的引用對象。因為每個可能的全局變量都成為唯一全局變量的屬性，也就不用再創建多個全局變量，那么也就避免了和其他聲明的沖突。
單一全局變量模式已經在不少的 JavaScript類庫中使用，如：
示例如下：
var myApplication = (function() {
function() {
// ***
},
return {
// **
}
})();
雖然單一全局變量模式適合某些情況，但其最大的挑戰是確保單一全局變量在頁面中是唯一使用的，不會發生命名沖突。
2.命名空間前綴
命名空間前綴模式其思路非常清晰，就是選擇一個獨特的命名空間，然后在其后面聲明聲明變量、方法和對象。示例如下：
var = myApplication_propertyA = {};
var = myApplication_propertyA = {};
function myApplication_myMethod() {
// ***
}
從某種程度上來說，它確實減少了命名沖突的發生概率，但其并沒有減少全局變量的數目。當應用程序規模擴大時，就會產生很多的全局變量。在全局命名空間內，這種模式對其他人都沒有使用的這個前綴有很強的依賴，而且有些時候也不好判斷是否有人已經使用某個特殊前綴，在使用這種模式時一定要特別注意。
3.對象字面量表示法
對象字面量模式可以認為是包含一組鍵值對的對象，每一對鍵和值由冒號分隔，鍵也可以是代碼新的命名空間。示例如下：
var myApplication = {
// 可以很容易的為對象字面量定義功能
getInfo:function() {
// ***
},
// 可以進一步支撐對象命名空間
models:{},
views:{
pages:{}
},
collections:{}
};
與為對象添加屬性一樣，我們也可以直接將屬性添加到命名空間。對象字面量方法不會污染全局命名空間，并在邏輯上協助組織代碼和參數。并且，這種方式可讀性和可維護性非常強，當然我們在使用時應當進行同名變量的存在性測試，以此來避免沖突。下面是一些常用的檢測方法：
var myApplication = myApplication || {};
if(!myApplication) {
myApplication = {};
}
window.myApplication || (window.myApplication || {});
// 針對jQuery
var myApplication = $.fn.myApplication = function() {};
var myApplication = myApplication === undefined ? {} :myApplication;
對象字面量為我們提供了優雅的鍵 /值語法，我們可以非常便捷的組織代碼，封裝不同的邏輯或功能，而且可讀性、可維護性、可擴展性極強。
4.嵌套命名空間
嵌套命名空間模式可以說是對象字面量模式的升級版，它也是一種有效的避免沖突模式，因為即使一個命名空間存在，它也不太可能擁有同樣的嵌套子對象。示例如下：
|
var myApplication = myApplication || {}; // 定義嵌套子對象 myApplication.routers = myApplication.routers || {}; myApplication.routers.test = myApplication.routers.test || {}; |
當然，我們也可以選擇聲明新的嵌套命名空間或屬性作為索引屬性，如：
|
myApplication['routers'] = myApplication['routers'] || {}; |
使用嵌套命名空間模式，可以使代碼易讀且有組織性，而且相對安全，不易產生沖突。其弱點是，如果我們的命名空間嵌套過多，會增加瀏覽器的查詢工作量，我們可以把要多次訪問的子對象進行局部緩存，以此來減少查詢時間。
5.立即調用的函數表達式
立即調用函數（ IIFE）實際上就是匿名函數，被定義后立即被調用。在JavaScript中，由于變量和函數都是在這樣一個只能在內部進行訪問的上下文中被顯式地定義，函數調用提供了一種實現私有變量和方法的便捷方式。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); // 同樣的方式在普通的IIFE上擴展功能，僅僅將上下文作為參數傳遞并修改，而不是僅僅使用this |
還有一種使用 API來實現上下文和參數自然分離的方法，該模式感覺更像是一個模塊的創建者，但作為模塊，它還提供了一個封裝解決方案。示例如下：
|
|
var ns = ns || {}, ns1 = ns1 || {}; // 模塊、命名空間創建者 var creator = function (val) { var val = val || 0; this.next = function () { return val ++ ; }; this.reset = function () { val = 0; } } creator.call(ns); // ns.next, ns.reset 此時已經存在 creator.call(ns1, 5000); // ns1包含相同的方法，但值被重寫為5000了 |
命名空間注入是用于為多個模塊或命名空間指定一個類似的功能基本集，但最好是在聲明私有變量或者方法時再使用它，其他時候使用嵌套命名空間已經足以滿足需要了。
7.自動嵌套的命名空間
嵌套命名空間模式可以為代碼單元提供有組織的結構層級，但每次創建一個層級時，我們也得確保其有相應的父層級。當層級數量很大時，會給我們帶來很大的麻煩，我們不能快速便捷的創建想創建的層級。那么如何解決這個問題呢？ Stoyan Stefanov提出，創建一個方法，其接收字符串參數作為一個嵌套，解析它，并自動用所需的對象填充基本名稱空間。下面是這種模式的一種實現：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function extend(ns, nsStr) { var parts = nsStr.split("."), parent = ns, pl; pl = parts.length; for (var i = 0; i < pl; i++) { // 屬性如果不存在，則創建它 if (typeof parent[parts[i]] === "undefined") { parent[prats[i]] = {}; } parent = parent[parts[i]]; } return parent; } // 用法 var myApplication = myApplication || {}; var mod = extend(myApplication, "module.module2"); |
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
