随着 Web 技术的不断发展，前端开发也变得日益复杂。为了提高开发效率、降低开发难度，各种工具、框架和库层出不穷。npm 就是其中之一，它是 Node.js 的包管理工具，也是前端开发中不可或缺的工具之一。本文将重点介绍一个与 npm 相关的库 —— emberjs-decorators。
什么是 emberjs-decorators？
emberjs-decorators 是一个用于 Ember.js 的修饰器库，可以让你使用 ES7 修饰器来编写 Ember 组件。它使用了类似 Python 的 @ 符号来标记修饰器，可以让代码更加简洁、易读。
emberjs-decorators 的安装
安装 emberjs-decorators 非常简单，只需要在命令行中输入以下命令：
npm install emberjs-decorators
由于 emberjs-decorators 依赖于 ember-cli-babel，所以还需要在 ember-cli-build.js 文件中添加以下代码：
let app = new EmberAddon(defaults, {
babel: {
plugins: ['transform-decorators-legacy']
}
});这样就可以成功安装和配置 emberjs-decorators。
如何使用 emberjs-decorators？
接下来，我们将介绍如何使用 emberjs-decorators 来创建一个简单的 Ember 组件。
创建一个简单的组件
首先，在命令行中输入：
ember generate component my-component
这将在当前目录下创建一个名为 my-component 的组件，并在 app/components 目录下生成以下文件：
my-component.js：组件的 JavaScript 代码。my-component.hbs：组件的模板文件。
然后，我们需要修改 my-component.js 文件中的代码，以便使用修饰器：
import Component from '@ember/component';
import { action } from '@ember-decorators/object';
export default class MyComponent extends Component {
@action handleClick() {
console.log('Hello World!');
}
}在这里，我们使用了 @action 修饰器来标记组件中的一个方法 handleClick()。这表明该方法是一个由 Ember 自动处理的事件处理程序。
最后，我们需要在 my-component.hbs 文件中添加一个按钮，并使用之前在 my-component.js 文件中定义的 handleClick() 方法：
<button {{action handleClick}}>Click me!</button>使用多个修饰器
emberjs-decorators 支持多个修饰器的使用。例如，我们还可以在上面的示例中使用 @computed 修饰器来计算组件的某些属性：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------- -------- - ---- ---------------------------
------ ------- ----- ----------- ------- --------- -
-----------------
--- ---------- -
------ ------- ---------------
-
------- ------------- -
---------------------------
-
-在这里，我们使用了 @computed 修饰器来计算 greeting 属性，并将其绑定到组件的 name 属性上。然后，在 handleClick() 方法中，我们使用了 console.log() 方法来输出 greeting 属性的值。
结论
emberjs-decorators 是一个非常方便的库，可以极大地提高 Ember.js 的开发效率。通过使用 ES7 修饰器，我们可以编写更简洁、易读的代码，并可以使用多个修饰器来实现更复杂的功能。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd0e