本文例項講述了javascript設計模式 – 代理模式原理與用法。分享給大家供大家參考，具體如下：

介紹：代理使我們很常見的一眾模式，proxy,nginx都稱之為代理，代理是什麼意思呢？代理模式在客戶端和目標物件之間加入一個新的代理物件，代理物件起到一箇中介作用，去掉客戶不能看到的內容和服務，或者增添客戶需要的額外服務。

定義：給某一個物件提供一個代理，並由代理物件控制對原物件的引用。代理模式是一種物件結構型模式。

場景：我們還是以畫圖形為例，我將所有的繪圖動作包裝到Shape類中，使用代理模式來部分開放功能給客戶。

示例：

var Shape = function(color){
  console.log('建立了一個物件');
  this.color = color;
  this.x;
  this.y;
  this.radius;
 
  this.setAttr = function(x,y,radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
  }
  this.drawCircle = function(){
    console.log('畫圓： 顏色：' + this.color + ' x:' + this.x + ' y:' + this.y + ' radius:' + this.radius)
  }
  this.drawSquare = function(){
    console.log('畫方： 顏色：' + this.color + ' x:' + this.x + ' y:' + this.y )
  }
  this.drawTriangle = function(){
    console.log('畫三角： 顏色：' + this.color + ' x:' + this.x + ' y:' + this.y )
  }
}
 
var proxyShape = function(color,x,radius){
  this.color = color;
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.shape = null;
  this.drawSquare = function(){
    if(this.shape === null){
      this.shape = new Shape(this.color);
      this.shape.setAttr(this.x,this.y,this.radius);
    }
    this.shape.drawSquare();
  }
}
 
var square = new proxyShape('red',10,10);
square.drawSquare();
square.drawSquare();
// 建立了一個物件
// 畫方： 顏色：red x:10 y:10
// 畫方： 顏色：red x:10 y:10

你可以在proxyShape中增加一些日誌，許可權等任務。因為代理類的存在，新增的任務不會影響到Shape類。

代理模式為物件的簡介訪問提供瞭解決方案，可以對物件的訪問進行控制。

代理模式總結：

優點：
* 代理模式可以協調呼叫者和被呼叫這，一定程度降低了系統耦合度。

缺點：
* 由於增加了代理物件，因此有些型別的代理模式可能會造成請求的處理速度變慢。
* 實現代理模式需要額外的工作，有些代理模式的實現非常複雜。

適用場景：
* 當客戶端需要訪問遠端主機中的物件時，可以使用遠端代理。
* 當需要用一個消耗資源較少的物件來代表資源消耗較多的物件，可以使用虛擬代理
* 當需要控制一個物件的訪問，為不同使用者提供不同級別的訪問許可權時可以使用保護代理

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。