设计模式篇(7) 代理模式
代理模式
在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。
在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口。
介绍
意图：为其他对象提供一种代理以控制对这个对象的访问。
主要解决：在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。
何时使用：想在访问一个类时做一些控制。
如何解决：增加中间层。
关键代码：实现与被代理类组合。
应用实例： 1、Windows 里面的快捷方式。 2、猪八戒去找高翠兰结果是孙悟空变的，可以这样理解：把高翠兰的外貌抽象出来，高翠兰本人和孙悟空都实现了这个接口，猪八戒访问高翠兰的时候看不出来这个是孙悟空，所以说孙悟空是高翠兰代理类。 3、买火车票不一定在火车站买，也可以去代售点。 4、一张支票或银行存单是账户中资金的代理。支票在市场交易中用来代替现金，并提供对签发人账号上资金的控制。 5、spring aop。
优点： 1、职责清晰。 2、高扩展性。 3、智能化。
缺点： 1、由于在客户端和真实主题之间增加了代理对象，因此有些类型的代理模式可能会造成请求的处理速度变慢。 2、实现代理模式需要额外的工作，有些代理模式的实现非常复杂。
使用场景：按职责来划分，通常有以下使用场景： 1、远程代理。 2、虚拟代理。 3、Copy-on-Write 代理。 4、保护（Protect or Access）代理。 5、Cache代理。 6、防火墙（Firewall）代理。 7、同步化（Synchronization）代理。 8、智能引用（Smart Reference）代理。
注意事项： 1、和适配器模式的区别：适配器模式主要改变所考虑对象的接口，而代理模式不能改变所代理类的接口。 2、和装饰器模式的区别：装饰器模式为了增强功能，而代理模式是为了加以控制。
实现
1,明星预约
interface Star {
answerPhone(): void
}
class Angelababy implements Star {
available: boolean = true//是否有空
answerPhone(): void {
console.log("你好，我是Angelababy");
}
}
class AngelababyAgent implements Star {
angelbaby: Angelababy
constructor() {
this.angelbaby = new Angelababy();
}
answerPhone(): void {
console.log('你好，我是Angelababy的经纪人');
if(this.angelbaby.available) {
this.angelbaby.answerPhone();
} else {
console.log('你好，档期已经满了,这段时间都没有空了');
}
}
}
let angelababyAgent = new AngelababyAgent();
angelababyAgent.answerPhone();
2,事件捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="users">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script>
let users = document.getElementById('users');
users.addEventListener('click',function(event) {
event = event || widnow.event;
console.log(event.target.innerHTML)
},true)
</script>
</html>
3,图片懒加载
server
const path = require('path');
const express = require('express');
const app = express();
app.get('/images/bg1',(req:any,res:any) => {
res.sendFile(path.join(__dirname,'images','1.jpg'));
})
app.get('/images/bg2',(req:any,res:any) => {
setTimeout(()=>{res.sendFile(path.join(__dirname,'images','2.jpg'))},3000);
})
app.get('/images/bg3',(req:any,res:any) => {
res.sendFile(path.join(__dirname,'images','3.jpg'));
})
app.get('/',function(req: any, res: any) {
res.sendFile(path.join(__dirname,'3.html'));
})
app.listen(8080);
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="background">
<button data-src="/images/bg1">1</button>
<button data-src="/images/bg2">2</button>
<button data-src="/images/bg3">3</button>
</div>
<div class="bg-container">
<img id="bg-image" src="/images/bg1" />
</div>
</body>
<script>
let background = document.getElementById('background');
class BackgroundImage {
constructor() {
this.bgImg = document.getElementById('bg-image');
}
setSrc(src) {
this.bgImg.src = src;
}
}
class loadingBackgroundImage {
static LOADING_URL = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0196fa582abab6a84a0d304f899eaf.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653232363&t=49d21374861e863de3d07fc0daee390c'
constructor() {
this.backgroundImage = new BackgroundImage();
}
setSrc(src) {
this.backgroundImage.setSrc(loadingBackgroundImage.LOADING_URL);
let img = new Image();
img.onload = () => {
this.backgroundImage.setSrc(src);
}
img.src = src;
}
}
let backgroundImage = new loadingBackgroundImage();
background.addEventListener('click',(event) => {
let src = event.target.dataset.src;
backgroundImage.setSrc(src);
})
</script>
</html>
