浅析JavaScript设计模式——代理模式

本文介绍了JavaScript中的代理模式,包括保护代理、虚拟代理、缓存代理等,强调了代理模式在控制对象访问、延迟加载和性能优化等方面的作用。通过实例展示了如何使用代理模式实现图片预加载和数据同步控制,帮助理解代理模式的重要性和应用。
摘要由CSDN通过智能技术生成

tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( ‘ω’ )و

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

好久没有写设计模式的文章了
今天要写的代理模式可能内容要多一些
代理模式非常有用,代理模式也分为很多很多种,我只谈一些常见并且简单的
思想其实都是一样的
代理这个词我们并不陌生,在生活中例子也很多,比如,经纪人…
当我们不方便直接访问一个对象或者访问对象不满足我们需求的时候
我们可以把这个对象的控制权交给一个代理对象,让它来进行处理
我们使用这个代理对象,代理对象使用本体对象
就是这样的关系

#保护代理#
保护代理用于控制不同访问权限的对象对目标对象的访问
什么意思呢?
我的理解是,保护代理可以帮助过滤一些不合理的请求
我们JavaScript中不是很容易实现保护代理,因为一般情况下我们不好判断到底是谁访问了对象
而且它不常用,但是为了让大家理解,我还是简单的举一个小例子
(不会有这样的情况,只是帮助大家理解)

function privilege(identity){
    console.info('尊贵的' + identity + ',您享有全部特权~')
}

这个函数输入会员等级,会打印不同的信息
现在我写两条执行语句

demo('vip');
demo('svip');


这样我们发现不管是vip还是svip都拥有全部特权了
这显然是不公平的~(真的不是针对谁(⊙▽⊙))
所以我们加一个保护代理函数(proxy是代理的意思)

function proxyPrivilege(identity){
    if(identity === 'svip'){
        privilege(identity);
    }else{
        console.warn('氪金能使你变得更强大,用薪创造快乐,没钱xxxx');
    }
}

这个保护代理函数会检测你的身份,这样只有你是svip,才可以拥有全部特权~

proxyPrivilege('svip');
proxyPrivilege('vip');

嗯这回公平了
好吧开个玩笑,这里真的没梗(才怪)
通过这个保护代理简单的例子我们来初步认识一下这个代理模式
重点是这个思想
由于它并不是我要讲的重头戏,所以在此举了一个无厘头的例子
#代理的意义#
看了上面的例子,可能大家要问了
为什么要使用代理啊,多麻烦啊,我一个函数解决了

function privilege(identity){
    if(identity === 'svip'){
        console.info('尊贵的' + identity + ',您享有全部特权~')
    }else{
        console.warn('氪金能使你变得更强大,用薪创造快乐,没钱xxxx');
    }
}
privilege('svip');
privilege('vip');

结果相同
看起来这好像是最佳的写法,实则不是


这里我先说一个面向对象设计的原则——单一职责原则
(先简单说明一下,以后我也会整理设计原则的博文)
单一职责原则:就一个类而言,应该仅有一个引起它变化的原因
这里的类在我们JavaScript也可以引申为函数和对象
这话真的不知道是谁总结的,完全不懂什么意思啊,相当晦涩有木有
我来给大家通俗的解释一下
如果一个对象承担了太多功能,意味着这个对象就会变得庞大
这样如果其中一个功能需要改动,我们就要改变这个对象
也就是说引起它变化的原因就会有很多
所以我们最好把行为分布到颗粒化的对象中
多职责的对象导致了脆弱和低内聚的设计


解释完毕 好了回到我最开始写的代码
为什么我要这么写
假如在未来某一天所有人都可以拥有特权而不仅仅是svip(虽然不可能)
这样我要做的就是不使用保护代理(或删掉),而使用本体
但是如果你把职责都封装进一个函数,我们就需要重写这个函数
什么是单一职责?
我的代理函数负责保护,我的本体函数负责处理
这就是单一职责
由于我写的例子过于简单(并且实际没完成什么工作)
所以大家可能体会不到单一职责到底有多强大
不过没关系,往下看我们可以继续体会together
#本体与代理的接口一致#
上面说到了,如果某一天所有人都享有全部特权
我做的仅仅是删掉代理函数,使用本体函数
这样做的前提是什么呢?
前提是本体和代理可以相互替换
可以替换意味着具有相同的接口
不过在我所举得例子中,并没有显示出有什么接口(下面你会见到&#x

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值