设计模式之代理模式

最新推荐文章于 2024-08-24 21:02:35 发布

快乐的蜜蜂

最新推荐文章于 2024-08-24 21:02:35 发布

阅读量96

点赞数

分类专栏： JS设计模式文章标签：代理模式

本文链接：https://blog.csdn.net/hl971115/article/details/126525562

版权

JS设计模式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代理模式
简单来说,比如狗的父亲很忙, 每天都要做很多的事情,有时候中午就不知道
吃饭了, 所以就通过我们狗儿子去叫他吃饭, 如果狗父亲已经吃过饭了,那么就
不用在管了, 狗父亲就不用管吃饭的事情,就只需要狗儿子来通知他就行了,
这个就是代理模式

abstract class Animal{
    abstract eat();
}

class DogFather implements Animal {
    isFull = false;

    eat(): any {
        console.log("我是猫, 我自己吃东西了");
    }

}

class Dog implements Animal {
    private cat;
    constructor() {
        // 这个是 只有狗儿子 才有联系他爸爸的方式
        this.cat = new DogFather();
    }

    eat(): any {
        // 这个是 判断 狗爸爸 有没有吃饱
        if(this.cat.isFull) {
            this.cat.eat();
        } else {
            console.log("我是狗儿子,  父亲吃饱了, 我来帮他吃");
        }
    }
}

let _dog = new Dog();
_dog.eat();

简单的应用场景
比如说, 我们要操作每一个 li上面的点击事件, 我们不可能给所有的li都加上点击事件, 这个样子会很消耗性能, 我们就在外层给他的父元素加上事件, 去代替他处理这些操作, 达到节省性能的作用

<!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="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    const ul = document.getElementById("ul");
    ul.addEventListener("click", (e)=>{
        alert(e.target.innerText);
    });
</script>
</html>