详解如何在JavaScript中使用装饰器

npm install --save-dev @babel/plugin-proposal-decorators

import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';
export default defineConfig({
plugins: [
babelDev({
babelConfig: {
plugin: ['@babel/plugin-proposal-decorators']
}
}),
// ...
],
// ...
})

module: {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
use: {
loader: 'babel-loader',
options: {
// ...
plugins: [
['@babel/plugin-proposal-decorators', { 'legacy': true }],
// ...
],
// ...
},
}
// ...
}
]
}  

@frozen
class Foo {
@throttle(500)
expensiveMethod() {}
}

function testable(target) {
target.isTestable = true;
}
@testable
class MyTestableClass {
// ...
}
MyTestableClass.isTestable // true

function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false

function readonly(target, name, descriptor){
// descriptor对象原来的值如下
// {
//   value: specifiedFunction,
//   enumerable: false,
//   configurable: true,
//   writable: true
// };
descriptor.writable = false;
return descriptor;
}
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}

function dec(id){
console.log('evaluated', id);
return (target, property, descriptor) => console.log('executed', id);
}
class Example {
@dec(1)
@dec(2)
method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

class Page {
@delay(2000)
onClick(a) {
console.log("onClick");
}
}

function delay(time) {
return function (target, key, descriptor) {
const oldFunction = descriptor.value;
descriptor.value = function() {
setTimeout(() => {
oldFunction.apply(this, arguments);
}, time);
}
return descriptor;
}
}

class Page {
@throttle(2000)
onClick(a) {
console.log("onClick");
}
}

function throttle(time) {
return function (target, key, descriptor) {
const oldFunction = descriptor.value;
let isLock = false;
descriptor.value = function() {
if(isLock) { return; }
isLock = true;
oldFunction.apply(this, arguments);
setTimeout(() => {
isLock = false;
}, time);
}
return descriptor;
}
}

class Page {
@debounce(2000)
onClick(a) {
console.log("onClick");
}
}

function debounce(time) {
return function (target, key, descriptor) {
const oldFunction = descriptor.value;
let timer = null;
descriptor.value = function () {
clearTimeout(timer);
timer = setTimeout(() => {
oldFunction.apply(this, arguments)
}, time);
};
return descriptor;
}
}