JavaScript設計模式_03_代理模式
阿新 • • 發佈：2017-06-09
col img 文章 timer argument 設計 jpg 朋友 進行
代理模式是非常常見的模式，比如我們使用的VPN工具，明星的經紀人，都是代理模式的例子。但是，有人會疑問，明明可以直接訪問對象，為什麽中間還要加一個殼呢？這也就說到了代理模式的好處。在我看來，代理模式最大的好處，就是在不動原有對象的同時，可以給原有對象增加一些新的特性或者行為。
/** * pre:代理模式 * 小明追求A，B是A的好朋友,小明比較靦腆，不好意思直接將花交給A， * 於是小明將花交給B，再由B交給A. */ //----------- 示例1 --------- // 不使用代理 var Flower = function() {}; var xiaoming = { sendFlower:作者：『Stinchan』 出處：http://www.cnblogs.com/stinchan/p/6971277.html 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。function(target) { var flower = new Flower(); target.receiveFlower(flower); } }; var A = { receiveFlower: function(flower) { console.log("收到花：" + flower); } }; xiaoming.sendFlower(A); // ----------- 示例2 -------------- // 使用代理1 var Flower = function() {}; var xiaoming = { sendFlower:function(target) { var flower = new Flower(); B.receiveFlower(flower); } }; var B = { receiveFlower: function(flower) { A.receiveFlower(flower); } }; var A = { receiveFlower: function(flower) { console.log("收到花：" + flower); } }; xiaoming.sendFlower(B);//------------- 示例3 --------------- // 使用代理2 var Flower = function() {}; var xiaoming = { sendFlower: function(target) { var flower = new Flower(); B.receiveFlower(flower); } }; var B = { receiveFlower: function(flower) { A.listenGoodMood(function() { A.receiveFlower(flower); }); } }; var A = { receiveFlower: function(flower) { console.log("收到花：" + flower); }, listenGoodMood: function(fn) { setTimeout(function() { fn.apply(this, arguments); }, 2000); } }; xiaoming.sendFlower(B); // ---------- 示例4 --------------- /* * 【代理模式用處】：虛擬代理 * 這裏以加載圖片為例，我們都知道當網絡不暢以及圖片過大時，圖片加載都比較慢， * 為了更好的用戶體驗，我們都會在原圖片未加載完成前，加上loading圖片。 * */ //--4 _01未使用代理-- var myImage = (function() { var imgNode = document.createElement("img"); document.body.appendChild(imgNode); return { setSrc: function(src) { this.imgNode.src = src; } } })(); myImage.setSrc("xxx"); //--4_02使用代理-- var proxyMyImage = (function() { var img = new Image(); img.onload = function() { myImage.setSrc(this.src); }; return { setSrc: function(src) { myImage.setSrc("loading.jpg"); img.src = src; } } })(); proxyMyImage.setSrc("xxx"); /* * [註]：這裏可以看到代理模式的好處：在不改變原有接口的同時，可以為系統添加新的行為。 */ //--------- 示例5--------------- /* * 【代理模式用處】：合並http請求 * 這裏以選擇文件同步為例。 * 以往用戶同步文件，在用戶選中的時候就觸發，這種方法做到了實時性，但無疑增加了網絡的開銷。 * 實際在使用的過程中，往往並不需要立刻就同步。 * 以下通過代理模式，將在用戶選中文件2秒後進行同步請求。 * */ // --- 包含一段html代碼，請自行添加到一個文件中 ------ <html> <body> <button id="input">點我上傳</button> <input type="checkbox" id="1"></input>1 <input type="checkbox" id="2"></input>2 <input type="checkbox" id="3"></input>3 <input type="checkbox" id="4"></input>4 <input type="checkbox" id="5"></input>5 <input type="checkbox" id="6"></input>6 <input type="checkbox" id="7"></input>7 <input type="checkbox" id="8"></input>8 <input type="checkbox" id="9"></input>9 </body> </html> // -- 上傳文件 -- var synchronizeFile = function(id) { console.log("開始同步文件：" + id); }; var proxySynchronizeFiles = (function() { var fileCache = [], timer; return function(id) { fileCache.push(id); if(timer) { return; } timer = setTimeout(function() { synchronizeFile(fileCache.join(",")); clearTimeout(timer); timer = null; checkArr.length = 0; }, 2000); } })(); var checkArr = document.getElementsByTagName("input"); for(var i = 0, c; c = checkArr[i++];) { c.onclick = function() { if(this.checked == true) { proxySynchronizeFiles(this.id); } } } // ------------ 示例6 ----------------- /* * 【代理模式用處】：緩存代理 * 以計算器為例，比如計算某些數的乘積，當參數重復時，我們希望不用重復計算，直接返回結果。 * 以下用到代理模式做緩存。 */ var mult = function() { if(!arguments) { console.log("請輸入參數"); return; } var a = 1; for(var i = 0, b; b = arguments[i++];) { a = a * b; } return a; }; var proxyMult = (function() { var cache = {}; return function() { var str = Array.prototype.join.call(arguments, ","); if(str in cache) { console.log("重復return."); return cache[str]; } return cache[str] = mult.apply(this, arguments); } })(); console.log(proxyMult(2, 3, 4)); console.log(proxyMult(2, 3, 4)); //------------ 示例7 -------------- /* * 緩存代理升級 - 通用版計算 * */ var mult = function() { if(!arguments) { return; } var t = 1; for(var i = 0, a; a = arguments[i++];) { t = t * a; } return t; }; var plus = function() { if(!arguments) { return; } var t = 0; for(var i = 0, a; a = arguments[i++];) { t += a; } return t; }; var createProxyCaculate = function(fn) { var cache = {}; return function() { var str = Array.prototype.join.call(arguments, ","); if(str in cache) { console.log(str); return cache[str]; } return cache[str] = fn.apply(this, arguments); } }; var proxyMult = createProxyCaculate(mult); var proxyPlus = createProxyCaculate(plus); console.log(proxyMult(2, 3, 4)); console.log(proxyMult(2, 3, 4));
JavaScript設計模式_03_代理模式