在前端开发中，我们经常会使用到装饰器（decorator）这一设计模式。在 JavaScript 中，装饰器并不是原生支持的，但是通过使用第三方 npm 包 @upe/decorators，我们可以很方便地为我们的代码添加装饰器。
介绍 @upe/decorators
@upe/decorators 是一个提供装饰器支持的 npm 包，它基于 TypeScript 编写，提供了一系列常用的装饰器，如 @debounced、@memoize、@observable 等。这些装饰器都是用来解决一些常见的功能问题，使代码更加简洁和易于维护。
安装和使用
首先，我们需要在项目中安装 @upe/decorators。我们可以使用 npm 或者 yarn 安装：
npm install @upe/decorators
或者
yarn add @upe/decorators
安装完成后，我们就可以在我们的代码中使用这个包提供的装饰器了。下面是一些示例代码：
@debounced 装饰器
@debounced 装饰器可以将一个函数变成一个防抖函数，可以避免频繁地调用。我们可以这样使用它：
import { debounced } from '@upe/decorators';
class Example {
@debounced(1000)
handleClick() {
// ...
}
}上面的代码中，handleClick 函数会在 1000 毫秒内只被调用一次。
@observable 装饰器
@observable 装饰器可以将一个类的属性变成可观察的。我们可以这样使用它：
-- -------------------- ---- -------
------ - ---------- - ---- ------------------
----- ------- -
-----------
----- - --
----------- -
-------------
-
-
----- ------- - --- ----------
------------------------ -- -- -
------------------ -------- -------------------
---
--------------------上面的代码中，value 属性变成了可观察的，当它的值发生变化时，我们设置的回调函数就会被调用。
小结
@upe/decorators 是一个很方便的 npm 包，它提供了一系列通用的装饰器，可以帮助我们简化代码、加快开发速度，使代码更加易于维护和扩展。在项目中使用它，可以让我们的前端开发更加高效和流畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595f81e8991b448d6c8f