一文读懂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 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
红米手机抢购的js代码
Mar 10 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 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中的字符串函数
2006/11/24 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
js验证账户名是否重复
2020/05/26 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python删除过期文件的方法
2015/05/29 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python 实现向word(docx)中输出
2020/02/13 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
初三新学期计划书
2014/05/03 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
个人求职自荐信范文
2014/06/20 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP