面试题：TypeScript 类装饰器在前端设计模式中的应用

1. 使用 TypeScript 类装饰器实现权限控制和日志记录功能

// 权限控制装饰器
function checkPermission(permission: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            // 模拟权限检查逻辑，这里简单示例，实际应用中应从权限管理系统获取权限
            const hasPermission = true; // 这里假设为 true 表示有权限
            if (hasPermission) {
                return originalMethod.apply(this, args);
            } else {
                console.error(`没有 ${permission} 权限，无法执行该操作`);
            }
        };
        return descriptor;
    };
}

// 日志记录装饰器
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`开始执行 ${propertyKey} 方法，参数为:`, args);
        const result = originalMethod.apply(this, args);
        console.log(`${propertyKey} 方法执行结束，结果为:`, result);
        return result;
    };
    return descriptor;
}

class MyClass {
    @checkPermission('edit')
    @log
    public someMethod(arg1: string, arg2: number) {
        return `方法执行结果: ${arg1} - ${arg2}`;
    }
}

const myInstance = new MyClass();
myInstance.someMethod('test', 123);

2. 体现面向切面编程（AOP）的思想

关注点分离：在上述代码中，权限控制和日志记录是横切关注点，它们不应该分散在业务逻辑代码中。通过类装饰器，我们将权限控制和日志记录的逻辑从业务方法someMethod中分离出来，使得业务逻辑专注于自身功能，而权限控制和日志记录成为独立的切面。
动态织入：装饰器在运行时将权限控制和日志记录的逻辑动态地织入到目标方法中，而不需要修改目标方法的核心代码结构。这种动态织入的方式使得系统在不改变原有业务逻辑的基础上，轻松添加新的横切功能。

3. 在前端设计模式中的优势

提高代码可维护性：由于横切关注点被分离出来，当需要修改权限控制逻辑或者日志记录方式时，只需要修改装饰器代码，而不需要在大量业务代码中查找和修改相关逻辑，降低了维护成本。
增强代码复用性：权限控制和日志记录的装饰器可以应用到多个不同的类和方法上，实现了横切功能的复用，避免了在每个需要这些功能的方法中重复编写相同的代码。
保持业务逻辑清晰：业务方法只需要关注自身功能实现，不会被权限控制和日志记录等无关逻辑所干扰，使得业务逻辑更加清晰，易于理解和扩展。

面试题：TypeScript 类装饰器在前端设计模式中的应用

知识考点

面试题答案

1. 使用 TypeScript 类装饰器实现权限控制和日志记录功能

2. 体现面向切面编程（AOP）的思想

3. 在前端设计模式中的优势