前端装饰器,AOP的使用

2019-07-17 admin

什么是装饰器?

了解AOP

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

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

我们简单的举个例子来说明AOP。

Alt text

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

但是,做成公共方法调用的话,是侵入你的主流程里面的,非常的不雅观,也会混淆你的控制流程。在这儿,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()

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

Alt text

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

至此,一个简单的装饰器范例已经完成。大家可以通过这种方式修改自己的代码,使自己的代码更加解耦。

参考文章

ECMAScript 6 入门:http://es6.ruanyifeng.com/#do…

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

[原文地址]

[转载]原文链接:https://segmentfault.com/a/1190000019790360

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-70006.html

文章标题:前端装饰器,AOP的使用

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
回到顶部