代理模式

代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問。

保護代理和虛擬代理

保護代理：當有許多需求要向某對象發出一些請求時，可以設置保護代理，通過一些條件判斷對請求進行過濾。

虛擬代理：在程序中可以能有一些代價昂貴的操作。此時可以設置虛擬代理去代為執行，這里的虛擬代理便會在適合的時候（需要用到的時候）才去執行。

保護代理用于控制不同權限的對象對目標對象的訪問，但在JavaScript并不容易實現保護代理，因為我們無法判斷誰訪問了某個對象。而虛擬代理是最常用的一種代理模式。

虛擬代理實現圖片預加載

預加載圖片在Web開發中十分常用，其通過異步的方式加載圖片，利用一張loading圖片占位。等圖片加載好之后把圖片填充到img節點中。

var myImage = (function(){var imgNode = document.createElement('img')document.body.appendChild(imgNode)return {setSrc: function(src){imgNode.src = src}} })()var proxyImage = (function(){var img = new Image()img.onload = function(){myImage.setSrc(this.src)}return {setSrc: function(src){ myImage.setSrc('loading.gif')img.src = src}} })()proxyImage.setSrc('realImage.jpg') 通過proxyImage間接的訪問了MyImage。proxyImage控制了客戶對MyImage的訪問，并且在此過程中加入了一些額外的操作，比如在真正的圖片加載好之前，先把img節點的src設置為一張loading圖片。

代理的意義

面向對象設計原則——單一職責原則。單一職責原則指的是，就一個類（通常也包括對象和函數等）而言，應該僅有一個引起它變化的原因。如果一個對象承擔了多項職責，就意味著這個對象將變得巨大，引起它變化的原因會有多個。面向對象設計鼓勵將行為分布到細粒度的對象之中，如果一個對象承擔的職責過多，等于把這些職責耦合到了一起，這種耦合會導致脆弱和低內聚的設計，帶變化發生時，設計可能會遭到意外的破壞。

虛擬代理例子中，代理模式給系統添加了額外的功能，預加載圖片。而我們實際需要的只是MyImage的setImage方法。預加載只是一個錦上添花的功能。通過代理模式使得這兩個功能獨立開來，遵循了開放-封閉原則。

緩存代理

緩存代理可以為一些開銷大的運算結果提供暫時的存儲，在下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回前面存儲的運算結果。

乘積運算的例子

/*******計算乘積******/ var mult = function(){console.log('開始計算乘積')var a = 1 for (var i = 0,l = arguments.length;i<l;i++){a = a*arguments[i]}return a }/********乘積代理函數********/ var proxyMult = (function(){var cache = {} // 緩存對象return function(){var args = Array.prototype.join.call(arguments,',') // 將參數轉化成字符串作為cache的keyif (args in cache){// 如果cache對象中存儲了同樣的參數，直接返回對應的運算結果console.log('緩存結果：')return cache[args]}// 如果沒有該運算參數，保存新的參數和結果，并調用mult方法返回運算結果。return cache[args] = mult.apply(this, arguments)} })()console.clear() console.log(proxyMult(1,2,3,4,5)) // mult運算 console.log(proxyMult(1,2,3,4,5)) // 讀取緩存結果 console.log(proxyMult(1,2,3,4)) // mult運算 console.log(proxyMult(1,2,3,4)) // 讀取緩存結果/*******創建緩存代理的工廠函數*******/ var createProxyFactory = function(fn){var cache = {}return function(){var args = Array.prototype.join.call(arguments,',')if(args in cache){return cache[args]}return cache[args] = fn.apply(this, arguments)} } var proxyMult = createProxyFactory(mult) console.log(proxyMult(12,3,4,5,6)) console.log(proxyMult(12,3,4,5,6))

最后

雖然代理模式非常有用，但我們在編寫業務代碼的時候，往往不需要去預先猜測是否需要使用代理模式。當真正發現不方便直接訪問某個對象的時候，再編寫代理不遲。

代理模式是一種很實用的設計模式，很好的詮釋了面向對象中的單一職責原則和開放-封閉原則。在實際開發的時候往往會迫于進度壓力或者實現了再說的態度忽略了一些必要的代碼的可維護性，我覺得在一些簡單的地方去試著遵循一些設計理念是對自己代碼能力的提升。當然不要為了設計而設計啦。

Done is better then Perfect

參考

《JavaScript設計模式與開發實踐》—— 曾探

總結

以上是生活随笔為你收集整理的JS代理模式《JavaScript设计模式与开发实践》阅读笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。