Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >设计模式初探-代理模式

设计模式初探-代理模式

作者头像
IMWeb前端团队
发布于 2019-12-04 14:37:14
发布于 2019-12-04 14:37:14
34700
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

是什么

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

生活是一切东西的起源,在生活中也到处能看到代理模式的影子。 明星有经纪人作为代理,要联系明星的档期其实是和经纪人联系,经纪人联系好之后,再有明星负责签约、演出。

想想平时工作中也有这种例子,每个小组都要发周报,组长负责周报的收集, 总监通过周报查看每个成员的工作情况,而不是每个成员都直接向总监汇报。

甚至古代也能找到类似的例子,挟天子以令诸侯,曹操和汉献帝的关系,也有代理模式的影子。

为什么

大概对代理模式有个模糊的概念了,那为什么要存在代理模式?

单一职责原则

想一想,明星为什么要有经纪人。经纪人可以负责帮助明星安排各种工作,对明星包装炒作等等。而明星自己只专注于演出。如果所有工作都交给明星自己完成,一个再高效再厉害的人估计也得忙疯了。

相应的,在面向对象设计原则中有单一职责原则,它规定一个类应该只有一个发生变化的原因。如果一个类承担了太多职责,这个类就会变得越来越庞大,难以维护。

对象无法被直接操作

还是看下明星和经纪人这个例子。作为一个大牌明星,不可能把自己的联系方式公开给大家。那别人怎么联系明星呢?经纪人这时候就起作用了,通过联系经纪人相当于间接的和明星有了联系。

对应程序设计里的场景,比如文档里面装了很大一张图片,在文档被打开的时候要加载里面的内容一起打开,但是如果等加载完这个大图片再打开文档用户要等太久,所以我们可以为这个图片设置一个代理,让代理慢慢打开这个图片而不影响文档本来的功能。

实际场景

权限管理
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var User = {
    post: function () {
        console.log('发文章');
    },
    remove: function () {
        console.log('删除文章');
    }
}

var ProxyUser = {
    post: function () {
        if (有权限) {
            User.post();
        }

        console.log('没有权限发文章');
    },
    remove: funtion () {
        if (有权限) {
            User.remove();
        }

        console.log('没有权限删除文章');
    }
}

上面是一个简单的权限管理的例子。将权限管理的部分抽象出一个代理来实现。有人可能会说,代码本来可以写下面这么简单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var User = {
    post: function () {
        if (有权限) {
            console.log('发文章');
        }

        console.log('没有权限发文章');
    },
    remove: funtion () {
        if (有权限) {
            console.log('删除文章');
        }

        console.log('没有权限删除文章');
    }
}

还非要搞个代理瞎折腾?

想想我们平时工作中越来越庞大的文件,想想每次改动一个小问题要折腾着把一个文件上千行代码看一遍,再想想前面提到的单一职责原则。我们发现这样分解其实是更易于维护的。用户类本身并不关注权限。

想想假设以后有个场景,不再需要权限控制了,使用了代理模式的场景,我们要做的只是把ProxyUser删了,接口换成User就完了。没有使用代理模式的,则是费尽心思改动这个User类。

再想想,之后我们权限规则有变动,只需要调整Proxy就好了,而并不关注用户到底是如何发文章,如何删除文章的。这也正是遵循了单一职责原则带来的好处。

loading态

我们经常遇到这样的场景,发一个ajax请求获得一堆数据,请求过程中展示loading态,数据回来隐藏loading,用请求回来的数据初始化模块。

这也可以用代理模式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var Mod = {
        init: function (data) {
            // 主逻辑
        }
    }

    var ProxyLoading = {
        init: function (mod) {
            showLoading();

            if (请求成功) {
                hideLoading();
                mod.init(data);
            } else {
                hideLoading();
            }
        } 
   }

   ProxyLoading.init(Mod);

简单的抽出一个Proxy来处理loading做的事情。

小结

