TS 结合 Vue 实现动态注册和响应式管理

基础知识

1: 面向对象

面向对象编程是 JavaScript 中一种重要的编程范式，它帮助开发者通过类和对象组织代码，提高代码的复用性。

2: 装饰器

装饰器在 JavaScript 中是用于包装 class 或方法的高阶函数

为了统一术语，下面的内容会把装饰器讲成注解

在 oinone 平台中，无论是字段还是动作，都是通过 ts + vue 来实现的，ts 中是面向对象的写法，所有的属性、方法建议都在对应的 class 中，如果有通用的属性跟方法，可以放在一个公共的 class 中，然后通过继承来实现，这样便于维护。

<!-- FormString.vue -->
<template>
  <div>
    <p>用户名: {{userName}}</p>
    <button @click="updateUser({name: '王五'})">修改用户名</button>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    props: {
      userName: {
        type: String,
        default: ''
      },
      userInfo: {
        type: Object,
        default: () => ({})
      },
      updateUser: {
        type: Function,
        default: () => () => ({})
      }
    }
  });
</script>

import FormString from './FormString.vue'

@SPI.ClassFactory(
  FormFieldWidget.Token({
    viewType: [ViewType.Form, ViewType.Search],
    ttype: ModelFieldType.String
  })
)
export class FormCustomStringFieldWidget extends FormFieldWidget {
  public initialize(props) {
    super.initialize(props); // 调用父类方法，确保继承的属性和方法正常初始化
    this.setComponent(FormString); // 注册 Vue 组件，这样该 Widget 就会渲染 FormString 组件
    return this;
  }

  public otherInfo = {
    name:'张三'
  }

  @Widget.Reactive()
  public userInfo = {
    name:'李四'
  }

  @Widget.Reactive()
  public get userName() {
    return this.userInfo.name
  }

  @Widget.Method()
  public updateUser userName(user) {
     this.userInfo = user
  }

  public updateOtherUser userName(user) {
     this.otherUser = user
  }
}

这段代码定义了一个 FormCustomStringFieldWidget 类，用于处理表单中 String 类型字段的展示和交互。该类继承自 FormFieldWidget，并使用了多种注解和特性来实现不同功能。下面是对代码的详细讲解。

SPI 讲解

@SPI.ClassFactory()

无论是自定义字段还是动作，或者是自定义 mask、layout，都会用到@SPI.ClassFactory来注册，@SPI.ClassFactory 是一个注解，它标记了该类是通过工厂模式注册的。

在前端中，所有的注解（装饰器）本质上还是高阶函数，下面是一段伪代码。

const SPI = {
  ClassFactory(token) {
    return (targetClass) => {
      // todo something
    };
  }
};

class MyClass {}

SPI.ClassFactory(注册条件)(MyClass);

所以我们在使用@SPI.ClassFactory的时候，就会根据注册条件把对应的 class 注册到对应的工厂中。

注册条件

FormFieldWidget.Token({
  viewType: [ViewType.Form, ViewType.Search],
  ttype: ModelFieldType.String
});

这段代码调用FormFieldWidget.Token函数，生成一个 token，这个 token 会作为参数传递给@SPI.ClassFactory，然后@SPI.ClassFactory会根据这个 token 来注册对应的 class。

不同类型的 widget 调用的 token 函数不同：

注册条件集合

字段注册条件

• 表单(详情、搜索、画廊)字段: FormFieldWidget.Token
• 表格字段: BaseFieldWidget.Token

下面是参数描述和含义：

当我们注册 字段 SPI 的时候，对应注册条件基本只会用到viewType、ttype、widget、这三个属性，其他属性都是可选的。

动作注册条件

• 动作: ActionWidget.Token

下面是参数描述和含义：

当我们注册 动作 SPI 的时候，对应注册条件基本只会用到actionType、model、name、这三个属性，其他属性都是可选的。

视图、layout 注册条件

• 动作: BaseElementWidget.Token

