JavaScript装饰器函数(Decorator)实例详解


Posted in Javascript onMarch 30, 2017

本文实例讲述了JavaScript装饰器函数(Decorator)。分享给大家供大家参考,具体如下:

装饰器函数(Decorator)用于给对象在运行期间动态的增加某个功能,职责等。相较通过继承的方式来扩充对象的功能,装饰器显得更加灵活,首先,我们可以动态给对象选定某个装饰器,而不用hardcore继承对象来实现某个功能点。其次:继承的方式可能会导致子类繁多,仅仅为了增加某一个单一的功能点,显得有些多余了。

下面给出几个常用的装饰器函数示例,相关代码请查看github。

1 动态添加onload监听函数

function addLoadEvent(fn) {
  var oldEvent = window.onload;
  if(typeof window.onload != 'function') {
    window.onload = fn;
  }else {
    window.onload = function() {
      oldEvent();
      fn();
    };
  }
}
function fn1() {
  console.log('onloadFunc 1');
}
function fn2() {
  console.log('onloadFunc 2');
}
function fn3() {
  console.log('onloadFunc 3');
}
addLoadEvent(fn1);
addLoadEvent(fn2);
addLoadEvent(fn3);

JavaScript装饰器函数(Decorator)实例详解

2 前置执行函数和后置执行函数

Function.prototype.before = function(beforfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    beforfunc.apply(this, innerArgs);
    self.apply(this, outerArgs);
  };
};
Function.prototype.after = function(afterfunc) {
  var self = this;
  var outerArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    self.apply(this, outerArgs);
    afterfunc.apply(this, innerArgs);
  };
};
var func = function(name){
  console.log('I am ' + name);
};
var beforefunc = function(age){
  console.log('I am ' + age + ' years old');
};
var afterfunc = function(gender){
  console.log('I am a ' + gender);
};
var beforeFunc = func.before(beforefunc, 'Andy');
var afterFunc = func.after(afterfunc, 'Andy');
beforeFunc('12');
afterFunc('boy');

执行结果,控制台打印如下:

I am 12 years old
I am Andy
I am Andy
I am a boy

3 函数执行时间计算

function log(func){
  return function(...args){
    const start = Date.now();
    let result = func(...args);
    const used = Date.now() - start;
    console.log(`call ${func.name} (${args}) used ${used} ms.`);
    return result;
  };
}
function calculate(times){
  let sum = 0;
  let i = 1;
  while(i < times){
    sum += i;
    i++;
  }
  return sum;
}
runCalculate = log(calculate);
let result = runCalculate(100000);
console.log(result);

注:这里我使用了ES2015(ES6)语法,如果你感兴趣可以查看前面关于ES6的相关内容。

JavaScript装饰器函数(Decorator)实例详解

当然,装饰器函数不仅仅这些用法。天猫使用的Nodejs框架Koa就基于装饰器函数及ES2015的Generator。希望这篇文章能起到抛砖引玉的作用,使你编写更优雅的JS代码。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
ionic实现底部分享功能
May 11 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 #Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 #Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 #Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 #Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 #Javascript
You might like
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python 多线程的实例详解
2017/09/07 Python
Python装饰器原理与用法分析
2018/04/30 Python
通过cmd进入python的实例操作
2019/06/26 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
文员岗位职责
2013/11/09 职场文书
英语自我评价范文
2014/01/24 职场文书
微笑服务演讲稿
2014/05/13 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android