Ember Classic Decorator 是一个针对 Ember.js 应用的 npm 包，它提供了一种方便的方式来使用装饰器语法，用于简化 Ember.js 应用中的类定义和方法调用。使用 Ember Classic Decorator 可以提高代码的可读性和可维护性，同时也可以减少编写冗长代码的时间。
Ember Classic Decorator 使用方式
安装
要使用 Ember Classic Decorator，必须先安装它。可以通过 npm 来安装：
npm install --save-dev ember-classic-decorator
引入
安装完 Ember Classic Decorator 后，需要将它引入到项目中。在需要使用它的文件中，可以这样引入：
import classic from 'ember-classic-decorator';
@classic
export default class MyComponent extends Component {
// ...
}上面的代码中，我们将 MyComponent 类装饰为 classic 类型。这样，我们就可以在 MyComponent 类中使用装饰器语法了。
类声明
使用 Ember Classic Decorator 后，可以使用装饰器语法来声明类。例如，我们可以这样声明一个类：
-- -------------------- ---- -------
------ ------- ---- --------------------------
--------
------ ------- ----- ----------- ------- --------- -
-------
------------- -
-- ---------
-
-上面的代码中，我们使用 @classic 装饰器将 MyComponent 类设置为 classic 类型，并使用 @action 装饰器来声明 handleClick 方法
属性声明
我们也可以使用装饰器语法来声明类的属性。例如，我们可以这样声明一个属性：
-- -------------------- ---- -------
------ ------- ---- --------------------------
--------
------ ------- ----- ----------- ------- --------- -
--------
------------ - ---
-------
------------------- -
----------------- - -------------------
-
-上面的代码中，我们使用 @tracked 装饰器来声明 currentValue 属性，并使用 @action 装饰器来声明 handleChange 方法。
生命周期钩子
在 Ember.js 应用中，还有很多生命周期钩子方法。使用 Ember Classic Decorator 后，也可以使用装饰器语法来声明这些钩子方法。例如，我们可以这样声明 didInsertElement 钩子方法：
-- -------------------- ---- -------
------ ------- ---- --------------------------
--------
------ ------- ----- ----------- ------- --------- -
-----------------
----------- -
----------------- - -----------------------
-
-上面的代码中，我们使用 @didInsertElement 装饰器来声明 initValue 方法，并在 initValue 方法中初始化了 currentValue 属性。
Ember Classic Decorator 示例
为了更好地理解 Ember Classic Decorator，下面给出一个示例，展示了如何使用装饰器语法来改进 Ember.js 应用中的代码。
假设现在有一个输入框，我们需要在用户输入时动态更新一个列表。首先，我们可以使用 Ember.js 的默认语法来编写代码：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- ----------- ------- --------- -
------------ - ---
---- - ---
-------
------------------- -
----------------- - -------------------
------------------
-
------------ -
-- --------
--------- - ------ --- ----- --- ----- ----
-
-上面的代码中，我们在 handleChange 方法中更新了 currentValue，并调用了 updateList 方法来更新列表数据。这段代码比较冗长，可读性也不太好。
现在，我们使用 Ember Classic Decorator 来改写上面的代码：
-- -------------------- ---- -------
------ ------- ---- --------------------------
--------
------ ------- ----- ----------- ------- --------- -
-------- ------------ - ---
-------- ---- - ---
-------
------------------- -
----------------- - -------------------
------------------
-
-------
------------ -
-- --------
--------- - ------ --- ----- --- ----- ----
-
-上面的代码中，我们使用 @tracked 装饰器来声明 currentValue 和 list 属性。这样，它们就能够在被修改后自动更新。我们还使用了 @action 装饰器来声明 handleChange 方法和 updateList 方法。这样，它们就能够被正确地绑定，并且代码可读性更好了。
Ember Classic Decorator 学习和指导意义
使用 Ember Classic Decorator 可以帮助我们更简单、更快速地编写 Ember.js 应用，同时使代码更具可维护性和可读性。它可以优化代码结构，提高开发效率，减少不必要的工作量。
在使用 Ember Classic Decorator 时，需要注意一些细节和限制。例如，它不支持在类方法中使用箭头函数。了解这些细节和限制可以帮助我们更好地使用 Ember Classic Decorator。
总结一下，Ember Classic Decorator 不仅可以提供更好的语法，使代码更直观，而且还能够提高开发效率，减少重复的工作量。如果你正在学习 Ember.js，或者正在使用它开发应用程序，那么使用 Ember Classic Decorator 可能会对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f76a4967116197505561a84