VonaJS AOP编程大杀器：外部切面

在VonaJS框架中，AOP编程包括三方面：控制器切面、内部切面和外部切面。

1. 控制器切面: 为 Controller 方法切入逻辑，包括：Middleware、Guard、Interceptor、Pipe和Filter
2. 内部切面: 在 Class 内部，为任何 Class 的任何方法切入逻辑，包括：AOP Method和魔术方法
3. 外部切面: 在不改变 Class 源码的前提下，从外部为任何 Class 的任何方法切入逻辑

VonaJS中的外部切面，可以类比于Spring Boot中的AOP切面和AOP织入概念。VonaJS的外部切面不需要什么前置通知、后置通知、异常通知和环绕通知，只需提供一个同名方法就可以了。之所以可以这么简洁，是因为使用了洋葱圈模型。

此外，VonaJS的外部切面支持完整的类型推断与智能代码提示，开发体感比Spring Boot优雅太多。

下面，我们就来考察一下VonaJS的外部切面到底是个什么样？为什么可以成为AOP编程的🚀大杀器🔪

创建目标Class

可以针对任何 Class 实现外部切面。下面，以 Service 为例，在模块 demo-student 中创建一个 Service test，代码如下：

@Service()
export class ServiceTest extends BeanBase {
  private _name: string;

  protected __init__() {
    this._name = '';
  }

  protected async __dispose__() {
    this._name = '';
  }

  get name() {
    return this._name;
  }

  set name(value) {
    this._name = value;
  }

  actionSync(a: number, b: number) {
    return a + b;
  }

  async actionAsync(a: number, b: number) {
    return Promise.resolve(a + b);
  }
}

创建外部切面

接下来，创建一个外部切面log，为 Class ServiceTest的属性和方法分别提供扩展逻辑

1. Cli命令

$ vona :create:bean aop log --module=demo-student

2. 菜单命令

右键菜单 - [模块路径]: Vona Aspect/Aop

AOP定义

import { BeanAopBase } from 'vona';
import { Aop } from 'vona-module-a-aspect';

@Aop({ match: 'demo-student.service.test' })
export class AopLog extends BeanAopBase {}

• @Aop: 此装饰器用于实现外部切面
• match: 用于将 Class AopLog与 Class ServiceTest关联，ServiceTest的 beanFullName 是demo-student.service.test

名称	类型	说明
match	string|regexp|(string|regexp)[]	针对哪些 Class 启用

切面：同步方法

为ServiceTest#actionSync输出运行时长

在 VSCode 编辑器中，输入代码片段aopactionsync，自动生成代码骨架:

action: AopAction<ClassSome, 'action'> = (_args, next, _receiver) => {
  return next();
};

调整代码，然后添加 log 逻辑

actionSync: AopAction<ServiceTest, 'actionSync'> = (_args, next, _receiver) => {
  const timeBegin = Date.now();
  const res = next();
  const timeEnd = Date.now();
  console.log('actionSync: ', timeEnd - timeBegin);
  return res;
};

• actionSync: 提供与ServiceTest同名的方法actionSync

切面：异步方法

为ServiceTest#actionAsync输出运行时长

在 VSCode 编辑器中，输入代码片段aopaction，自动生成代码骨架:

action: AopAction<ClassSome, 'action'> = async (_args, next, _receiver) => {
  return await next();
};

调整代码，然后添加 log 逻辑

actionAsync: AopAction<ServiceTest, 'actionAsync'> = async (_args, next, _receiver) => {
  const timeBegin = Date.now();
  const res = await next();
  const timeEnd = Date.now();
  console.log('actionAsync: ', timeEnd - timeBegin);
  return res;
};

• actionAsync: 提供与ServiceTest同名的方法actionAsync

切面：getter

为ServiceTest#get name输出运行时长

在 VSCode 编辑器中，输入代码片段aopgetter，自动生成代码骨架:

protected __get_xxx__: AopActionGetter<ClassSome, 'xxx'> = function (next, _receiver) {
  const value = next();
  return value;
};

调整代码，然后添加 log 逻辑

protected __get_name__: AopActionGetter<ServiceTest, 'name'> = function (next, _receiver) {
  const timeBegin = Date.now();
  const value = next();
  const timeEnd = Date.now();
  console.log('get name: ', timeEnd - timeBegin);
  return value;
};

• __get_name__: 对应ServiceTest的 getter 方法get name

切面：setter

为ServiceTest#set name输出运行时长

在 VSCode 编辑器中，输入代码片段aopsetter，自动生成代码骨架:

protected __set_xxx__: AopActionSetter<ClassSome, 'xxx'> = function (value, next, _receiver) {
  return next(value);
}

调整代码，然后添加 log 逻辑

protected __set_name__: AopActionSetter<ServiceTest, 'name'> = function (value, next, _receiver) {
  const timeBegin = Date.now();
  const res = next(value);
  const timeEnd = Date.now();
  console.log('set name: ', timeEnd - timeBegin);
  return res;
};

• __set_name__: 对应ServiceTest的 setter 方法set name

切面：__init__

为ServiceTest#__init__输出运行时长

在 VSCode 编辑器中，输入代码片段aopinit，自动生成代码骨架:

protected __init__: AopActionInit<ClassSome> = (_args, next, _receiver) => {
  next();
};

调整代码，然后添加 log 逻辑

