面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了。比如我之前写过代理模式在Java中实现的两篇文章:
Java代理设计模式(Proxy)的四种具体实现:静态代理和动态代理
Java动态代理之InvocationHandler最简单的入门教程
其实和Java一样,JavaScript从语言层面来讲,也提供了对代理这个设计模式的原生支持。我们用一个不到100行代码的例子来看看吧。
下面的代码创建了一个名叫Jerry的Employee对象,然后用函数hireEmployee雇用该Employee进行JavaScript开发:
function Employee(name){
this.name = name;
};
Employee.prototype.work = function(language){
console.log(this.name + " is developing with: " + language);
}
let jerry = new Employee("Jerry");
function hireEmployee(employee, language){
employee.work(language);
}
hireEmployee(jerry, "JavaScript");
打印输出:
Jerry is developing with: JavaScript
现在Jerry在他的业余时间里想学习一些其他的编程语言,但是不想影响自己的本职工作。用技术语言来讲,就是希望Employee原型方法work执行时,打印一行额外的信息,但是不允许修改Employee函数和Employee.prototype.work本身。这时Proxy这种代理模式就派上用场了。
我们为work方法创建一个代理逻辑:
var proxyLogic = {
get: function(target, name) {
if( name == "work"){
var oriFun = target[name].bind(target);
return function(language){
oriFun(language);
console.log("and also study other language in spare time");
}
}
}
}
;
重点看第二行的get方法。两个输入参数,target和name。Target代表当前执行方法的实例,即方法调用者。Name代表具体的方法名称。第4行我们把原始方法取出来,存放到变量oriFun里。第五行返回一个新的JavaScript函数,该函数体的实现逻辑为首先在第六行调用原始方法,然后在第七行执行额外的逻辑。
大家在回忆我之前介绍Java InvocationHandler实现动态代理的文章:
Java动态代理之InvocationHandler最简单的入门教程
是不是思路完全一样?都是在代理逻辑里调用原始方法,然后再执行额外的代码。
这个proxyLogic生成后,怎么把它同我们原始的需要被代理的代码关联起来呢?
只需要1行代码:
var jerryProxy = new Proxy(jerry, proxyLogic );
Proxy函数是JavaScript提供的原生代理构造器,需要两个输入参数:
第一个输入参数是我们的Employee实例,即需要被代码的对象实例,第二个输入参数是我们开发好的代理逻辑。返回的即是装配好的代理对象,该代理对象的work方法实现在第二个输入参数里。
现在我们再次调用hireEmployee,传入Proxy构造器返回的代理对象:
hireEmployee(jerryProxy, "JavaScript");
打印输出,代理逻辑生效了:
和Java的Invocation一样优雅地实现了代理设计模式。
使用Proxy代理设计模式的一个实际例子,请参考我的文章:
巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
作者:JerryWangSAP
链接:https://www.jianshu.com/p/32cd408ad716
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
相关推荐
Proxy 模式学习代码,包括静态代理,动态代理,cglib等
JavaScript中的Proxy对象 Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler); target: 要使用Proxy包装的目标...
arcgis JavaScript api proxy
里面包含了23中设计模式源代码,其中包括工厂模式(Factory)、单例(Singleton)、观察者模式(Observer)、适配器模式(Adapter)、Template模式、Decorate模式、proxy模式等 这些代码对于初学者看起来稍微复杂一些,我...
设计模式C++学习之代理模式(Proxy)
C++设计模式代码资源15_Proxy.zip
代理模式java代码 Proxy(4) 开发宝典......
23种设计模式(Design Pattern)的C++实现范例,包括下面列出的各种模式,代码包含较详细注释。另外附上“设计模式迷你手册.chm” 供参考。 注:项目在 VS2008 下使用。 创建型: 抽象工厂模式(Abstract Factory) ...
C#面向对象设计模式纵横谈(13):Proxy 代理模式(结构型模式)
C#面向对象设计模式纵横谈(13):Proxy 代理模式(结构型模式) (Level 300)
《Head First设计模式》(中文版)共有14章,每章都介绍了几个设计模式,完整地涵盖了四人组版本全部23个设计模式。前言先介绍这本书的用法;第1章到第 11章陆续介绍的设计 5b4 式为Strategy、Observer、Decorator、...
代码仅供参考学习 。
设计模式之Proxy(代理) 设计模式之Adapter(适配器) 设计模式之Composite(组合) 设计模式之Decorator(油漆工) 设计模式之Bridge 设计模式之Flyweight(享元) 行为模式: 设计模式之Template 设计模式之Memento(备忘机制...
《易学 设计模式》 郭志学 编著 随书源代码 ☆ 章节清单:☆ 第01章 欲速则不达:了解设计模式 第02章 磨刀不误砍柴工:UML语言概述 第03章 术业有专攻:简单工厂模式 (SimpleFactory) 第04章 精益求精:工厂方法...
详解设计模式中的proxy代理模式及在Java程序中的实现共14页.pdf.zip
Proxy服务器源代码
Proxy代理模式的经典实例(很有面向对象思想哦)。快速学会Proxy代理模式.
JAVA Proxy 代理模式
Android设计模式之代理模式(Proxy Pattern)
java 代理模式实现代码及设计详解:动态代理模式、静态代理模式