javascript设计模式之装饰者模式


Posted in Javascript onJanuary 30, 2020

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

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

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

var Plane = function(){}

Plane.prototype.fire = function(){
 console.log('发射普通子弹');
}

//增加两个装饰类,导弹类和原子弹类
var MissileDecorator = function(plane){
 this.plane = plane;
}
MissileDecorator.prototype.fire = function(){
 this.plane.fire();
 console.log('发射导弹');
}

var AtomDecorator = function(plane){
 this.plane = plane;
}
AtomDecorator.prototype.fire = function(){
 this.plane.fire();
 console.log('发射原子弹');
}

var plane = new Plane();
console.log(plane);
plane = new MissileDecorator(plane);
console.log(plane);
plane = new AtomDecorator(plane);
console.log(plane);

plane.fire();

/*
发射普通子弹
发射导弹
发射原子弹
*/

升级版装饰器模式,通过为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),从而实现动态装饰的效果。

// AOP 装饰函数
Function.prototype.before = function(beforefn){
 var _self = this;  //保存原函数的引用
 return function(){  //返回包含了原函数和新函数的‘代理'函数
  beforefn.apply(this, arguments);  //先执行新函数,且保证this不会被劫持,新函数接受的参数也会原封不动的传入原函数,新函数在原函数之前执行
  return _self.apply(this, arguments); //再执行原函数并返回原函数的执行结果,并保证this不被劫持
 }
}

Function.prototype.after = function(afterfn){
 var _self = this;  //保存原函数的引用
 return function(){  //返回包含了原函数和新函数的‘代理'函数
  var ret = _self.apply(this, arguments); //先执行原函数并返回原函数的执行结果,并保证this不被劫持,原函数执行的结果会赋值给ret变量,交由'代理'函数最后return
  afterfn.apply(this, arguments);   //再执行新函数,且保证this不会被劫持,新函数接受的参数也会原封不动的传入原函数,新函数在原函数之前执行  
  return ret; 
 }
}

//定义原函数
var print = function(){
 console.log('打印原函数执行结果');
}

print = print.before(function(){
 console.log('打印前置装饰函数的执行结果');
})

print = print.after(function(){
 console.log('打印后置装饰函数的执行结果');
})

//执行装饰后的print函数,为原函数print函数添加的装饰器对用户来说看起来是透明的
print();

//打印结果
/*
打印前置装饰函数的执行结果
打印原函数执行结果
打印后置装饰函数的执行结果
*/

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

var before = function(fn, beforefn){
 return function(){
  beforefn.apply(this, arguments)
  return fn.apply(this, arguments)
 }
}

var after = function(fn, agterfn){
 return function(){
  var ret = fn.apply(this, arguments)
  agterfn.apply(this, arguments)
  return ret;
 }
}

var a = function(){
 console.log('原函数执行结果');
}

a = before(a, function(){
 console.log('前置装饰函数执行结果');
})

a = after(a, function(){
 console.log('后置装饰函数执行结果');
})

a()
/*
前置装饰函数执行结果
原函数执行结果
后置装饰函数执行结果
*/

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>装饰者模式应用数据上报</title>
</head>
<body>
 <button type="button" id="btn">点击登录并上报数据</button>
</body>
<script>
var showDialog = function(){
 console.log('显示登录弹窗');
}

var log = function(){
 console.log('计数上报');
}

var after = function(fn, afterFn){
 return function(){
  var ret = fn.apply(this, arguments)
  afterFn.apply(this, arguments)
  return ret;
 }
}

showDialog = after(showDialog, log)

document.getElementById('btn').onclick = showDialog;

</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
Javascript 面向对象特性
Dec 28 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
原生js+ajax分页组件
Jan 30 #Javascript
javascript设计模式之迭代器模式
Jan 30 #Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 #Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 #Javascript
vue引用外部JS的两种种方法
Jan 28 #Javascript
Java Varargs 可变参数用法详解
Jan 28 #Javascript
关于引入vue.js 文件的知识点总结
Jan 28 #Javascript
You might like
PHP静态类
2006/11/25 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php生成短域名函数
2015/03/23 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
农历与西历对照
2006/09/06 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
javascript 函数使用说明
2010/04/07 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
python分布式环境下的限流器的示例
2017/10/26 Python
基于python实现名片管理系统
2018/11/30 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Pytorch中.new()的作用详解
2020/02/18 Python
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
C#面试题问题集
2016/04/02 面试题
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
工作鉴定评语
2014/05/04 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
市场部经理岗位职责
2015/02/02 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
合同范本之电脑出租
2019/08/13 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python