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 相关文章推荐
js正则表达exec与match的区别说明
Jan 29 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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 define函数的使用说明
2008/08/27 PHP
20个PHP常用类库小结
2011/09/11 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
应届生面试求职信
2014/07/02 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Python 图片添加美颜效果
2022/04/28 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript