JavaScript代理模式与开发实践（中）

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解代理模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 认识保护代理和虚拟代理

保护代理

保护代理可以基于筛选条件, 控制抽象对象对真实对象的访问, 藉此真实抽象对象。

当一个对象A不希望被除指定对象外直接访问时，通过一个代理对象B处理对对象A的访问。在代理对象B中通过限制访问条件，来保护原对象。

example:

当公司招人时，公司老板不会直接去面试应聘者。而是派出面试官去面试应聘者，面试官面试的同时也检验应聘者的能力是否达到要求。

code:

let company = {
    staff:['chen'],
    recruitStaff(name){
        this.staff.push(name)
        return `欢迎${name}加入公司`
    }
}
​
let chen = {
    judge(target){
       if(target.capacity > 10){
           company.recruitStaff(target.name)
       }
    }
}
​
let liHua = {
    capacity:9,
    name:'liHua'
}
​
chen.judge(liHua)
​

虚拟代理

虚拟代理是代理模式性能方向的分支，通过把消耗性能的行为放在虚拟代理中实现，从而减少不必要的性能开支。

example:

假设小明想要给小红送花，但是小明只能通过小红的闺蜜小绿，转交给小红。并且小红只有在心情好的时候才会收花。

code:

let Flowers = function (){}
let xiaoHong = {
    mood:5,
    receiveFlowers(flower){
        this.mood++
        setTimeout(()=>{
            this.mood = 3
        })
    },
}
​
let xiaoLv = {
    sendFlowers(){
        if (xiaoHong.mood>4){
            let flower = new Flowers()
            xiaoHong.receiveFlowers(flower)
        }
    }
}
​
let xiaoming = {
    callXiaoLv(){
        xiaoLv.sendFlowers()
    }    
}
xiaoming.callXiaoLv()

在以上代码中我们可以看到，我们将买花也就是生成花的实例这一步放在了代理方小绿这里实现。为什么呢？因为如果是小明直接买花的话，当小红心情不好的时候是不会收的。这就导致了花的浪费，也就是性能的浪费。因此通过在代理方鉴别当函数运行时/条件满足时，再创造实例，这样就可以避免不必要的开销了。

尾声

保护代理以及虚拟代理十分常用，在我们熟悉的Vue3也运用了虚拟代理，在响应式对象被使用时才会添加到响应式，这也大大的提升大量数据页面的性能。