JavaScript Namespace命名空間使用說明

什麼是命名空間？語言使用的一種代碼組織的形式 通過名稱空間來分類，區別不同的代碼功能 。無論項目大小，如果一開始不嚴格按照命名空間來編寫程序，當你寫到上萬行JavaScript程序的時候，我相信你一定會後悔你的object或者function命名已經很混亂了。所以建議童鞋們一開始就要養成命名空間的習慣，比如你要開發一個項目，功能可能如下：

// 配置 
var config = {}; 

// 前臺 
config.front = {}; 

// 後臺 
config.admin = {}; 

// 後臺數據 
config.admin.data = {}; 

// 後臺模塊 
config.admin.module = {}; 

// 後臺顏色模塊 
config.admin.module.color = {}; 

// 後臺圖片模塊 
config.admin.module.images = {}; 

// 後臺搜索模塊 
config.admin.module.search = {}; 

// 給後臺顏色模塊加背景顏色改變功能 
config.admin.module.color.changeBgColor = function(color) { 
    document.body.style.background = color; 
}; 

// 可以這麼調用  
config.admin.module.color.changeBgColor('#F30');

但是，以上聲明命名空間的方式看起來不直觀，我們來一個比較直觀的結構化命名方式：

// 配置 
var config = { 
    // 前臺 
    front : {}, 

    // 後臺 
    admin : { 
        // 數據層 
        data : {}, 

        // 模塊層 
        module : { 
            // 顏色模塊 
            color : { 
                // 背景顏色改變功能 
                changeBgColor : function(color){ 
                    document.body.style.background = color; 
                }, 
                // 前景顏色改變功能 
                changeFnColor : function(color){ 
                    document.body.style.color = color; 
                } 
            }, 
            // 圖片模塊 
            images : { 

            }, 
            // 搜索模塊 
            search : { 

            } 
        } 
    } 

}; 

// 可以這麼調用  
config.admin.module.color.changeBgColor('#F30');

以上的聲明方式就把結構化很好的呈現出來了，利用命名空間非常方便的管理維護拓展程序，當多人開發或者JavaScript代碼寫的數量巨大時不用擔心命名衝突的問題。我們也可以寫一個命名空間的功能，省去以上覆雜的聲明方式。

比如以上例子實際上我只是暫時用到config.admin.module.color.changeBgColor這個功能，那麼我就需要先定義config，接着admin，然後module，最後是color.changeBgColor，比較繁瑣，於是我們可以寫一個命名空間註冊的功能，直接註冊就能用：

// 命名空間註冊函數 
var namespace = { 
    reg : function(s){ 
        var arr = s.split('.'); 
        var namespace = window; 

        for(var i=0,k=arr.length;i<k;i++){ 
            if(typeof namespace[arr[i]] == 'undefined'){ 
                namespace[arr[i]] = {};  
            } 

            namespace = namespace[arr[i]];           
        } 
    }, 
    del : function(s){ 
        var arr = s.split('.'); 
        var namespace = window; 

        for(var i=0,k=arr.length;i<k;i++){ 
            if(typeof namespace[arr[i]] == 'undefined'){ 
                return; 
            }else if( k == i+1 ){ 
                delete  namespace[arr[i]]; 
                return; 
            }else{ 
                namespace = namespace[arr[i]];       
            }        
        }            
    } 
};

可以這樣註冊命名空間

// 先註冊命名空間 
namespace.reg('config.admin.module.color'); 

// 添加功能 
config.admin.module.color.changeBgColor = function(color){ 
    document.body.style.background = color; 
}; 

// 調用功能 
config.admin.module.color.changeBgColor('#F30'); 

// 刪除命名空間 
namespace.del('config.admin.module.color');

命名空間沒有唯一規則，只有根據每個項目以及項目負責人對程序的分析然後給出一定命名規則，比如有些項目根據功能命名空間，有些項目根據負責人名命名空間等等。但無論採用哪種方式，合理的命名空間在你應對大項目時多人合作時不會因爲命名衝突而重構。因此你的站點中的js文件將有一篇是第一位引入的namespace.js，它定義了這個項目所有的命名空間與管理。