javascript名稱空間簡單介紹

antzone發表於2017-03-21

namespace名稱空間是一種程式碼組織結構,通過名稱空間來區分類。

在當前ES標準中,並沒有名稱空間這個概念,但是在編寫大型專案或者多個js庫同時使用或者多人共同完成專案的時候,很難保證變數名不會出現重複的現象,所以模擬實現名稱空間就是非常有必要的。

一.實現原理:

原理很簡單,就是將js中的類(ES中並沒有類這個概念,建構函式其實就是承擔類的角色),作為另外一個物件的屬性使用,也就是實現了名稱空間的功效,先看一段簡單的程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var nsA=new Object();
var nsB=new Object();
nsA.obj=new Object();
nsB.obj=new Object();

在以上程式碼中,nsA和nsB就可以看做簡單的名稱空間,在各自的名稱空間下,使用具有相同名稱的類也是不衝突的,當然這裡是模擬實現的,再來看一段比較好的實現劃分名稱空間的程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
Namespace = new Object();
Namespace.register = function(fullNS){
  // 將名稱空間切成N部分, 比如Grandsoft、GEA等
  var nsArray = fullNS.split('.');
  var sEval = "";
  var sNS = "";
  for (var i = 0; i < nsArray.length; i++){
    if (i != 0) sNS += ".";
    sNS += nsArray[i];
    sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();"
  }
  if (sEval != "") eval(sEval);
}
Namespace.register("Grandsoft.GEA");

以上程式碼看上去稍稍複雜一些,其實原理是一樣的,使用示例:

[JavaScript] 純文字檢視 複製程式碼
// 註冊名稱空間Grandsoft.GEA, Grandsoft.GCM
Namespace.register("Grandsoft.GEA");
Namespace.register("Grandsoft.GCM");
// 在Grandsoft.GEA名稱空間裡面宣告類Person
Grandsoft.GEA.Person = function(name, age){
  this.name = name;
  this.age = age;
}
// 給類Person新增一個公共方法show()
Grandsoft.GEA.Person.prototype.show = function(){
  console.log(this.name + " is " + this.age + " years old!");
}
// 演示如何使用類Person
var p = new Grandsoft.GEA.Person("yanglf", 25);
p.show();

相關文章