javascript設計模式 – 代理模式原理與用法實例分析
本文實例講述了javascript設計模式 – 代理模式原理與用法。分享給大家供大家參考,具體如下:
介紹:代理使我們很常見的一眾模式,proxy,nginx都稱之為代理,代理是什么意思呢?代理模式在客戶端和目標對象之間加入一個新的代理對象,代理對象起到一個中介作用,去掉客戶不能看到的內容和服務,或者增添客戶需要的額外服務。
定義:給某一個對象提供一個代理,并由代理對象控制對原對象的引用。代理模式是一種對象結構型模式。
場景:我們還是以畫圖形為例,我將所有的繪圖動作包裝到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中增加一些日志,權限等任務。因為代理類的存在,新增的任務不會影響到Shape類。
代理模式為對象的簡介訪問提供了解決方案,可以對對象的訪問進行控制。
代理模式總結:
優(yōu)點:
* 代理模式可以協(xié)調調用者和被調用這,一定程度降低了系統(tǒng)耦合度。
缺點:
* 由于增加了代理對象,因此有些類型的代理模式可能會造成請求的處理速度變慢。
* 實現(xiàn)代理模式需要額外的工作,有些代理模式的實現(xiàn)非常復雜。
適用場景:
* 當客戶端需要訪問遠程主機中的對象時,可以使用遠程代理。
* 當需要用一個消耗資源較少的對象來代表資源消耗較多的對象,可以使用虛擬代理
* 當需要控制一個對象的訪問,為不同用戶提供不同級別的訪問權限時可以使用保護代理
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
webpack-url-loader 解決項目中圖片打包路徑問題
這篇文章主要介紹了webpack-url-loader 解決項目中圖片打包路徑問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02JS實現(xiàn)給json數(shù)組動態(tài)賦值的方法示例
這篇文章主要介紹了JS實現(xiàn)給json數(shù)組動態(tài)賦值的方法,結合實例形式分析了javascript針對json數(shù)組的遍歷、賦值等常用操作技巧,需要的朋友可以參考下2017-07-07js實現(xiàn)登錄注冊框手機號和驗證碼校驗(前端部分)
這篇文章主要為大家詳細介紹了js實現(xiàn)登錄注冊框手機號和驗證碼校驗的前端部分代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09