下面是参数描述和含义：

当我们注册 layout 或者视图 SPI 的时候，对应注册条件基本只会用到viewType、widget、这两个个属性，其他属性都是可选的。

mask 注册条件

• 动作: MaskWidget.Token

下面是参数描述和含义：

当我们注册 mask SPI 的时候，对应注册条件只会用到widget。

路由注册条件

• 动作: RouterWidget.Token

下面是参数描述和含义：

当我们注册 路由 SPI 的时候，对应注册条件只会用到widget。

SPI 覆盖

在开发中，有时我们需要对平台底层已注册的 SPI 进行覆盖。这种情况通常出现在需要修改或扩展某些功能时。下面将介绍如何安全地覆盖 SPI。

以字段为例，加入我们需要覆盖平台默认的字段，这个字段是 Form 表单里面的String类型，我们希望这个字段可以支持业务扩展的能力，那么我们可以通过如下方式来扩展这个字段：

在 5.0.x 版本中，平台部分源码是开放的，所以我们可以看到平台默认的字段源码，FormStringFieldSingleWidget就是 Form 表单里面的String类型对应的 class，它的 SPI 是：

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    viewType: [ViewType.Form, ViewType.Search],
    ttype: ModelFieldType.String
  })
)

如果想覆盖它，只需要 SPI 注册条件一致就行。

@SPI.ClassFactory(
  FormFieldWidget.Token({
    viewType: [ViewType.Form, ViewType.Search],
    ttype: ModelFieldType.String
  })
)
class ExistingStringFieldWidget extends FormStringFieldSingleWidget {
  // 平台已有实现
}

注册 vue 组件

在FormCustomStringFieldWidget中，我们定义了initialize函数里面写了一点代码。

import FormString from './FormString.vue'

class FormCustomStringFieldWidget{
  public initialize(props) {
    super.initialize(props);
    this.setComponent(FormString);
    return this;
  }
}

initialize函数是固定写法，super.initialize(props)是用来调用父类的方法，this.setComponent(FormString)是将 vue 组件注册到当前 widget 中，当自定义的字段不需要重写 vue 组件的时候，那么就不需要重写initialize函数，只需要继承对应的 class 重写对应的属性、方法即可

当自定义的字段、动作、视图、mask 需要使用自己的 vue 组件时，才需要重写initialize函数

ts 与 vue 之间的联动

Widget.Reactive()

在FormCustomStringFieldWidget中，我们定义了userInfo和userName两个属性，通过Widget.Reactive()注解，将这两个属性变成响应式属性，这样在 vue 组件中中，就可以通过 props 来接受两个属性，otherInfo属性没有打上任何注解，说明它是一个普通的属性，在对应的 vue 文件里面是获取不到的。

当定义 userName 时，我们为其加上了 get 属性，这会将它转换为一个计算属性，方便在 Vue 组件中动态更新。

所有可以理解成：

 @Widget.Reactive()
 public userInfo = {}
 等价于 ↓
 const  userInfo = ref({})

  @Widget.Reactive()
  public get userName() {
    return this.userInfo.name
  }
   等价于  ↓
  const  userName = computed(() => userInfo.name)

Widget.Method()

在上述代码中，我们还定义了updateUser跟updateOtherUser方法，通过updateUser上使用了Widget.Method()注解，将这个方法变成一个响应式方法，这样在 vue 组件中，就可以通过 props 来接受这个方法，调用这个方法，实现数据的更新，updateOtherUser是一个普通的方法，在 vue 文件中是获取不到的。

最终我们可以得出一个结论，在 ts 中，如果定义的属性跟方法需要在 vue 中获取，那么就要加上Widget.Reactive()注解，如果是方法，就加上Widget.Method()注解，如果该属性是一个计算属性，就加上get属性。

伪代码实现：

import { ref, computed } from 'vue';

