JavaScript Namespae(命名空間)

大家好，我是奶綠茶
今天來討論 JavaScript Namesapce 命名空間
首先來了解一下 JS 的變數命名原理

var myVar = "milkmidi";
// 我是其他的程式碼
// 我是其他的程式碼
// ...
// 我是其他的程式碼
var myVar = 0;

可以發現 myVar 被宣告了二次
而後者變數會蓋掉前則
function 也是一樣的原理

function myFun(){
 
}
// 我是其他的程式碼
// 我是其他的程式碼
// ...
// 我是其他的程式碼
function myFun(){ 
 // 蓋掉之前同名的 myFun 函式
}

當然自己寫的程式不會發生同變數/函式
但如果跟其他人一起 Team Work 時，難保別人寫的名稱和你一樣
為了避免互蓋的問題
所以我們引用了 Namespace 的方法
但 JS 並沒有真正的 Namespace
而且是 Object 來模擬

// 用 Object 來當 Namespace
// 變數名稱就用自己的英文名來命名
var milkmidi = {};
milkmidi.myVar = "milkmidi";
milkmidi.myFun = function(){

}
// 我是其他的程式碼
// 我是其他的程式碼
// ...
// 我是其他的程式碼
var otherPartner = {};
otherPartner.myVar = "otherPartner";
otherPartner.myFun = function(){

}
// 要呼叫自己寫的函式就用 milkmidi.myFun();
// 同事寫的就用 otherPartner.myFun();

這樣就可以決解彼此互蓋問題。

決解自己蓋自己的命名空間
為了開發方便
會把自己常用的 JS 依功能來分類
JS 命名空間也只是用Object變數來模擬，一樣會發生蓋掉的問題

// script a.js
var milkmidi = {};
milkmidi.getTitle = function(){};

// script b.js
var milkmidi = {};
milkmidi.doFBLogin = function(){};

// script c.js
milkmidi.getTitle();
// 得到會 Error
// 因為 b.js 重新宣告了 var milkmidi = {};
// a.js 裡的變數被蓋掉

先了解一下 JS 的變數宣方法
變數如果是宣告在最外層，以下寫法是相同

var milkmidi = {}; // var 的變數會自動跟在 window 下
window.milkmidi = {}; // 直接把變數指定到 window 下
this.milkmidi = {}; // this 指的就是 window

所以在宣告變數前，要先檢查該變數是否存在

// 判斷命名空間是否存在
if ( !this.milkmidi ) {
 this.milkmidi = {};
}
// 縮寫，以下寫法相同
this.milkmidi = this.milkmidi || {};
var milkmidi = this.milkmidi || {};
var milkmidi = milkmidi || {};

進階技巧
寫程式要盡量封裝
用不到的變數不要給別人發現
先了解變數的生命週期是依 function 的宣告

var globalVar = "global";
function test(){
 var localVar = "local";
 // 在這可以取得 globalVar
}
// 但在這無法著得 test 裡的 localVar


// 匿名函式的建立與執行
(function(){ 
 // 這裡的程式碼會自動執行一次
})();



(function(){ 
 // 建立私有變數
 var localVar = "milkmidi";
 // 建立私有函式
 function getLocalVar(){
  return localVar;
 }
 // 這樣寫外部成員完全取不到
})();

// 結合 namespace 
var milkmidi = milkmidi || {};
(function( milkmidi ){
 var localVar = "milkmidi";
 // 建立私有函式
 function getLocalVar(){
  return localVar;
 }
 // 我想公開 getLocalVar 這個方法
 // 就可以寫
 milkmidi.getLocalVar = getLocalVar;
})( milkmidi );

// 外部成員就可以呼叫
milkmidi.getLocalVar();

祝大家學習愉快
轉載請註明出處