代理模式远非这么简单,本文也只是作者此时此刻的理解,希望可以起到抛砖引玉的作用,不对之处还望各位大侠指正~~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-02-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript设计模式之代理模式
什么Nginx代理、JSONP、科学上网…,你平时的工作中可能都用了代理模式,只是你不知道。
FinGet
2019/06/28
2990
JavaScript设计模式之代理模式
和 lvgo 一起学设计模式(六)结构型之代理模式
设计模式的学习问题⁉❔ 我一直都在想如何学会一个新东西,和掌握一个旧东西?,有很多前辈给过一些建议和意见?,(当然不是直接给我,都是看大佬的文章或者书籍当中。)先去用,再去学。嗯,我想是的,这样肯定是
星尘的一个朋友
2020/11/25
3020
和 lvgo 一起学设计模式(六)结构型之代理模式
JavaScript设计模式 单例模式
面向对象的单例模式,是通过new关键字来实例化我们想要的对象,并将其赋值给instance。
菜的黑人牙膏
2019/01/21
5170
给女朋友讲解什么是代理模式
前言 只有光头才能变强 回顾前面: ThreadLocal就是这么简单 多线程三分钟就可以入个门了! 多线程基础必要知识点!看了学习多线程事半功倍 Java锁机制了解一下 AQS简简单单过一遍 Lock锁子类了解一下 线程池你真不来了解一下吗? 多线程之死锁就是这么简单 多线程就先告一段落了,昨天写完多线程,本来打算是看IO的知识点的,后来看了一下IO的几种模型,又翻了一下《Java编程思想》。不知道从哪下手~~ 在看到FilterInputStream和FilterOutputStream时看到了之前常听
Java3y
2018/06/11
9891
JavaScript设计模式--代理模式
代理模式:为一个对象提供一个代用品或占位符,以便控制对它的访问。 代理分为:保护代理和虚拟代理 保护代理:用于控制不同权限的对象对目标对象的访问,在JavaScript中很难判断谁访问了某个对象,所以保护代理很难实现。
奋飛
2019/08/15
4560
JavaScript设计模式之代理模式
当你想买商业保险的时候,却不得不亲自去了解不同公司的方案和限制。在自己百忙之中分神和不同的销售博弈。有了职业的保险经纪人,你只要向他/她讲述你的需求,经纪人就用自己的关系量身定做了一套方案给你。买哪家,怎么买,等等。保险经纪代理的模式,很好地体现了程序设计关注点分离的思想。
一粒小麦
2019/10/30
3490
JavaScript设计模式之代理模式
JS设计模式之代理模式
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/71374535
j_bleach
2019/07/02
8420
JS设计模式之代理模式
「设计模式 JavaScript 描述」代理模式
代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景。比如,明星都有经纪人作为代理。如果想请明星来办一场商业演出,只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后,再把合同交给明星签。
用户8921923
2022/10/24
3800
javascript设计模式三:代理模式
单一职责其实就是指在一个类中(js中通常指对象和函数等),应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性,从而当变化发生时,程序设计会尽量少的受到意外破坏。
前端_AWhile
2019/08/29
3200
JavaScript 设计模式学习总结与感悟(开发&面试必备)
最近阅读了《JavaScript设计模式与开发实践》,收获颇丰,于是想写一点总结及感想
coder_koala
2020/07/22
5710
JavaScript 设计模式学习总结与感悟(开发&面试必备)
代理模式详解
代理模式可以看作委托别人去办事。如果你想办一件事(比如访问一个资源、操作一个文件),但因为种种原因不能直接去做,就可以通过一个中间人来帮忙。这种中间人就是代理,既可以帮你完成任务,又可以加点“附加服务”,比如检查你的权限、记录操作日志等。
码事漫谈
2024/12/20
1640
代理模式详解
JavaScript设计模式之代理模式
https://github.com/ahwgs/design-pattern-learning/tree/master/7.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F
w候人兮猗
2020/07/01
2890
前端的设计模式系列-代理模式
代码也写了几年了,设计模式处于看了忘,忘了看的状态,最近对设计模式有了点感觉,索性就再学习总结下吧。
windliang
2022/08/20
2930
前端的设计模式系列-代理模式
懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!
沉浸式趣谈
2024/03/13
940
懒得改变原始对象?JavaScript代理模式教你怎样一步步偷懒!
JavaScript设计模式 代理模式
代理模式的关建是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际访问的是替身对象,替身对象对请求做出一些处理后,再把请求转交给本体对象。
菜的黑人牙膏
2019/01/21
3610
彻底明白Android设计模式—(动态)代理模式
这种模式有什么应用场景呢?先说下生活中对应的场景,明星接通告一般商家要找明星做活动,是要先找到他的经纪人,然后经纪人去负责一些琐碎的或者运营方面的事情,而明星只需要做具体的活动相关事情就可以了。这里经纪人的作用就是作为了一个代理。
码上积木
2020/09/27
5140
代理模式(javascript版)5
核心在于:另外,想一下你通过链家的中介买房子,算不算代理模式?—— 不算,此时是三方关系,买家、中介、卖家,合同上都要签字的。而上面的明星经纪人却是两方关系,你和经纪人联系就好了,你不用跟明星直接联系。 你可可以说是比如两个数交换位置是不是得添加三个数啊,是吧
贵哥的编程之路
2020/10/28
2460
代理模式(javascript版)5
JavaScript 设计模式 —— 单例模式
从事开发岗位也有一年多的时间了,见识过陈年老项目,也从零到一搭建过一个项目。随着项目和业务的不断扩张,写下的代码如果没有进行设计,就渐渐变成了 emm ... x 山,怎么写都不对劲,过段时间就想着重构。
前端LeBron
2022/11/21
4230
JavaScript 设计模式 —— 单例模式
小谈设计模式(8)—代理模式
主要对目前市面上常见的23种设计模式进行逐一分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步,加油,各位。
学编程的小程
2023/10/11
1870
小谈设计模式(8)—代理模式
代理模式的种类、原理及各种实例详解
代理模式是开发中常用的一种设计模式,每一种设计模式的出现都会极大的解决某方面的问题,代理模式也是一样,本文将会用通俗的语言来解释什么是代理模式?代理模式的种类、代码示例、每种代理模式的优缺点和代理模式适用的场景。
java之旅
2020/03/23
7760
相关推荐
JavaScript设计模式之代理模式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验