前端装饰器,AOP的使用

什么是装饰器？

了解AOP

在学习js中的装饰器之间，咱们须要了解AOP(面向切面编程)编程思想。

AOP是一种能够经过预编译方式和运行期动态代理实如今不修改源代码的状况下给程序动态统一添加功能的一种技术。AOP实际是GoF设计模式的延续，设计模式孜孜不倦追求的是调用者和被调用者之间的解耦,提升代码的灵活性和可扩展性，AOP能够说也是这种目标的一种实现。

咱们简单的举个例子来讲明AOP。

这两个流程中，验证用户是共同的逻辑功能。那么在这儿，你们可能会想到抽取这个功能的代码，作成公共方法以便调用。

可是，作成公共方法调用的话，是侵入你的主流程里面的，很是的不雅观，也会混淆你的控制流程。在这儿，AOP就有了用武之地。

在一整个流程中，将验证用户这个功能切出来。而其余地方须要使用，只要将东西切进去便可。

JavaScript中的AOP:装饰Decorator

在前端JS编程中，咱们能够采用Decorator装饰器，来实现AOP编程。你们也常常在React中，使用React-Redux的装饰器，来辅助咱们创建HOC高阶函数，链接Redux的Store。

在进行实战以前，咱们须要明确一个点就是：装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。

装饰器使用

class index {
  say () {
    console.log('say hello!')
  }
}
复制代码

咱们先创建一个简单的类，这个类的做用，就是在执行say()的时候，打印出say hello。可是，在说话前，咱们须要站起来。那怎么作？

class index {
  say () {
 		console.log('站起来')
    console.log('say hello!')
  }
}
复制代码

在使用装饰器以前，咱们须要侵入主流程，将代码写入。而如今，咱们有了装饰器这一个工具。

class index {
  @up
  say () {
    console.log('say hello!')
  }
}
function up (target,name,descriptor) {
  const oldfn = target.descriptor.value
  target.descriptor.value = function () {
    console.log('站起来')
    oldfn.call(this)
  }
  return target
}
复制代码

以上代码能够经过https://babeljs.io/repl编译后执行。经过编译后，咱们执行如下代码:

var id = new index()
id.say()
复制代码

这个时候你会看到以下图:

成功的为say方法装饰了一个站起来。

至此，一个简单的装饰器范例已经完成。你们能够经过这种方式修改本身的代码，使本身的代码更加解耦。

参考文章

ECMAScript 6 入门:es6.ruanyifeng.com/#docs/decor…

blog.csdn.net/yanquan345/…

[原文地址]