protected __init__: AopActionInit<ServiceTest> = (_args, next, _receiver) => {
  const timeBegin = Date.now();
  next();
  const timeEnd = Date.now();
  console.log('__init__: ', timeEnd - timeBegin);
};

• __init__: 提供与ServiceTest同名的方法__init__

切面：__dispose__

为ServiceTest#__dispose__输出运行时长

在 VSCode 编辑器中，输入代码片段aopdispose，自动生成代码骨架:

protected __dispose__: AopActionDispose<ClassSome> = async (_args, next, _receiver) => {
  await next();
};

调整代码，然后添加 log 逻辑

protected __dispose__: AopActionDispose<ServiceTest> = async (_args, next, _receiver) => {
  const timeBegin = Date.now();
  await next();
  const timeEnd = Date.now();
  console.log('__dispose__: ', timeEnd - timeBegin);
};

• __dispose__: 提供与ServiceTest同名的方法__dispose__

切面：__get__

为ServiceTest扩展魔术方法

• 参见: 魔术方法

在 VSCode 编辑器中，输入代码片段aopget，自动生成代码骨架:

protected __get__: AopActionGet<ClassSome> = (_prop, next, _receiver) => {
  const value = next();
  return value;
};

调整代码，然后添加自定义字段red

protected __get__: AopActionGet<ServiceTest> = (prop, next, _receiver) => {
  if (prop === 'red') return '#FF0000';
  const value = next();
  return value;
};

• __get__: 约定的魔术方法名称

通过接口类型合并的机制为颜色提供类型定义

declare module 'vona-module-demo-student' {
  export interface ServiceTest {
    red: string;
  }
}

切面：__set__

为ServiceTest扩展魔术方法

• 参见: 魔术方法

在 VSCode 编辑器中，输入代码片段aopset，自动生成代码骨架:

protected __set__: AopActionSet<ClassSome> = (_prop, value, next, _receiver) => {
  return next(value);
};

调整代码，为自定义字段red设置值

private _colorRed: string | undefined;

protected __set__: AopActionSet<ServiceTest> = (prop, value, next, _receiver) => {
  if (prop === 'red') {
    this._colorRed = value;
    return true;
  }
  return next(value);
};

• __set__: 约定的魔术方法名称
• 如果为prop设置了值，返回true，否则调用next方法

然后调整__get__的逻辑:

protected __get__: AopActionGet<ServiceTest> = (prop, next, _receiver) => {
- if (prop === 'red') return '#FF0000';
+ if (prop === 'red') return this._colorRed;
  const value = next();
  return value;
}

切面：__method__

为ServiceTest的任何方法扩展逻辑

在 VSCode 编辑器中，输入代码片段aopmethod，自动生成代码骨架:

protected __method__: AopActionMethod<ClassSome> = (_method, _args, next, _receiver) => {
  return next();
};

调整代码，然后为方法actionSync和actionAsync添加 log 逻辑

protected __method__: AopActionMethod<ServiceTest> = (method, _args, next, _receiver) => {
  if (method !== 'actionSync' && method !== 'actionAsync') {
    return next();
  }
  const timeBegin = Date.now();
  function done(res) {
    const timeEnd = Date.now();
    console.log(`method ${method}: `, timeEnd - timeBegin);
    return res;
  }
  const res = next();
  if (res?.then) {
    return res.then((res: any) => {
      return done(res);
    });
  }
  return done(res);
};

• __method__: 约定的魔术方法名称
• res?.then: 判断返回值是否是 Promise 对象，进行不同处理，从而兼容同步方法和异步方法

AOP顺序

针对同一个目标 Class，可以关联多个 AOP。所以，VonaJS 提供了两个参数，用于控制 AOP 的执行顺序

1. dependencies

比如，还有一个 AOP demo-student:log3，我们希望执行顺序如下：demo-student:log3 > Current

@Aop({
  match: 'demo-student.service.test',
+ dependencies: 'demo-student:log3',
})
class AopLog {}

2. dependents

dependents的顺序刚好与dependencies相反，我们希望执行顺序如下：Current > demo-student:log3

@Aop({
  match: 'demo-student.service.test',
+ dependents: 'demo-student:log3',
})
class AopLog {}

AOP启用/禁用

可以控制 AOP 的启用/禁用

1. Enable

src/backend/config/config/config.ts

// onions
config.onions = {
  aop: {
    'demo-student:log': {
+     enable: false,
    },
  },
};

2. Meta

可以让 AOP 在指定的运行环境生效

名称	类型	说明
flavor	string|string[]	参见: 运行环境与Flavor
mode	string|string[]	参见: 运行环境与Flavor

• 举例

@Aop({
+ meta: {
+   flavor: 'normal',
+   mode: 'dev',
+ },
})
class AopLog {}

查看当前生效的AOP清单

可以直接在目标 Class action 中输出当前生效的 AOP 清单

class ServiceTest {
  protected async __dispose__() {
+   this.bean.onion.aop.inspect();
    this._name = '';
  }

• this.bean.onion: 取得全局 Service 实例 onion
• .aop: 取得与 AOP 相关的 Service 实例
• .inspect: 输出当前生效的 AOP 清单

当方法被执行时，会自动在控制台输出当前生效的 AOP 清单，效果如下：

资源

• Github：https://github.com/vonajs/vona
• 文档：https://vona.js.org/