一文读懂ES7中的javascript修饰器


Posted in Javascript onMay 06, 2019

什么是修饰器

修饰器(Decorator)是ES7的一个提案,它的出现能解决两个问题:

  • 不同类间共享方法
  • 编译期对类和方法的行为进行改变

用法也很简单,就是在类或方法的上面加一个@符,在vue in typescript中经常用到

一文读懂ES7中的javascript修饰器

以上的两个用处可能不太明白,没关系,我们开始第一个例子

例子1:修饰类

@setProp
class User {}

function setProp(target) {
 target.age = 30
}

console.log(User.age)

这个例子要表达的是对User类使用setProp这个方法进行修饰,用来增加User类中age的属性,setProp方法会接收3个参数,我们现在接触第一个,target代表User类本身。

例子2:修饰类(自定义参数值)

@setProp(20)
class User {}

function setProp(value) {
 return function (target) {
  target.age = value
 }
}

console.log(User.age)

此例和上面功能基本一致,唯一差别在于值是参考修饰函数传过来的

例子2:修饰方法

class User {
 @readonly
 getName() {
  return 'Hello World'
 }
}

// readonly修饰函数,对方法进行只读操作
function readonly(target, name, descriptor) {
 descriptor.writable = false
 return descriptor
}

let u = new User()
// 尝试修改函数,在控制台会报错
u.getName = () => {
 return 'I will override'
}

上例中,我们对User类中的getName方法使用readonly修饰器进行修饰,使得方法不能被修改。第一个参数我们已经知道了,参数name为方法名,也就是readonly,参数descriptor是个啥东西呢,看到这行descriptor.writable = false,我们大家猜的也差不多了,这三个参数对应的就是Object.defineProperty的三个参数,我们来看一下:

一文读懂ES7中的javascript修饰器

我们设置descriptor.writable = false就是让函数不可以被修改,如果我们写成

descriptor.value = 'function (){ console.log('Hello decorator') }'

那么,输出就是Hello World了,而是Hello decorator,是不是已经意识到修饰器的好处了。现在我们来看看实际工作中,我们用到修饰器的例子

实际应用1:日志管理

在用webpack打包时,我们经常需要好多步骤,比如第一步读取package.json文件,第二步处理该文件,第三步加载webpack.base.js文件,第四步进行打包...为了直观,我们经常在每一步打印一些日志文件,比如这步都干了些什么事,很明显打印日志的操作和业务代码根本就一点关系没有,我们不应该把日志和业务掺和在一起,这样使用修饰器就是避免这个问题,以下为代码:

class Pack {
 @log('读取package.json文件')
 step1() {
  // do something...
  // 没有修饰器之前,我们通常把console.log放到这里写
  // 放到函数里面写会有两个坏处
  //  1.console和业务无关,会破坏函数单一性原则
  //  2.如果要删除所有的console,那我们只能深入到每一个方法中
 }
 @log('合并webpack配置文件')
 step2() {
  // do something...
 }
}

function log(value) {
 return function (target, name, descriptor) {
  // 在这里,我们还可以拿到函数的参数,打印更加详细的信息
  console.log(value)
 }
}

let pack = new Pack()
pack.step1()
pack.step2()

实际应用2:检查登录

这个例子在实际的开发中常用得到,我们一些操作前,必须得判断用户是否登录,比较点赞、结算、发送弹幕...按照之前的写法,我们必须在每一个方法中判断用户的登录情况,然后再进行业务的操作,很显然前置条件和业务又混到了一起,用修饰器,就可以完美的解决这一问题,代码如下:

class User {
 // 获取已登录用户的用户信息
 @checkLogin
 getUserInfo() {
  /**
   * 之前,我们都会这么写:
   *  if(checkLogin()) {
   *   // 业务代码
   *  }
   * 这段代码会在每一个需要登录的方法中执行
   * 还是上面的问题,执行的前提和业务又混到了一起
   */
  console.log('获取已登录用户的用户信息')
 }
 // 发送消息
 @checkLogin
 sendMsg() {
  console.log('发送消息')
 }
}

// 检查用户是否登录,如果没有登录,就跳转到登录页面
function checkLogin(target, name, descriptor) {
 let method = descriptor.value

 // 模拟判断条件
 let isLogin = true

 descriptor.value = function (...args) {
  if (isLogin) {
   method.apply(this, args)
  } else {
   console.log('没有登录,即将跳转到登录页面...')
  }
 }
}
let u = new User()
u.getUserInfo()
u.sendMsg()

结语

以上只是修饰器的基本应用,只要我们掌握了原理,在实际的工作中,要思考自己的应用场景,只要我们涉及需要在执行前做一些处理的应用,不管是修改函数的参数值,还是增加属性,还是执行的先决条件,我们都可以使用修饰器,这种编程的方式,就是面向切面编程

源码以及使用方法,请移步GitHub(本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
JavaScript中AOP的实现与应用
May 06 #Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 #Javascript
vue如何截取字符串
May 06 #Javascript
用vscode开发vue应用的方法步骤
May 06 #Javascript
微信小程序合法域名配置方法
May 06 #Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 #Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
You might like
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php绘制圆形的方法
2015/01/24 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python 日期排序的实例代码
2019/07/11 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python MD5加密的示例
2020/10/19 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
行政管理专业推荐信
2013/11/02 职场文书
电气技术员岗位职责
2013/11/19 职场文书
成考报名单位证明范本
2014/01/16 职场文书
毕业留言寄语大全
2014/04/10 职场文书
减负增效提质方案
2014/05/23 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
工程部经理岗位职责
2015/02/02 职场文书
新教师个人工作总结
2015/02/06 职场文书
会计主管竞聘书
2015/09/15 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python