JavaScript設計模式總結-代理模式
阿新 • • 發佈:2019-01-03
分類
保護代理:代理B可以幫助A過濾掉一些請求
虛擬代理:代理B把一些開銷很大的物件,要延遲到真正需要的時候才去建立
主要作用:A物件的某個方法可以執行某項操作,但如果想在A物件執行之前做些事情,而又不改變A物件,可以先讓B物件做一些事情,再把做處理過的結果給A物件執行
需要注意的問題:介面的一致性,即B的方法名和A的方法名要一致。
應用場合:圖片預載入、合併HTTP請求、惰性載入、快取代理等 程式碼主要形式
const objectA = { doSomething() { ... }; } const proxyB舉例 1、圖片預載入= (function() { 某些前置事情 也可以在這裡監聽事件,等待完成後將結果給objectA.doSomething return { doSomething() { 某些前置事情 再把結果給objectA.doSomething }; } })();
const myImage = (function() { DOM操作建立名為imageNode的<img>標籤並插入到HTML中return { setSrc(src) { imageNode.src = src; } } })(); const proxyImage = (function() { const tempImage = new Image; tempImage.onload--(成功)-->呼叫myImage.src,設定真正的圖片地址 return { setSrc(src) { 為myImage設定菊花圖; tempImage.src = src; // 預載入 } } })(); // 呼叫 proxyImage.srcSrc('....圖片的地址');
2、合併HTTP請求
const synchronousFile = function(id) { 發起請求 }; const proxySynchronousFile = (function() { const cache = []; // 存放多個檔案id,一起傳送 let timer; return function(id) { cache.push(id); if(timer) { return; } timer = setTimeout(function() { 同步cache中的全部檔案,清空定時器 }, 2000); } })();3、快取代理-乘積計算
const mult = function() { return 所有傳入引數的乘積; }; const proxyMult = (function() { const cache = {}; return function() { if (arguments的相乘結果已經在cache中){ return cache[arguments.toString()]; } return cache[arguments.toString()] = mult.apply(this, arguments); }; })();
參考文獻:
[1] 《JavaScript設計模式與開發時間》,曾探,中國工信出版集團.