设计模式篇(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>
正文到此结束
评论插件初始化中...
Loading...