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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
深入研究React中setState源码
Nov 17 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
浅谈javascript错误处理
Aug 11 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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/23 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
简明json介绍
2008/09/28 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python文本数据相似度的度量
2018/03/12 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
初中数学教学反思
2014/01/16 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015年重阳节主持词
2015/07/04 职场文书