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的原创技术文章,请关注公众号”汪子熙”或者扫描下面二维码:

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值