Prefacio
En el desarrollo front-end, a menudo nos encontramos con situaciones en las que necesitamos mostrar diferentes etiquetas y colores según el código de estado devuelto por el backend. Por ejemplo, tenemos una lista de contratos y el estado en ella representa varios significados. Necesitamos mostrar las etiquetas y colores correspondientes según el valor del estado. Por supuesto, existe, por ejemplo, una función de búsqueda, que también implica la búsqueda según el estado. Por ejemplo:
| estado | etiqueta | color |
|---|---|---|
| 0 | Para ser firmado | rojo |
| 1 | haciendo efecto | verde |
| 2 | estar caducado | gris |
| 3 | Cancelado | gris |
| 4 | No activo | gris |
| 5 | Abolido | gris |
| 6 | abortado | gris |
Entonces, ¿cómo escribirías en esta situación? ¿Usar v-if para juzgar? De hecho, estas cosas en sí mismas no tienen ninguna dificultad técnica. Es solo que el pensamiento de desarrollo conduce a diferentes métodos de escritura para todos. A algunas personas les gusta usar atributos calculados para usar varios otros conjuntos if. Algunas personas usan directamente el método cv. Cada La página escribirá lo siguiente siempre que se utilice. Código:
<div v-if="item.status === 0" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 1" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 2" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 3" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 4" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 5" :style="{ color: 'xxx' }">xxx</div>
<div v-if="item.status === 6" :style="{ color: 'xxx' }">xxx</div>
Como resultado, se escribe un conjunto de negocios y hay muchas páginas que usan esto. De repente, un día, el tipo de backend te dice: He agregado el estado xxx a este estado, por favor agrégalo. ¿Cómo deberías responder? ¿Qué? ¿Te refieres al reemplazo por lotes? Luego, si su diseño es diferente, ocurrirá la siguiente situación en una página determinada:
<span v-if="item.status === 1" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 0" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 2" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 3" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 4" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 5" :style="{ color: 'xxx' }">xxx</span>
<span v-if="item.status === 6" :style="{ color: 'xxx' }">xxx</span>
Lo escrito en cada lugar puede tener ligeras discrepancias por diversos motivos, lo que resulta en la imposibilidad de reemplazarlo en lotes. Y la función relacionada con la búsqueda basada en el código de estado no se puede reemplazar, entonces, ¿existe un método de encapsulación simple y elegante que haga que nuestro código sea más fácil de mantener y reutilizar?
¡La respuesta es sí! En este blog, les presentaré una solución que utiliza métodos de clase para encapsular la lista de opciones, de modo que pueda obtener el valor de cualquier atributo, ya sea una etiqueta o un color, con una línea de código. Los beneficios de hacer esto son:
- Puede encapsular datos y lógica relacionados en una clase para mejorar la cohesión .
- Puede utilizar la herencia y el polimorfismo para ampliar o reescribir esta clase para implementar más funciones o adaptarse a más escenarios.
- Puede utilizar constructores o métodos estáticos para inicializar o crear instancias de esta clase, aumentando la flexibilidad .
definir una interfaz
Primero, necesitamos definir una interfaz que represente el objeto de opciones. Un objeto de opciones contiene tres atributos: etiqueta, valor y estilo. Podemos usar TypeScript para definir esta interfaz, de la siguiente manera:
// 定义一个接口，表示选项对象
interface IOptionItem<T> {
label: string;
value: T;
style?: CSSProperties;
}
Copiar
Tenga en cuenta que usamos un parámetro genérico T para representar el tipo de valor, de modo que podamos hacer que esta interfaz admita diferentes tipos de valores, como números, cadenas, valores booleanos, etc.
Definir una clase genérica
A continuación, necesitamos definir una clase genérica que represente la lista de opciones. Una lista de opciones contiene opciones de propiedad privada (matriz de opciones) y un método público get (obtiene la propiedad correspondiente según el valor). Podemos usar TypeScript para definir esta clase genérica de la siguiente manera:
// 定义一个泛型类，表示选项列表
class OptionList<T> {
// 存储选项列表
options: IOptionItem<T>[] = [];
// 定义一个构造函数，接收一个选项列表作为参数
constructor(optionList: IOptionItem<T>[]) {
this.options = optionList;
}
// 定义一个通用方法，根据值获取对应的属性
public get<K extends keyof IOptionItem<T>>(value: T, key: K) {
return this.options.find(v => v.value === value)?.[key];
}
}
Copiar
Tenga en cuenta que usamos un parámetro genérico T para representar el tipo de lista de opciones, de modo que podamos hacer que esta clase admita diferentes tipos de listas de opciones, como números, cadenas, valores booleanos, etc. También usamos un parámetro genérico K para representar el nombre del atributo del objeto de opción, de modo que podamos permitir que este método devuelva el valor de cualquier atributo, como etiqueta, valor, estilo, etc.
Crear una instancia de una lista de opciones
Finalmente, necesitamos crear una instancia de la lista de opciones para almacenar las opciones y colores del estado del contrato. Podemos usar TypeScript para crear esta instancia de la siguiente manera:
// 创建一个选项列表的实例
const contractStatusOptions = new OptionList<number>([
{
label: "待签约", value: 0, style: {
color: "red",'--bg-color':'#1899ff' } },
{
label: "生效中", value: 1, style: {
color: "green" } },
{
label: "已到期", value: 2, style: {
color: "gray" } },
{
label: "已取消", value: 3, style: {
color: "gray" } },
{
label: "未生效", value: 4, style: {
color: "gray" } },
{
label: "已作废", value: 5, style: {
color: "gray" } },
{
label: "已中止", value: 6, style: {
color: "gray" } }
]);
Copiar
Tenga en cuenta que utilizamos el tipo de número como tipo de lista de opciones porque el valor del estado del contrato es un número. También agregamos un atributo de estilo a cada objeto de opciones para almacenar el color.
Llame a métodos comunes para obtener etiquetas y estilos.
Ahora, podemos usar esta instancia para llamar al método general y obtener la etiqueta y el estilo correspondientes según el valor de estado. Podemos usar TypeScript para llamar a este método, de la siguiente manera:
// 调用通用方法，获取标签和样式
contractStatusOptions.get(1, 'label'); // 生效中
contractStatusOptions.get(1, 'style'); // { color: "green" }
Copiar
Tenga en cuenta que pasamos dos parámetros: valor de estado y nombre de atributo. De esta forma podemos obtener el valor de cualquier atributo, ya sea una etiqueta o un color, con una línea de código.
Resumir
En este artículo, te presento una forma de encapsular una lista de opciones con un método de clase, de modo que puedas obtener el valor de cualquier atributo, ya sea una etiqueta o un color, con una línea de código. Los beneficios de hacer esto son:
- Puede encapsular datos y lógica relacionados en una clase para mejorar la cohesión .
- Puede utilizar la herencia y el polimorfismo para ampliar o reescribir esta clase para implementar más funciones o adaptarse a más escenarios.
- Puede utilizar constructores o métodos estáticos para inicializar o crear instancias de esta clase, aumentando la flexibilidad .
Espero que hayas aprendido algo útil de este artículo y puedas aplicar este esquema de empaquetado en tus propios proyectos. Si tiene alguna pregunta o idea o tiene una solución de embalaje más adecuada, ¡bienvenido a discutirla!