【九月打卡】第12天 TypeScript学习 10-14~10-15章-原创手记-慕课网

课程名称： 晋级TypeScript高手，成为抢手的前端开发人才

课程章节： 10-14 方法拦截器意义 ~ 10-15 【方法装饰器】方法前置拦截和后置拦截

课程讲师： keviny79

课程内容：
方法拦截器的意义：

方法拦截器本质就是一个“函数”，也可以理解为“方法”。
它把 “目标类的方法” 包裹在自己体内，然后再执行这个 “目标类的方法” 之前帮 “目标类的方法” 做一些前置工作和执行完 “目标类的方法” 做一些后置工作, 这就是 “前置拦截”和“后置拦截”。
方法拦截器从本质上来讲，就是扩大了“目标类上的方法”的特定的函数
使用场景如：增加一个日志信息，修改方法参数进行功能扩展处理。

拦截器的实现：

// 增强目标类的方法功能
// 字符串相关工具类
class StringUtil {
  // 去除字符串中空格
  public static trimSpace(str: string): string {
    return str.replace(/\s+/g, "");
  }
}


// 方法装饰器
function MyMethodDecorator(methodPath: string) {
  return function (
    targetClassPrototype: any,
    methodname: string,
    dataprops: PropertyDescriptor
  ) {
	// 保存一份 目标类上的方法
	// dataprops.value 得到的是 装饰器上的方法
    let datamethodprops = dataprops.value;

    // 方法拦截器
    // 创建一个函数并把这个保存给 目标类上的方法
    dataprops.value = function (...args: any) {
      args = args.map((arg: any) => {
        if (typeof arg === "string") {
          return StringUtil.trimSpace(arg);
        }
        return arg;
      });
      console.log("args:", args);
      
      // 前置拦截
      // 在调用目标类上的方法之前，为前置拦截
      // 调用之前保存的 目标类上的方法，并传递参数
      datamethodprops.call(this, args);
      
      // 在调用了 目标类上的方法 后，为后置拦截
      console.log("后置拦截。。。");
    };
  };
}

class RoleService {
  public roleName: string = "管理员";
  constructor() {}
  
  // 使用方法装饰器
  @MyMethodDecorator("/searchFood")
  DistribRoles(userName: string, isValid: boolean) {
    console.log("分配角色.....");
  }
}

let roleService = new RoleService();
// 需要调用方法，在执行方法装饰器
roleService.DistribRoles("战三", true);

课程收获：
明白了方法拦截器的意义、使用方法、使用场景

图片描述