VonaJS AOP编程:魔术方法

在VonaJS框架中,AOP编程包括三方面:控制器切面内部切面外部切面内部切面包括两个能力:AOP Method魔术方法。这里我们简要介绍一下魔术方法的用法。

魔术方法

魔术方法,允许我们在 Class 内部通过__get____set__切入动态属性或方法

举例:Module Scope

为了让 IOC 容器的使用更加简洁和直观,VonaJS 推荐优先使用依赖查找策略,从而使用更少的装饰器函数,使用更少的类型标注。通过Module Scope对象访问模块提供的资源,就是践行依赖查找策略的机制之一

比如,模块 demo-student 中有一个 model student,用于 crud 操作。可以这样使用 model:

typescript 复制代码
import { ModelStudent } from '../model/student.ts';

async findMany(params) {
  const model = this.bean._getBean(ModelStudent);
  return await model.selectAndCount(params);
}

使用魔术方法:

typescript 复制代码
async findMany(params) {
  return await this.scope.model.student.selectAndCount(params);
}
  • this.scope.model.xxx: 通过魔术方法动态获取当前模块中的 model 实例

举例:CRUD(魔术方法)

Vona ORM 采用魔术方法的机制进一步简化操作数据的代码

比如,通过字段id查询学生信息,代码如下:

typescript 复制代码
async findOne(id) {
  return await this.scope.model.student.get({ id });
}

使用魔术方法:

typescript 复制代码
async findOne(id) {
  return await this.scope.model.student.getById(id);
}
  • 系统自动从 method name getById中解析出参数id,然后调用实际的 CRUD 方法,这里就是: get({ id })

创建Class

可以在任何 Class 中实现魔术方法。下面,以 Service 为例,在模块 demo-student 中创建一个 Service color,代码如下:

  • 如何创建 Service,参见: Service
typescript 复制代码
import { BeanBase } from 'vona';
import { Service } from 'vona-module-a-bean';

@Service()
export class ServiceColor extends BeanBase {}

__get__

然后,通过__get__实现颜色值的获取

1. 添加代码骨架

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

diff 复制代码
@Service()
export class ServiceColor extends BeanBase {
+ protected __get__(prop: string) {}
}

2. 实现自定义逻辑

diff 复制代码
@Service()
export class ServiceColor extends BeanBase {
+ private _colors = {
+   red: '#FF0000',
+   green: '#00FF00',
+   blue: '#0000FF',
+ };

  protected __get__(prop: string) {
+   return this._colors[prop];
  }
}

3. 添加类型合并

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

typescript 复制代码
export interface ServiceColor {
  red: string;
  green: string;
  blue: string;
}

4. 使用魔术方法

typescript 复制代码
async test() {
  console.log(this.scope.service.color.red);
  console.log(this.scope.service.color.green);
  console.log(this.scope.service.color.blue);
}

__set__

然后,通过__set__实现颜色值的设置

1. 添加代码骨架

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

diff 复制代码
@Service()
export class ServiceColor extends BeanBase {
+ protected __set__(prop: string, value: any): boolean {
+   return false;
+ }
}

2. 实现自定义逻辑

diff 复制代码
@Service()
export class ServiceColor extends BeanBase {
  private _colors = {
    red: '#FF0000',
    green: '#00FF00',
    blue: '#0000FF',
+   black: '',
  };

  protected __set__(prop: string, value: any): boolean {
+   if (this._colors[prop] === undefined) return false;
+   this._colors[prop] = value;
+   return true;
  }
}
  • 如果为prop设置了值,返回true,否则返回false

3. 添加类型合并

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

diff 复制代码
export interface ServiceColor {
  red: string;
  green: string;
  blue: string;
+ black: string;
}

4. 使用魔术方法

typescript 复制代码
async test() {
  this.scope.service.color.black = '#000000';
  console.log(this.scope.service.color.black);
}

资源

相关推荐
心随雨下1 小时前
好会计自定义结转如何设置
typescript
lichong9511 小时前
harmonyos 大屏设备怎么弹出 u 盘
前端·macos·华为·typescript·android studio·harmonyos·大前端
涔溪2 小时前
Vue3 中ref和reactive的核心区别是什么?
前端·vue.js·typescript
by__csdn3 小时前
Ajax与Axios终极对比指南全方位对比解析
前端·javascript·ajax·okhttp·typescript·vue·restful
by__csdn3 小时前
Vue3+Axios终极封装指南
前端·javascript·vue.js·http·ajax·typescript·vue
不会写DN4 小时前
如何实现UniApp登录拦截?
前端·javascript·vue.js·typescript·uni-app·vue
im_AMBER4 小时前
Canvas架构手记 08 副作用与同步 | 不可变更新 | 调试与错误边界 | ESLint
前端·笔记·学习·react.js·架构·typescript·前端框架
by__csdn13 小时前
Vue2纯前端图形验证码实现详解+源码
前端·javascript·typescript·vue·状态模式·css3·canva可画
悟能不能悟21 小时前
在TypeScript中 const xxx=(xx:any)=>{}为什么要加any
linux·git·typescript
我爱学习_zwj1 天前
《第七章》TS工程基础:检查指令与类型声明实战
前端·typescript