ES7 Decorator 是 ES7（ECMAScript 2016）中引入的一种装饰器语法，可在运行时动态地扩展类和类成员。它可以让开发者在不修改源代码的情况下，为类和方法添加新的行为，使得代码更加易读、易维护，同时也可以大大降低代码的复杂度。
装饰器的基本语法
使用装饰器只需要在类声明、类成员声明或者函数声明前面添加 @DecoratorName 即可，DecoratorName 就是装饰器的名称。下面是一个示例代码：
-- -------------------- ---- -------
----
----- ------- -
---------
---- - ----- -----
---------
------- -
------------------- ----------------
-
-
-------- ----------- -
-------------------------
-
-------- ---------------- ----- ----------- -
------------------- - ------
------ -----------
-
-------- ---------------- ----- ----------- -
----- -------- - -----------------
---------------- - -------- -- -
-- ---------- --- --- -
----------------- -- ------------
- ---- -
-------------------- -----------
-
--
------ -----------
-
----- ------- - --- ----------
---------------- -- ------- ------- ---- -----
------------ - ------ -- ------ ------- ------ -- ---- ---- -------- ------ -- -------
------------ - --- -- ------- ----- -- ---------上面的代码定义了一个名为 MyClass 的类，其中包含了一个只读的成员变量 name，一个带有参数校验能力的方法 sayHi，并且通过两个装饰器log和readonly对这两个类成员进行了装饰。
其中 @log 装饰器打印出类的名称，@readonly 装饰器将原有的成员 descriptor 的 writable 属性改为 false，从而使 name 成为了只读的变量。@validate 装饰器在原有成员函数的基础上，新增了一个参数校验功能，当 sayHi 方法中的 name 值为空时，输出"Name is required"，否则正常执行类方法。
装饰器在实际项目中的应用
装饰器的语法可以轻松解决一些面向对象编程（OOP）中的问题，如配置、日志记录、类型检查等问题，方便我们在源代码的基础上进行扩展。下面我们通过几个例子来说明装饰器的实际应用。
前端路由
我们经常会使用路由，通过 url 地址实现页面的切换，让用户有更好的交互体验。下面是一个使用装饰器实现前端路由的例子：
-- -------------------- ---- -------
----- ------ -
------------- -
----------- - --- ------
-
--------------------
--------- -------- -
--------------------- ---------
-
---------------------
---------- -------- -
--------------------- ---------
-
---------- -
----- -------- - -------------------------- -- ----
----- ------- - --------------------------
-- --------- ----------
---- ------------------- --- --------
-
-
-------- -------------------- -
------ -------- -------- ----- ----------- -
----- -------- - -----------------
---------------- - -------- -- -
----------------------- --- --------------------
-------------------- -----------
--
------ -----------
--
-
----- ------ - --- ---------
--------------- -- -- ----------------- --------
--------------------- -- -- ------------------ --------
------------------上述代码通过使用 RouterMethod 装饰器对 get 和 post 方法进行装饰，经过装饰修改后的方法会向 history 中添加相应的历史记录，从而实现了路由的跳转。
状态管理
在前端应用中，我们可能需要管理应用不同的状态，如登录状态、网络状态、警告状态等等。状态管理的方式有很多，如 Redux、VueX 等，而使用装饰器实现应用状态管理也是一种比较简单的方式。如下是一个代码示例：
-- -------------------- ---- -------
----- ----- - ---
--------------
----- --------- -
------ --------- -
------ -----------
-
------ ------------- -
---------- - -----
-
-
-----------------
----- ------------ -
------ ---------- -
------ --------------
-
------ --------------- -
------------- - ------
-
-
-------- ----------- -
------ -------- -------- -
---------------- - -----
--------------- - -------- -- -
------ ----------- -- ---
--
--------------- - -------- ------ -
----------- - - --------------- ------- --
--
--
-
------------------- ----- ------ ---- -- ---
--------------------------
--------------------------------- -- ------- ------- - ----- ------ ---- -- --
------------------------------------- -- ------- ----上面的代码通过使用 @State 装饰器来定义状态管理类，@State 装饰器中传入的参数 name 表示该类所管理的状态名称。由于装饰器的语法特性，我们可以在 UserState 和 CounterState 中定义静态方法来获取或者设置状态，从而达到状态管理的效果。
总结
上文中我们通过介绍装饰器的基本语法，以及实际项目应用展示了其优雅的功能。在实际工作中，我们可以通过使用装饰器来扩展类和运行时行为，使得代码更加易读、易维护，同时也可以大大降低代码的复杂度。我们相信，装饰器在前端开发中具有着广泛的应用前景，值得我们深入学习和了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6528e9187d4982a6ebb76af5