专栏首页前端一会javascript设计模式十:装饰者模式

javascript设计模式十:装饰者模式

在js函数开发中,想要为现有函数添加与现有功能无关的新功能时,按普通思路肯定是在现有函数中添加新功能的代码。这并不能说错,但因为函数中的这两块代码其实并无关联,后期维护成本会明显增大,也会造成函数臃肿。

比较好的办法就是采用装饰器模式。在保持现有函数及其内部代码实现不变的前提下,将新功能函数分离开来,然后将其通过与现有函数包装起来一起执行。

先来看个比较原始的js版装饰器模式实现:

 1var Plane = function(){}
 2
 3Plane.prototype.fire = function(){
 4    console.log('发射普通子弹');
 5}
 6
 7//增加两个装饰类,导弹类和原子弹类
 8var MissileDecorator = function(plane){
 9    this.plane = plane;
10}
11MissileDecorator.prototype.fire = function(){
12    this.plane.fire();
13    console.log('发射导弹');
14}
15
16var AtomDecorator = function(plane){
17    this.plane = plane;
18}
19AtomDecorator.prototype.fire = function(){
20    this.plane.fire();
21    console.log('发射原子弹');
22}
23
24var plane = new Plane();
25console.log(plane);
26plane = new MissileDecorator(plane);
27console.log(plane);
28plane = new AtomDecorator(plane);
29console.log(plane);
30
31plane.fire();
32
33/*
34发射普通子弹
35发射导弹
36发射原子弹
37*/

升级版装饰器模式,通过为js的Function构造函数添加实例方法before和after来实现。

Function.prototype.before和Function.prototype.after接收一个函数作为参数,这个函数就是新添加的函数,它装载了新添加的功能代码。

接下来把当前的this保存起来,这个this指向原函数(Function是js中所有函数的构造器,所以js中的函数都是Function的实例,Function.prototype中的this就指向该实例函数)

然后返回一个'代理'函数,这个代理函数只是结构上像'代理'而已,并不承担代理的职责(比如控制对象的访问)。它的工作就是把请求分别转发给新添加的函数和原函数,且负责保证它们的执行顺序,让新添加的函数在原函数之前执行(前置装饰 Function.prototype.before; 后置装饰 Function.prototype.after),从而实现动态装饰的效果。

 1// AOP 装饰函数
 2Function.prototype.before = function(beforefn){
 3    var _self = this;       //保存原函数的引用
 4    return function(){      //返回包含了原函数和新函数的‘代理’函数
 5        beforefn.apply(this, arguments);        //先执行新函数,且保证this不会被劫持,新函数接受的参数也会原封不动的传入原函数,新函数在原函数之前执行
 6        return _self.apply(this, arguments);    //再执行原函数并返回原函数的执行结果,并保证this不被劫持
 7    }
 8}
 9
10Function.prototype.after = function(afterfn){
11    var _self = this;       //保存原函数的引用
12    return function(){      //返回包含了原函数和新函数的‘代理’函数
13        var ret = _self.apply(this, arguments);  //先执行原函数并返回原函数的执行结果,并保证this不被劫持,原函数执行的结果会赋值给ret变量,交由'代理'函数最后return
14        afterfn.apply(this, arguments);         //再执行新函数,且保证this不会被劫持,新函数接受的参数也会原封不动的传入原函数,新函数在原函数之前执行      
15        return ret;    
16    }
17}
18
19//定义原函数
20var print = function(){
21    console.log('打印原函数执行结果');
22}
23
24print = print.before(function(){
25    console.log('打印前置装饰函数的执行结果');
26})
27
28print = print.after(function(){
29    console.log('打印后置装饰函数的执行结果');
30})
31
32//执行装饰后的print函数,为原函数print函数添加的装饰器对用户来说看起来是透明的
33print();
34
35//打印结果
36/*
37打印前置装饰函数的执行结果
38打印原函数执行结果
39打印后置装饰函数的执行结果
40*/

