[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[36],"user",{"_20":21,"_13":14,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35},"loginname","pengliheng","page",1,"limit",50,"total","id","29167","avatar_url","https://avatars.githubusercontent.com/u/14355994?v=4","githubUsername","plh97","create_at","2017-07-13 01:41:01.71","score",85,"topic_count",0,"reply_count",17,"is_star",false,{"_20":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":35,"_49":35,"_32":16,"_50":51,"_26":52,"_53":54},"49108","author_id","30517","tab","share","content","在VonaJS框架中，AOP编程包括三方面：`控制器切面`、`内部切面`和`外部切面`。\r\n\r\n1. `控制器切面`: 为 Controller 方法切入逻辑，包括：Middleware、Guard、Interceptor、Pipe和Filter\r\n2. `内部切面`: 在 Class 内部，为任何 Class 的任何方法切入逻辑，包括：AOP Method和魔术方法\r\n3. `外部切面`: 在不改变 Class 源码的前提下，从外部为任何 Class 的任何方法切入逻辑\r\n\r\nVonaJS中的`外部切面`，可以类比于Spring Boot中的`AOP切面`和`AOP织入`概念。VonaJS的`外部切面`不需要什么`前置通知`、`后置通知`、`异常通知`和`环绕通知`，只需提供一个同名方法就可以了。之所以可以这么简洁，是因为使用了洋葱圈模型。\r\n\r\n此外，VonaJS的`外部切面`支持完整的类型推断与智能代码提示，开发体感比Spring Boot优雅太多。\r\n\r\n下面，我们就来考察一下VonaJS的`外部切面`到底是个什么样？为什么可以成为AOP编程的🚀大杀器🔪\r\n\r\n## 创建目标Class\r\n\r\n可以针对任何 Class 实现外部切面。下面，以 Service 为例，在模块 demo-student 中创建一个 Service `test`，代码如下：\r\n\r\n```typescript\r\n@Service()\r\nexport class ServiceTest extends BeanBase {\r\n private _name: string;\r\n\r\n protected __init__() {\r\n this._name = '';\r\n }\r\n\r\n protected async __dispose__() {\r\n this._name = '';\r\n }\r\n\r\n get name() {\r\n return this._name;\r\n }\r\n\r\n set name(value) {\r\n this._name = value;\r\n }\r\n\r\n actionSync(a: number, b: number) {\r\n return a + b;\r\n }\r\n\r\n async actionAsync(a: number, b: number) {\r\n return Promise.resolve(a + b);\r\n }\r\n}\r\n```\r\n\r\n## 创建外部切面\r\n\r\n接下来，创建一个外部切面`log`，为 Class `ServiceTest`的属性和方法分别提供扩展逻辑\r\n\r\n### 1. Cli命令\r\n\r\n```bash\r\n$ vona :create:bean aop log --module=demo-student\r\n```\r\n\r\n### 2. 菜单命令\r\n\r\n```bash\r\n右键菜单 - [模块路径]: Vona Aspect/Aop\r\n```\r\n\r\n## AOP定义\r\n\r\n```typescript\r\nimport { BeanAopBase } from 'vona';\r\nimport { Aop } from 'vona-module-a-aspect';\r\n\r\n@Aop({ match: 'demo-student.service.test' })\r\nexport class AopLog extends BeanAopBase {}\r\n```\r\n\r\n* `@Aop`: 此装饰器用于实现`外部切面`\r\n* `match`: 用于将 Class `AopLog`与 Class `ServiceTest`关联，`ServiceTest`的 beanFullName 是`demo-student.service.test`\r\n\r\n| 名称 | 类型 | 说明 |\r\n| ----- | ----------------------------------- | ------------- |\r\n| match | string\\|regexp\\|(string\\|regexp)\\[] | 针对哪些 Class 启用 |\r\n\r\n## 切面：同步方法\r\n\r\n为`ServiceTest#actionSync`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopactionsync`，自动生成代码骨架:\r\n\r\n```typescript\r\naction: AopAction = (_args, next, _receiver) => {\r\n return next();\r\n};\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nactionSync: AopAction = (_args, next, _receiver) => {\r\n const timeBegin = Date.now();\r\n const res = next();\r\n const timeEnd = Date.now();\r\n console.log('actionSync: ', timeEnd - timeBegin);\r\n return res;\r\n};\r\n```\r\n\r\n* `actionSync`: 提供与`ServiceTest`同名的方法`actionSync`\r\n\r\n## 切面：异步方法\r\n\r\n为`ServiceTest#actionAsync`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopaction`，自动生成代码骨架:\r\n\r\n```typescript\r\naction: AopAction = async (_args, next, _receiver) => {\r\n return await next();\r\n};\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nactionAsync: AopAction = async (_args, next, _receiver) => {\r\n const timeBegin = Date.now();\r\n const res = await next();\r\n const timeEnd = Date.now();\r\n console.log('actionAsync: ', timeEnd - timeBegin);\r\n return res;\r\n};\r\n```\r\n\r\n* `actionAsync`: 提供与`ServiceTest`同名的方法`actionAsync`\r\n\r\n## 切面：getter\r\n\r\n为`ServiceTest#get name`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopgetter`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __get_xxx__: AopActionGetter = function (next, _receiver) {\r\n const value = next();\r\n return value;\r\n};\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nprotected __get_name__: AopActionGetter = function (next, _receiver) {\r\n const timeBegin = Date.now();\r\n const value = next();\r\n const timeEnd = Date.now();\r\n console.log('get name: ', timeEnd - timeBegin);\r\n return value;\r\n};\r\n```\r\n\r\n* `__get_name__`: 对应`ServiceTest`的 getter 方法`get name`\r\n\r\n## 切面：setter\r\n\r\n为`ServiceTest#set name`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopsetter`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __set_xxx__: AopActionSetter = function (value, next, _receiver) {\r\n return next(value);\r\n}\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nprotected __set_name__: AopActionSetter = function (value, next, _receiver) {\r\n const timeBegin = Date.now();\r\n const res = next(value);\r\n const timeEnd = Date.now();\r\n console.log('set name: ', timeEnd - timeBegin);\r\n return res;\r\n};\r\n```\r\n\r\n* `__set_name__`: 对应`ServiceTest`的 setter 方法`set name`\r\n\r\n## 切面：`__init__`\r\n\r\n为`ServiceTest#__init__`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopinit`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __init__: AopActionInit = (_args, next, _receiver) => {\r\n next();\r\n};\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nprotected __init__: AopActionInit = (_args, next, _receiver) => {\r\n const timeBegin = Date.now();\r\n next();\r\n const timeEnd = Date.now();\r\n console.log('__init__: ', timeEnd - timeBegin);\r\n};\r\n```\r\n\r\n* `__init__`: 提供与`ServiceTest`同名的方法`__init__`\r\n\r\n## 切面：`__dispose__`\r\n\r\n为`ServiceTest#__dispose__`输出运行时长\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopdispose`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __dispose__: AopActionDispose = async (_args, next, _receiver) => {\r\n await next();\r\n};\r\n```\r\n\r\n调整代码，然后添加 log 逻辑\r\n\r\n```typescript\r\nprotected __dispose__: AopActionDispose = async (_args, next, _receiver) => {\r\n const timeBegin = Date.now();\r\n await next();\r\n const timeEnd = Date.now();\r\n console.log('__dispose__: ', timeEnd - timeBegin);\r\n};\r\n```\r\n\r\n* `__dispose__`: 提供与`ServiceTest`同名的方法`__dispose__`\r\n\r\n## 切面：`__get__`\r\n\r\n为`ServiceTest`扩展魔术方法\r\n\r\n* 参见: [魔术方法](https://vona.js.org/zh/guide/aop/internal/magic-method.html)\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopget`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __get__: AopActionGet = (_prop, next, _receiver) => {\r\n const value = next();\r\n return value;\r\n};\r\n```\r\n\r\n调整代码，然后添加自定义字段`red`\r\n\r\n```typescript\r\nprotected __get__: AopActionGet = (prop, next, _receiver) => {\r\n if (prop === 'red') return '#FF0000';\r\n const value = next();\r\n return value;\r\n};\r\n```\r\n\r\n* `__get__`: 约定的魔术方法名称\r\n\r\n通过接口类型合并的机制为颜色提供类型定义\r\n\r\n```typescript\r\ndeclare module 'vona-module-demo-student' {\r\n export interface ServiceTest {\r\n red: string;\r\n }\r\n}\r\n```\r\n\r\n## 切面：`__set__`\r\n\r\n为`ServiceTest`扩展魔术方法\r\n\r\n* 参见: [魔术方法](https://vona.js.org/zh/guide/aop/internal/magic-method.html)\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopset`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __set__: AopActionSet = (_prop, value, next, _receiver) => {\r\n return next(value);\r\n};\r\n```\r\n\r\n调整代码，为自定义字段`red`设置值\r\n\r\n```typescript\r\nprivate _colorRed: string | undefined;\r\n\r\nprotected __set__: AopActionSet = (prop, value, next, _receiver) => {\r\n if (prop === 'red') {\r\n this._colorRed = value;\r\n return true;\r\n }\r\n return next(value);\r\n};\r\n```\r\n\r\n* `__set__`: 约定的魔术方法名称\r\n* 如果为`prop`设置了值，返回`true`，否则调用`next`方法\r\n\r\n然后调整`__get__`的逻辑:\r\n\r\n```diff\r\nprotected __get__: AopActionGet = (prop, next, _receiver) => {\r\n- if (prop === 'red') return '#FF0000';\r\n+ if (prop === 'red') return this._colorRed;\r\n const value = next();\r\n return value;\r\n}\r\n```\r\n\r\n## 切面：`__method__`\r\n\r\n为`ServiceTest`的任何方法扩展逻辑\r\n\r\n在 VSCode 编辑器中，输入代码片段`aopmethod`，自动生成代码骨架:\r\n\r\n```typescript\r\nprotected __method__: AopActionMethod = (_method, _args, next, _receiver) => {\r\n return next();\r\n};\r\n```\r\n\r\n调整代码，然后为方法`actionSync`和`actionAsync`添加 log 逻辑\r\n\r\n```typescript\r\nprotected __method__: AopActionMethod = (method, _args, next, _receiver) => {\r\n if (method !== 'actionSync' && method !== 'actionAsync') {\r\n return next();\r\n }\r\n const timeBegin = Date.now();\r\n function done(res) {\r\n const timeEnd = Date.now();\r\n console.log(`method ${method}: `, timeEnd - timeBegin);\r\n return res;\r\n }\r\n const res = next();\r\n if (res?.then) {\r\n return res.then((res: any) => {\r\n return done(res);\r\n });\r\n }\r\n return done(res);\r\n};\r\n```\r\n\r\n* `__method__`: 约定的魔术方法名称\r\n* `res?.then`: 判断返回值是否是 Promise 对象，进行不同处理，从而兼容`同步方法`和`异步方法`\r\n\r\n## AOP顺序\r\n\r\n针对同一个目标 Class，可以关联多个 AOP。所以，VonaJS 提供了两个参数，用于控制 AOP 的执行顺序\r\n\r\n### 1. dependencies\r\n\r\n比如，还有一个 AOP `demo-student:log3`，我们希望执行顺序如下：`demo-student:log3` > `Current`\r\n\r\n```diff\r\n@Aop({\r\n match: 'demo-student.service.test',\r\n+ dependencies: 'demo-student:log3',\r\n})\r\nclass AopLog {}\r\n```\r\n\r\n### 2. dependents\r\n\r\n`dependents`的顺序刚好与`dependencies`相反，我们希望执行顺序如下：`Current` > `demo-student:log3`\r\n\r\n```diff\r\n@Aop({\r\n match: 'demo-student.service.test',\r\n+ dependents: 'demo-student:log3',\r\n})\r\nclass AopLog {}\r\n```\r\n\r\n## AOP启用/禁用\r\n\r\n可以控制 AOP 的`启用/禁用`\r\n\r\n### 1. Enable\r\n\r\n`src/backend/config/config/config.ts`\r\n\r\n```diff\r\n// onions\r\nconfig.onions = {\r\n aop: {\r\n 'demo-student:log': {\r\n+ enable: false,\r\n },\r\n },\r\n};\r\n```\r\n\r\n### 2. Meta\r\n\r\n可以让 AOP 在指定的运行环境生效\r\n\r\n| 名称 | 类型 | 说明 |\r\n| ------ | ----------------- | ---------------------------------------------------------------------------------------- |\r\n| flavor | string\\|string\\[] | 参见: [运行环境与Flavor](https://vona.js.org/zh/guide/env-config/mode-flavor/introduction.html) |\r\n| mode | string\\|string\\[] | 参见: [运行环境与Flavor](https://vona.js.org/zh/guide/env-config/mode-flavor/introduction.html) |\r\n\r\n* 举例\r\n\r\n```diff\r\n@Aop({\r\n+ meta: {\r\n+ flavor: 'normal',\r\n+ mode: 'dev',\r\n+ },\r\n})\r\nclass AopLog {}\r\n```\r\n\r\n## 查看当前生效的AOP清单\r\n\r\n可以直接在目标 Class action 中输出当前生效的 AOP 清单\r\n\r\n```diff\r\nclass ServiceTest {\r\n protected async __dispose__() {\r\n+ this.bean.onion.aop.inspect();\r\n this._name = '';\r\n }\r\n```\r\n\r\n* `this.bean.onion`: 取得全局 Service 实例 `onion`\r\n* `.aop`: 取得与 AOP 相关的 Service 实例\r\n* `.inspect`: 输出当前生效的 AOP 清单\r\n\r\n当方法被执行时，会自动在控制台输出当前生效的 AOP 清单，效果如下：\r\n\r\n![aop-1.png](//static.cnodejs.org/Flvhc_kARVcds62MZFbz4C85m5zk)\r\n\r\n## 资源\r\n\r\n* Github：\r\n* 文档：","title","VonaJS AOP编程大杀器：外部切面","last_reply_at","2025-11-26 09:52:16.016","good","top","visit_count",3365,"2025-10-27 01:49:12.465","author",{"_13":55,"_22":56},"zhennann","https://avatars.githubusercontent.com/u/24246985?v=4"]