5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

栏目: Java · 发布时间: 5年前

内容简介:当我们拍了一张照片准备发朋友圈时,许多小伙伴会选择给照片加上滤镜。同一张照片、不同的滤镜组合起来就会有不同的体验。这里实际上就应用了装饰者模式:是通过滤镜装饰了照片。在不改变对象(照片)的情况下动态的为其添加功能(滤镜)。需要注意的是:由于 JavaScript 语言动态的特性,我们很容易就能改变某个对象(JavaScript 中函数是一等公民)。但是我们要尽量避免直接改写某个函数,这会导致代码的可维护性、可扩展性变差,甚至会污染其他业务。

5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

什么是装饰者模式

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

需要注意的是:由于 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 around(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 机制很像,其实他们都是“开放-封闭原则”和“单一职责原则”的体现。

附上代码 jsbin 地址:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

iOS面试之道

iOS面试之道

故胤道长、唐巧 / 电子工业出版社 / 2018-7 / 59.00元

《iOS面试之道》是作者将多年的工作经验和积累,结合具体面试内容总结而成的。 《iOS面试之道》共分为3部分。第1部分为面试准备,详细介绍求职中遇到的基本问题,作者根据其多年的经验,在面试流程、简历投递、复习准备方面给出了完善的参考意见和建议。第2部分为算法知识。算法几乎是各种水平的程序员都要面对的考查内容。该部分采用Swift语言重新审视了多种数据结构和算法原理,可以说是为iOS开发者量身......一起来看看 《iOS面试之道》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具