在 JavaScript 中，装饰器（decorators）是一个非常实用的特性。装饰器能够简洁地引入一些横切关注点（cross-cutting concerns），如日志记录、缓存、权限等等。但是，装饰器在 JavaScript 中并不是一个原生的特性，需要借助 babel 这样的工具将其转换为标准的 JavaScript 代码。
在这篇文章中，我们将会介绍一个 npm 包：babel-plugin-decorators-inject，它是一个基于 Babel 的插件，可以为你带来非常方便的装饰器使用体验。
安装
首先，我们需要安装 babel-plugin-decorators-inject：
npm install babel-plugin-decorators-inject --save-dev
然后，在 babel 配置文件 .babelrc 中添加该插件：
{
"plugins": [
["decorators-inject", { "imports": "uses" }]
]
}使用
在该插件配置完成后，我们可以使用它提供的装饰器。下面是一份使用示例：
-- -------------------- ---- -------
------ - ------ - ---- --------------------
----- ------- -
----------------
------
------------- -
--------------------------
-
-在上述代码中，我们使用了 decorators-inject 中的 @inject 装饰器。它可以将 AngularJS 风格的依赖注入（dependency injection）语法嵌入到 JavaScript 类中。在上述代码中，我们注入了 $http 服务，然后可以在 Service 类的 doSomething() 方法中使用 $http.get() 方法。
需要注意的是，在使用该插件时，我们必须遵从一些基本规则：
- 必须使用 ES6 的 class 语法定义类，不支持对象字面量形式的类；
- 装饰器必须放在该属性的前面；
- 每个属性只能有一个装饰器。
指导意义
在使用 decorators-inject 插件之前，我们可能需要为了使用类似于 @inject 这样的装饰器而使用一些比较复杂的库或框架，或者需要自己手写一些装饰器的相关实现，这可能会让我们带来一些不必要的负担。但是，在使用该插件之后，我们可以非常方便地使用包含注入功能的装饰器，降低开发的复杂度。
此外，对于那些想要深入了解 JavaScript 装饰器实现机制以及其在前端开发中的应用的读者，使用该插件可以为他们提供一个很好的基础。可以通过对 decorators-inject 的源码分析，深入了解 babel 插件的机制，以及 JavaScript 装饰器的实现细节。
结语
本文中，我们介绍了一个 npm 包：babel-plugin-decorators-inject，它为我们提供了一种非常方便的使用装饰器的方式。我们也提到了一些使用规则以及相关注意事项，希望可以对读者有所帮助。
如果您对 JavaScript 中的装饰器特性感兴趣，也欢迎参考相关资料，探究其更为深入的应用和实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a18