100行代码让您学会JavaScript原生的Proxy设计模式

简介:


面向对象设计里的设计模式之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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

相关文章
|
13天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
1月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
|
1月前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
26 3
|
3月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
77 1
|
1月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
4天前
|
JavaScript 计算机视觉
原生js通过年龄判断是否可以抽奖
原生js通过年龄判断是否可以抽奖
9 0
|
5天前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
10 0
|
5天前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
11 0
|
14天前
|
前端开发 JavaScript 调度
原生JavaScript实现弹幕组件
原生JavaScript实现弹幕组件