上例中的AOP装饰器是通过在Function.prototype上添加before和after方法实现的,但有时这种直接污染函数原型的方法并不好,可以做些变通,把原函数和新函数都作为参数传入before和after方法中

 1var before = function(fn, beforefn){
 2    return function(){
 3        beforefn.apply(this, arguments)
 4        return fn.apply(this, arguments)
 5    }
 6}
 7
 8var after = function(fn, agterfn){
 9    return function(){
10        var ret = fn.apply(this, arguments)
11        agterfn.apply(this, arguments)
12        return ret;
13    }
14}
15
16var a = function(){
17    console.log('原函数执行结果');
18}
19
20a = before(a, function(){
21    console.log('前置装饰函数执行结果');
22})
23
24a = after(a, function(){
25    console.log('后置装饰函数执行结果');
26})
27
28a()
29/*
30前置装饰函数执行结果
31原函数执行结果
32后置装饰函数执行结果
33*/

最后再来个装饰器模式的实例应用。

在实际开发中比较常见的需求是用户数据上报,一般会在项目开发差不多后,陆续有此类需求提出,但此时如果要在对应函数中添加数据上报功能代码时,就会改动原有函数,既麻烦又增加开发测试成本。此时最好的就是使用装饰器模式通过将上报函数装饰到原有函数上。

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7    <title>装饰者模式应用数据上报</title>
 8</head>
 9<body>
10    <button type="button" id="btn">点击登录并上报数据</button>
11</body>
12<script>
13var showDialog = function(){
14    console.log('显示登录弹窗');
15}
16
17var log = function(){
18    console.log('计数上报');
19}
20
21var after = function(fn, afterFn){
22    return function(){
23        var ret = fn.apply(this, arguments)
24        afterFn.apply(this, arguments)
25        return ret;
26    }
27}
28
29showDialog = after(showDialog, log)
30
31document.getElementById('btn').onclick = showDialog;
32
33</script>
34</html>

本文分享自微信公众号 - 前端小二(frontendxiao2),作者:小二君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《你不知道的JavaScript》:js委托设计的真实案例与总结

    实际需求,web开发中有一个典型的前端场景,创建UI控件(按钮、下拉列表等)。用jq的选择器来简化选择过程,与实现思路不冲突。

    前端_AWhile
  • javascript设计模式八:职责链模式

    职责链的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象能处理它为止,...

    前端_AWhile
  • 编写可维护代码3:适当的抛出错误提示

    在js开发中,调试错误是一个比较头疼的事,又不像java的debug那么方便,定位错误往往不是那么容易,除非对代码熟悉无比,但即使是自己写的代码,功能一复杂,时...

    前端_AWhile
  • Dev 等待提示 WaitDialogForm 另外版

       一、Dev的等待提示框                                                                  ...

    跟着阿笨一起玩NET
  • uni-app实图片和视频上传

    使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件...

    小周sri的码农
  • [PHP] PHP的纯CPU基准测试(PHP5.5.9 vs PHP7.2.1)

    2.micro_bench.php 也可以在 PHP 源代码发布的 php-src/Zend 目录中找到

    陶士涵
  • 浅谈JavaScript的函数表达式(闭包)

      前文已经简单的介绍了函数的闭包。函数的闭包就是有权访问另一个函数作用域的函数,也就是函数内部又定义了一个函数。 1 var Super=function(n...

    水击三千
  • AndroidStudio制作“我”的界面,设置,修改密码,设置密保和找回密码

    大家好,我是 Vic,今天给大家带来AndroidStudio制作“我”的界面,设置,修改密码,设置密保和找回密码的概述,希望你们喜欢

    达达前端
  • (五十二)c#Winform自定义控件-LED数字

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • (四十九)c#Winform自定义控件-下拉框(表格)

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏

扫码关注云+社区

领取腾讯云代金券