ES7 Decorator 是 ES7（ECMAScript 2016）中引入的一种装饰器语法，可在运行时动态地扩展类和类成员。它可以让开发者在不修改源代码的情况下，为类和方法添加新的行为，使得代码更加易读、易维护，同时也可以大大降低代码的复杂度。
装饰器的基本语法
使用装饰器只需要在类声明、类成员声明或者函数声明前面添加 @DecoratorName 即可，DecoratorName 就是装饰器的名称。下面是一个示例代码：
// javascriptcn.com 代码示例
@log
class MyClass {
@readonly
name = 'John Doe';
@validate
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}
function log(target) {
console.log(target.name);
}
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
function validate(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function () {
if (this.name === '') {
console.log('Name is required!');
} else {
original.apply(this, arguments);
}
};
return descriptor;
}
const myClass = new MyClass();
myClass.sayHi(); // output: "Hello, John Doe!"
myClass.name = 'Bob'; // error: "Cannot assign to read only property 'name' of object"
myClass.name = ''; // output: "Name is requied!"上面的代码定义了一个名为 MyClass 的类，其中包含了一个只读的成员变量 name，一个带有参数校验能力的方法 sayHi，并且通过两个装饰器log和readonly对这两个类成员进行了装饰。
其中 @log 装饰器打印出类的名称，@readonly 装饰器将原有的成员 descriptor 的 writable 属性改为 false，从而使 name 成为了只读的变量。@validate 装饰器在原有成员函数的基础上，新增了一个参数校验功能，当 sayHi 方法中的 name 值为空时，输出"Name is required"，否则正常执行类方法。
装饰器在实际项目中的应用
装饰器的语法可以轻松解决一些面向对象编程（OOP）中的问题，如配置、日志记录、类型检查等问题，方便我们在源代码的基础上进行扩展。下面我们通过几个例子来说明装饰器的实际应用。
前端路由
我们经常会使用路由，通过 url 地址实现页面的切换，让用户有更好的交互体验。下面是一个使用装饰器实现前端路由的例子：
// javascriptcn.com 代码示例
class Router {
constructor() {
this.routes = new Map();
}
@RouterMethod('get')
get(path, handler) {
this.routes.set(path, handler);
}
@RouterMethod('post')
post(path, handler) {
this.routes.set(path, handler);
}
navigate() {
const pathName = location.pathname.slice(1) || '/';
const handler = this.routes.get(pathName);
if (handler) handler();
else console.error('Page not found');
}
}
function RouterMethod(method) {
return function (target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function () {
history.pushState(null, '', name.toLowerCase());
original.apply(this, arguments);
};
return descriptor;
};
}
const router = new Router();
router.get('/', () => console.log('Home page'));
router.post('/login', () => console.log('Login page'));
router.navigate();上述代码通过使用 RouterMethod 装饰器对 get 和 post 方法进行装饰，经过装饰修改后的方法会向 history 中添加相应的历史记录，从而实现了路由的跳转。
状态管理
在前端应用中，我们可能需要管理应用不同的状态，如登录状态、网络状态、警告状态等等。状态管理的方式有很多，如 Redux、VueX 等，而使用装饰器实现应用状态管理也是一种比较简单的方式。如下是一个代码示例：
// javascriptcn.com 代码示例
const state = {};
@State('user')
class UserState {
static getUser() {
return state.user;
}
static setUser(user) {
state.user = user;
}
}
@State('counter')
class CounterState {
static getCount() {
return state.counter;
}
static setCount(count) {
state.counter = count;
}
}
function State(name) {
return function (target) {
target.stateName = name;
target.getState = function () {
return state[name] || {};
};
target.setState = function (data) {
state[name] = { ...state[name], ...data };
};
};
}
UserState.setUser({ name: 'Tom', age: 18 });
CounterState.setCount(10);
console.log(UserState.getUser()); // output: "Object { name: 'Tom', age: 18 }"
console.log(CounterState.getCount()); // output: "10"上面的代码通过使用 @State 装饰器来定义状态管理类，@State 装饰器中传入的参数 name 表示该类所管理的状态名称。由于装饰器的语法特性，我们可以在 UserState 和 CounterState 中定义静态方法来获取或者设置状态，从而达到状态管理的效果。
总结
上文中我们通过介绍装饰器的基本语法，以及实际项目应用展示了其优雅的功能。在实际工作中，我们可以通过使用装饰器来扩展类和运行时行为，使得代码更加易读、易维护，同时也可以大大降低代码的复杂度。我们相信，装饰器在前端开发中具有着广泛的应用前景，值得我们深入学习和了解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528e9187d4982a6ebb76af5