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

前言

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

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

本章学习内容👇

• 认识代理模式
• 完成一个代理模式

代理模式

什么是代理模式？

代理模式： 为一个对象提供一个代用品或占位符，以便控制对它的访问。

以日常开发的角度将：就是将一个方法/对象处理前，交给另外一个方法/对象代替处理，起到以下几个方面好处的效果：

• 实现单一职责原则：指一个类或者模块应该有且只有一个改变的原因。

• 在调用目标方法前，通过代理判断来节约资源

  • 可能会有条件不满足的情况
  • 可能会有已经使用的情况

• 控制对象/方法的访问权

• 资源懒加载等等

实现一个基本的代理

example:

小明养了一只小狗—爱德华。由于出差,小明把爱德华寄养到了宠物店。然后通过联系宠物店老板来照顾喂食小狗。

试想这个地方为什么要用代理呢？原因👇

小明想要喂养小狗食物的时候，他是无法直接自己喂的。因为爱德华已经被寄养在宠物店，小明是没有办法直接自己喂的。而这个时候就需要一个通过一个代理对象—即宠物店。小明只有通过联系宠物店，才能够喂养爱德华。而宠物店，又能够监听到爱德华的饥饿状态，只有当爱德华饥饿时才喂。这又避免了爱德华的无用进食。现在能感受到代理的魅力了吗？

code:

let xiaoming = {
    proxyFeed:function(target){
        //通过代理对象喂养
        target.feedPet(aidehua)
    }
}
​
let aidehua ={
    eat:function(){
        aidehua.hp ++
        setInterval(()=>{
            //生命消耗
            aidehua.hp--
        }，10000)
    },
    hp:0
}
​
let petShop = {
    feedPet:function(target){
        if(target.hp < 1){
            //只有饥饿时才喂食
            target.eat()
        }
    }
}
​
xiaoming.proxyFeed(petShop)

尾声

代理模式的思想在前端日常开发中也时常能够运用上，希望你能够掌握它。
在下一章中，会讲解有关代理的俩个主要模式——保护代理&虚拟代理，欢迎阅读.