新手快速入门JavaScript装饰者模式与AOP


Posted in Javascript onJune 24, 2019

什么是装饰者模式

当我们拍了一张照片准备发朋友圈时,许多小伙伴会选择给照片加上滤镜。同一张照片、不同的滤镜组合起来就会有不同的体验。这里实际上就应用了装饰者模式:是通过滤镜装饰了照片。在不改变对象(照片)的情况下动态的为其添加功能(滤镜)。

需要注意的是:由于 JavaScript 语言动态的特性,我们很容易就能改变某个对象(JavaScript 中函数是一等公民)。但是我们要尽量避免直接改写某个函数,这会导致代码的可维护性、可扩展性变差,甚至会污染其他业务。

什么是 AOP

想必大家对"餐前洗手、饭后漱口"都不陌生。这句标语其实就是 AOP 在生活中的例子:吃饭这个动作相当于切点,我们可以在这个切点前、后插入其它如洗手等动作。

AOP(Aspect-Oriented Programming):面向切面编程,是对 OOP 的补充。利用AOP可以对业务逻辑的各个部分进行隔离,也可以隔离业务无关的功能比如日志上报、异常处理等,从而使得业务逻辑各部分之间的耦合度降低,提高业务无关的功能的复用性,也就提高了开发的效率。

在 JavaScript 中,我们可以通过装饰者模式来实现 AOP,但是两者并不是一个维度的概念。 AOP 是一种编程范式,而装饰者是一种设计模式。

ES3 下装饰者的实现

了解了装饰者模式和 AOP 的概念之后,我们写一段能够兼容 ES3 的代码来实现装饰者模式:

// 原函数
var takePhoto =function(){
console.log('拍照片');
}
// 定义 aop 函数
var after=function( fn, afterfn ){ 
return function(){
let res = fn.apply( this, arguments ); 
afterfn.apply( this, arguments );
return res;
}
}
// 装饰函数
var addFilter=function(){
console.log('加滤镜');
}
// 用装饰函数装饰原函数
takePhoto=after(takePhoto,addFilter);
takePhoto();

这样我们就实现了抽离拍照与滤镜逻辑,如果以后需要自动上传功能,也可以通过aop函数after来添加。

ES5 下装饰者的实现

在 ES5 中引入了Object.defineProperty,我们可以更方便的给对象添加属性:

let takePhoto = function () {
console.log('拍照片');
}
// 给 takePhoto 添加属性 after
Object.defineProperty(takePhoto, 'after', {
writable: true,
value: function () {
console.log('加滤镜');
},
});
// 给 takePhoto 添加属性 before
Object.defineProperty(takePhoto, 'before', {
writable: true,
value: function () {
console.log('打开相机');
},
});
// 包装方法
let aop = function (fn) {
return function () {
fn.before()
fn()
fn.after()
}
}
takePhoto = aop(takePhoto)
takePhoto()

基于原型链和类的装饰者实现

我们知道,在 JavaScript 中,函数也好,类也好都有着自己的原型,通过原型链我们也能够很方便的动态扩展,以下是基于原型链的写法:

class Test {
takePhoto() {
console.log('拍照');
}
}
// after AOP
function after(target, action, fn) {
let old = target.prototype[action];
if (old) {
target.prototype[action] = function () {
let self = this;
fn.bind(self);
fn(handle);
}
}
}
// 用 AOP 函数修饰原函数
after(Test, 'takePhoto', () => {
console.log('添加滤镜');
});
let t = new Test();
t.takePhoto();

使用 ES7 修饰器实现装饰者

在 ES7 中引入了@decorator 修饰器的提案,参考阮一峰的文章。修饰器是一个函数,用来修改类的行为。目前Babel转码器已经支持。注意修饰器只能装饰类或者类属性、方法。三者的具体区别请参考 MDN Object.defineProperty ;而 TypeScript 的实现又有所不同:TypeScript Decorator。

接下来我们通过修饰器来实现对方法的装饰:

function after(target, key, desc) {
const { value } = desc;
desc.value = function (...args) {
let res = value.apply(this, args);
console.log('加滤镜')
return res;
}
return desc;
}
class Test{
@after
takePhoto(){
console.log('拍照')
}
}
let t = new Test()
t.takePhoto()

可以看到,使用修饰器的代码非常简洁明了。

场景:性能上报

装饰者模式可以应用在很多场景,典型的场景是记录某异步请求请求耗时的性能数据并上报:

function report(target, key, desc) {
const { value } = desc;
desc.value = async function (...args) {
let start = Date.now();
let res = await value.apply(this, args);
let millis = Date.now()-start;
// 上报代码
return res;
}
return desc;
}
class Test{
@report
getData(url){
// fetch 代码
}
}
let t = new Test()
t.getData()

这样使用@report修饰后的代码就会上报请求所消耗的时间。扩展或者修改report函数不会影响业务代码,反之亦然。

场景:异常处理

我们可以对原有代码进行简单的异常处理,而无需侵入式的修改:

function handleError(target, key, desc) {
const { value } = desc;
desc.value = async function (...args) {
let res;
try{
res = await value.apply(this, args);
}catch(err){
// 异常处理
logger.error(err)
}
return res;
}
return desc;
}
class Test{
@handleError
getData(url){
// fetch 代码
}
}
let t = new Test()
t.getData()

通过以上两个示例我们可以看到,修饰器的定义很简单,功能却非常强大。

小结

我们一步一步通过高阶函数、原型链、Object.defineProperty和@Decorator分别实现了装饰者模式。接下来在回顾一下:

  • 装饰者模式非常适合给业务代码附加非业务相关功能(如日志上报),就如同给照片加滤镜;
  • 装饰者模式非常适合无痛扩展别人的代码(你经常需要接手别人的项目吧)

有些朋友可能会觉得装饰者模式和 vue 的 mixin 机制很像,其实他们都是“开放-封闭原则”和“单一职责原则”的体现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,

Javascript 相关文章推荐
给js文件传参数(详解)
Jul 13 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
javascript模块化简单解析
Apr 07 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Vue 监听列表item渲染事件方法
Sep 06 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 #Javascript
JS字符串常用操作方法实例小结
Jun 24 #Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 #Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 #Javascript
新手如何快速理解js异步编程
Jun 24 #Javascript
简单了解小程序+node梳理登陆流程
Jun 24 #Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
You might like
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
js版本A*寻路算法
2006/12/22 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
学校办公室主任职责
2013/12/27 职场文书
年终总结会议主持词
2014/03/17 职场文书
珠宝店促销方案
2014/03/21 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
年会搞笑主持词
2014/03/27 职场文书
综合内勤岗位职责
2014/04/14 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
银行员工考核评语
2014/12/31 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
灵魂歌王观后感
2015/06/17 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
SQL Server 中的事务介绍
2022/05/20 SQL Server