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

故事背景：

假設當 A 在心情好的時候收到花，小明表白成功的幾率有 60%，而當 A 在心情差的時候收到花，小明表白的成功率無限趨近于 0。 小明跟 A 剛剛認識兩天，還無法辨別 A 什么時候心情好。如果不合時宜地把花送給 A，花 被直接扔掉的可能性很大，這束花可是小明吃了 7 天泡面換來的。 但是 A 的朋友 B 卻很了解 A，所以小明只管把花交給 B，B 會監聽 A 的心情變化，然后選 擇 A 心情好的時候把花轉交給 A

代碼實現:

var Flower = function(){}; var xiaoming = {sendFlower: function( target){var flower = new Flower();target.receiveFlower( flower ); } }; var B = {receiveFlower: function( flower ){A.listenGoodMood(function(){ var flower = new Flower(); A.receiveFlower( flower );}); } }; var A = {receiveFlower: function( flower ){// 監聽 A 的好心情console.log( '收到花 ' + flower ); },listenGoodMood: function( fn ){setTimeout(function(){ // 假設 10 秒之后 A 的心情變好fn(); }, 10000 );} }; xiaoming.sendFlower( B ); 復制代碼

由上面的例子可以引出兩種代理模式

• 保護代理 代理 B 可以幫助 A 過濾掉一些請求，比如送花的人中年齡太大的或者沒有寶馬的，這種請求就可以直接在代理 B 處被拒絕掉
• 虛擬代理 假設現實中的花價格不菲，導致在程序世界里，new Flower 也是一個代價昂貴的操作， 那么我們可以把 new Flower 的操作交給代理 B 去執行，代理 B 會選擇在 A 心情好時再執行 new Flower

應用場景

• 虛擬代理實現圖片預加載

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( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );img.src = src; }} })(); proxyImage.setSrc('http://imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' ); 復制代碼

• 虛擬代理合并HTTP請求 假設我們在做一個文件同步的功能，當我們選中一個 checkbox 的時候，它對應的文件就會被同 步到另外一臺備用服務器上面。當一次選中過多時，會產生頻繁的網絡請求。將帶來很大的開銷。可以通過一個代理函數 proxySynchronousFile 來收集一段時間之內的請求， 最后一次性發送給服務器

var synchronousFile = function( id ){ console.log( '開始同步文件，id 為: ' + id ); }; var proxySynchronousFile = (function(){var cache = [], // 保存一段時間內需要同步的 IDtimer; // 定時器return function( id ){cache.push( id );if ( timer ){ // 保證不會覆蓋已經啟動的定時器return; }timer = setTimeout(function(){ synchronousFile( cache.join( ',' ) ); clearTimeout( timer ); // 清空定時器 timer = null;cache.length = 0; // 清空 ID 集合}, 2000 ); }// 2 秒后向本體發送需要同步的 ID 集合 })();var checkbox = document.getElementsByTagName( 'input' );for ( var i = 0, c; c = checkbox[ i++ ]; ){c.onclick = function(){if ( this.checked === true ){proxySynchronousFile( this.id ); }} }; 復制代碼

系列文章：

《JavaScript設計模式與開發實踐》最全知識點匯總大全

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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