JS装饰器如何在项目中使用

JS 装饰器概述

JavaScript 装饰器是一种以 @ 符号开头的特殊语法,放在目标代码的前面用于包装或扩展代码功能。

JavaScript 的装饰器语法目前仍处于提案阶段,现阶段使用的话需要通过 babel 等方式进行编译之后,才能在浏览器正常运行。

装饰器分为两种:类装饰器,类成员装饰器,分别用于装饰 类以及类的成员。

语法

装饰器语法分为两部分。

首先是装饰器的定义,装饰器定义是编写一个函数,函数会接受所装饰的内容作为参数。

类装饰器和类型成员装饰器只是在接收的参数上不同。

而装饰器的使用则是使用 @ 符号加上定义的装饰器名称(即装饰器的函数名)

kotlin 复制代码
// 定义一个类装饰器
const classDecorator = (target) => {
	// do something
}

// 使用装饰器
@classDecorator
class Human {
}

类装饰器

类装饰器接收一个参数,即类的本身。

typescript 复制代码
const classDecorator = (target) => {
	console.log(`species is ${target.species}`); // species is human
}

// 使用装饰器
@classDecorator
class Human {
	static species = 'human';
}

类成员装饰器

类成员可以是类的属性,方法,或者是 getter 或 setter 等;类成员装饰器函数接收三个参数,分别是类本身,成员名称,成员修饰符(就是表示属性的是否可枚举,可读,可配置等的对象)

ini 复制代码
const speciesDecorator = (target, name, descriptor) => {
  console.log({ target, name, descriptor });
}

class Human {
  @speciesDecorator
  static species = 'Human';
}

装饰器输出结果为:

比如我们可以利用 descriptor 这个参数来做限制属性为不可枚举

typescript 复制代码
const speciesDecorator = (target, name, descriptor) => {
  console.log({ target, name, descriptor });
  descriptor.enumerable = false; // 将属性变为不可枚举
}

class _Human {
  static species = 'Human';
}
console.log(Object.keys(_Human)); // ['species']

class Human {
  @speciesDecorator
  static species = 'Human';
}
console.log(Object.keys(Human)); // []

同时使用多个装饰器

装饰器是可以叠加使用的,使用多个装饰器只需要在代码前面添加多个装饰器的使用即可

ini 复制代码
const noEnumerable = (target, name, descriptor) => {
  // 将属性改为不可枚举
  descriptor.enumerable = false;
}

const readonly = (target, name, descriptor) => {
  // 将属性改为只读
  descriptor.writable = false;
}


class Human {
  @noEnumerable
  @readonly
  static species = 'human';
}

console.log(Object.keys(Human)); // []
console.log(Human.species); // human
Human.species = 'new human';
console.log(Human.species); // human

装饰器的执行顺序

  • 装饰器在类定义时即执行

  • 先执行类成员装饰器,类成员装饰器执行完后,再执行类装饰器

  • 类成员装饰器的先后执行取决于成员的定义顺序

typescript 复制代码
const classDecorator = (target) => {
  console.log('类装饰器执行')
}

const speciesDecorator_1 = (target, name, descriptor) => {
  console.log('species_1 装饰器执行')
}

const speciesDecorator_2 = (target, name, descriptor) => {
  console.log('species_2 装饰器执行')
}

// 使用装饰器
@classDecorator
class Human {
  @speciesDecorator_1
	static species_1 = 'human';
  @speciesDecorator_2
	static species_2 = 'human';
}

执行结果为:

species_1 装饰器执行

species_2 装饰器执行

类装饰器执行

如何在vite项目中使用decorator

  • 安装两个包
css 复制代码
 p i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
  • vite配置
php 复制代码
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ["@babel/plugin-proposal-decorators", { legacy: true }],
          ["@babel/plugin-proposal-class-properties", { loose: true }],
        ],
      },
    }),
  ],
});
相关推荐
nppe64 分钟前
sequlize操作mysql小记
前端·后端
Moment12 分钟前
面试官:一个接口使用postman这些测试很快,但是页面加载很慢怎么回事 😤😤😤
前端·后端·面试
诗书画唱16 分钟前
【前端面试题】JavaScript 核心知识点解析(第二十二题到第六十一题)
开发语言·前端·javascript
excel23 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子29 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构36 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep37 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss41 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风42 分钟前
html二次作业
前端·html
江城开朗的豌豆1 小时前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