const Widget = {
  Reactive(target, key, description) {
    if (description.get) {
      target[key] = computed(description.get);
    } else {
      target[key] = ref(target[key]);
    }
  },

  Method(target, key) {
    target[key] = ref(target[key]);
  }
};

完整案例：用户信息管理

场景：我们将创建一个用户信息管理的小模块，允许用户查看和修改他们的个人信息，包括姓名和邮箱地址。我们将用 Vue 组件展示这些信息，并使用 TS 中的类来管理逻辑。此案例将展示如何使用 @Widget.Reactive() 和 @Widget.Method() 注解来确保数据和方法的响应式更新。

第一步：Vue 组件定义

我们首先定义一个简单的 Vue 组件，用于显示和更新用户信息。

<!-- UserInfo.vue -->
<template>
  <div>
    <p>姓名: {{ userName }}</p>
    <p>邮箱: {{ userEmail }}</p>
    <button @click="updateUserInfo({ name: '李四', email: 'li.si@example.com' })">修改用户信息</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    props: {
      userName: {
        type: String,
        default: ''
      },
      userEmail: {
        type: String,
        default: ''
      },
      updateUserInfo: {
        type: Function,
        default: () => () => ({})
      }
    }
  });
</script>

第二步：TypeScript 类定义

我们在 TypeScript 中定义一个类 FormStringUserFieldWidget，用于管理用户信息。我们使用 @Widget.Reactive() 和 @Widget.Method() 来确保数据的响应式更新和方法的可用性。

import UserInfo from './UserInfo.vue';

@SPI.ClassFactory(
  FormFieldWidget.Token({
    viewType: [ViewType.Form],
    ttype: ModelFieldType.String,
    widget: 'FormStringUserFieldWidget'
  })
)
export class FormStringUserFieldWidget extends FormFieldWidget {
  // 注册 Vue 组件
  public initialize(props: any) {
    super.initialize(props);
    this.setComponent(UserInfo); // 将 UserInfo.vue 组件注册到当前 Widget
    return this;
  }

  // 用户基础信息
  @Widget.Reactive()
  public userInfo = {
    name: '张三',
    email: 'zhang.san@example.com'
  };

  // 返回用户姓名的计算属性
  @Widget.Reactive()
  public get userName() {
    return this.userInfo.name;
  }

  // 返回用户邮箱的计算属性
  @Widget.Reactive()
  public get userEmail() {
    return this.userInfo.email;
  }

  // 更新用户信息的方法
  @Widget.Method()
  public updateUserInfo(newInfo: { name: string; email: string }) {
    this.userInfo = { ...this.userInfo, ...newInfo };
  }
}

第三步：案例解析

• initialize 方法：
  • 我们使用 initialize 方法来注册 Vue 组件 UserInfo.vue。当这个类被实例化时，Vue 组件会被渲染，并且与类中的响应式数据和方法建立连接。
• userInfo 属性：
  • 这是用户的基本信息对象，包含 name 和 email 两个字段。我们使用 @Widget.Reactive() 注解将 userInfo 变成响应式数据，这样在 Vue 组件中可以随时获取和更新。
• userName 和 userEmail 计算属性：
  • 我们使用 get 关键字为 userName 和 userEmail 定义了计算属性，并使用 @Widget.Reactive() 注解，这样 Vue 组件可以根据 userInfo 的变化自动更新显示内容。
• updateUserInfo 方法：
  • 这是用于更新用户信息的响应式方法。通过 @Widget.Method() 注解，我们确保 Vue 组件能够调用此方法。点击 Vue 组件中的按钮后，会触发 updateUserInfo 方法更新用户的姓名和邮箱。
• Vue 组件
  • 我们通过 props 接收了从 TypeScript 类传递过来的 userName、userEmail 和 updateUserInfo 方法。点击按钮后，updateUserInfo 方法会被调用，用户信息将被更新。

通过这个完整的案例，我们展示了如何将 TypeScript 与 Vue 结合，通过 @Widget.Reactive() 和 @Widget.Method() 实现数据的响应式联动和方法调用。