快捷導(dǎo)航

javascript設(shè)計模式 – 代理模式原理與用法實(shí)例分析

更新時間：2020年04月16日 08:35:36 作者：李小強(qiáng)

這篇文章主要介紹了javascript設(shè)計模式 – 代理模式,結(jié)合實(shí)例形式分析了javascript代理模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

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

介紹：代理使我們很常見的一眾模式，proxy,nginx都稱之為代理，代理是什么意思呢？代理模式在客戶端和目標(biāo)對象之間加入一個新的代理對象，代理對象起到一個中介作用，去掉客戶不能看到的內(nèi)容和服務(wù)，或者增添客戶需要的額外服務(wù)。

定義：給某一個對象提供一個代理，并由代理對象控制對原對象的引用。代理模式是一種對象結(jié)構(gòu)型模式。

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

示例：

var Shape = function(color){
  console.log('創(chuàng)建了一個對象');
  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, y, 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();
// 創(chuàng)建了一個對象
// 畫方： 顏色：red x:10 y:10
// 畫方： 顏色：red x:10 y:10

你可以在proxyShape中增加一些日志，權(quán)限等任務(wù)。因?yàn)榇眍惖拇嬖?，新增的任?wù)不會影響到Shape類。

代理模式為對象的簡介訪問提供了解決方案，可以對對象的訪問進(jìn)行控制。

代理模式總結(jié)：

優(yōu)點(diǎn)：
* 代理模式可以協(xié)調(diào)調(diào)用者和被調(diào)用這，一定程度降低了系統(tǒng)耦合度。

缺點(diǎn)：
* 由于增加了代理對象，因此有些類型的代理模式可能會造成請求的處理速度變慢。
* 實(shí)現(xiàn)代理模式需要額外的工作，有些代理模式的實(shí)現(xiàn)非常復(fù)雜。

適用場景：
* 當(dāng)客戶端需要訪問遠(yuǎn)程主機(jī)中的對象時，可以使用遠(yuǎn)程代理。
* 當(dāng)需要用一個消耗資源較少的對象來代表資源消耗較多的對象，可以使用虛擬代理
* 當(dāng)需要控制一個對象的訪問，為不同用戶提供不同級別的訪問權(quán)限時可以使用保護(hù)代理

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: