三分钟学JS设计模式（五）代理模式

代理模式

一、什么是代理模式

在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。

举个栗子：我们上饱了么点外卖的时候商家做外卖并不是直接送的，而是把外卖给了骑手（代理）送到你的手中，你和商家是没有直接接触的。骑手代理你的外卖期间可以做很多事情比如偷吃你一根香肠。

二、 优缺点

• 优点：

  • 1、隔离作用：
    如上栗子，商家跟客户直接隔着骑手（代理），客户只能吃商家的外卖，并不能因为难吃殴打老板。因为骑手只代理送外卖业务，并不负责打人。
  • 2、高扩展性；
    商家可以让骑手代理送，可以让美团骑手送（换代理），也可以亲自送（去掉代理）

• 缺点：

  • 多一层代理，可能会带来额外的消耗和时间
    骑手送到后发现外卖有虫子，退货也需要通过骑手，如果直接对接商家可以直接退。

三、场景例子、代码实现

• 场景一：属性代理

// 以下涉及ES6+语法

const waimai = {
	rice:null,
	hotdog:null
};
// 骑手代理
const waimaiProxy = new Proxy(waimai,{
	get:function(target,key){
		if(key === 'hotdog'){
			return null;
		}
		return target[key];
	},
	set:function(target,key,value){
		target[key] = value
		return true;
	}
})
// 商家：执行set操作
waimaiProxy.rice = "五常大米一碗";
waimaiProxy.hotdog = "变态辣热狗一根";

// 顾客：吃饭发现少了个热狗
console.log(`rice:${waimaiProxy.rice};hotdog:${waimaiProxy.hotdog}`)
// console.log: rice:五常大米一碗;hotdog:null

• 场景二：缓存代理

自己做个网络请求缓存工具，当同个请求的时候返回值跟第一次返回的一样：

// 网络请求工具：
const ajaxRemote = function(url){
	console.log('访问了'+url);
	return fetch(url)
}

const cache = {};
const ajaxRemoteProxy = function(url){
	if(cache[url]){
 		cache.url = ajaxRemote(url);
	}
	return cache.url;
}
// 连续发起三次请求：
ajaxRemoteProxy('https://www.baidu.com/')
ajaxRemoteProxy('https://www.google.com/')
ajaxRemoteProxy('https://www.baidu.com/')

// console.log:
// 访问了https://www.baidu.com/
// 访问了https://www.google.com/
// 第二次请求百度的时候发现有缓存了，就不再发起请求，直接使用缓存

缓存代理可以缓存网络请求结果、同理还能缓存计算量比较大的结果

let cache = null;
const getConfig = () =>{
  if(cache){
	cache = JSON.parse(localStorage.get('USER_INFO'))
  }
  return cache;
}

• 虚拟代理
  可以用虚拟代理解决图片懒加载问题（先显示Loading，图片加载完后再替换loading）