前端装饰器,AOP的使用

lewinlee 发布于2019-08-26 10:10 / 2731人阅读

摘要：中的装饰在前端编程中，我们可以采用装饰器，来实现编程。装饰器使用我们先建立一个简单的类，这个类的作用，就是在执行的时候，打印出。至此，一个简单的装饰器范例已经完成。

什么是装饰器？ 了解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 入门:http://es6.ruanyifeng.com/#do...

https://blog.csdn.net/yanquan...

[[原文地址]](https://www.yodfz.com/detail/...

私有云云服务器装饰器装饰器模式多个装饰器多重装饰器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105719.html

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

摘要：下装饰者的实现了解了装饰者模式和的概念之后，我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑，如果以后需要自动上传功能，也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式当我们拍了一张照片准备发朋友...

chunquedong 2019-08-23 18:16 评论0 收藏0
面向切面编程与装饰器

摘要：面向切面编程嗯，百度百科一下为的缩写，意为面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。面向切面编程～～～～嗯，百度百科一下～～～～ AOP 为 Aspect Oriented Programming 的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP 是 OOP 的延续，是软件开发中的一个热点，也...

lunaticf 2019-08-26 10:40 评论0 收藏0
学学AOP之装饰者模式

摘要：但是，这样做的后果就是，我们会不断的改变本体，就像把凤姐送去做整形手术一样。在中，我们叫做引用装饰。所以，这里引入的装饰模式装饰亲切，熟悉，完美。实例讲解装饰上面那个例子，只能算是装饰模式的一个不起眼的角落。装饰者，英文名叫decorator. 所谓的装饰,从字面可以很容易的理解出，就是给土肥圆，化个妆，华丽的转身为白富美，但本体还是土肥圆。说人话.咳咳~ 在js里面一切都是对...

nihao 2019-08-19 17:28 评论0 收藏0
ES7-Decorator-装饰者模式

摘要：装饰者要实现这些相同的方法继承自装饰器对象创建具体的装饰器，也是接收作对参数接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。装饰模式仅仅包装现有的模块，使之更加华丽，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；使用 ES7 的 decorator ES7 中增加了一个 decorator 属性...

zhangxiangliang 2019-08-26 13:54 评论0 收藏0
ES7-Decorator-装饰者模式

摘要：装饰者要实现这些相同的方法继承自装饰器对象创建具体的装饰器，也是接收作对参数接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。装饰模式仅仅包装现有的模块，使之更加华丽，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；使用 ES7 的 decorator ES7 中增加了一个 decorator 属性...

jlanglang 2019-08-05 17:06 评论0 收藏0