@vmojs/core

1.0.3 • Public • Published

Vmo

Using TypeScript MIT License

简介

Vmo 是一个用于前端的数据模型。解决前端接口访问混乱,服务端数据请求方式不统一,数据返回结果不一致的微型框架。

Vmo 主要用于处理数据请求,数据模型管理。可配合当前主流前端框架进行数据模型管理 Vue,React,Angular。

能够有效处理以下问题:

  • 接口请求混乱,axios.get...随处可见。
  • 数据管理混乱,请求到的数据结果用完即丢、拿到的数据直接放进Store
  • 数据可靠性弱,不能保证请求数据是否稳定,字段是否多、是否少。
  • Action方法混乱,Action中及存在同步对Store的修改,又存在异步请求修改Store
  • 代码提示弱,请求到的数据无法使用TypeScript进行代码提示,只能定义 any 类型。
  • 无效字段增多,人员变动,字段含义信息逐步丢失,新业务定义新字段。
  • 项目迁移繁重,项目重构时,对字段不理解,重构过程功能点、数据丢失。

Vmo 特性

Vmo 只提供一个基类,提倡的主要是对数据模型的封装设计。你可以像以下方式封装数据模型

import Vmo, { Field } from "Vmo";

interface IFilterValue {
  name: string;
  value: string;
}
export default class FilterModel extends Vmo {
  @Field
  public key: string;
  @Field
  public name: string;
  @Field
  public filters: IFilterValue[];

  /**
   * 将数据适配\转换为模型字段
   * @param data
   */
  protected load(data: any): this {
    data.filters = data.values;
    return super.load(data);
  }
}

在数据模型的基础上,Vmo 利用驱动器派生子类,赋予数据模型数据获取及存储的能力,你可以像这样实现一个完整的数据模型获取。

AxiosVmo 是基于 Vmo 实现的一个使用Axios作为 数据获取、存储的 Driver ,你同样可以封装自己的Driver ,通过相同接口,实现多态方法,来做到在不同介质上存储和获取数据。比如IndexDB,LocalStorage

import { AxiosVmo, Field, mapValue } from "Vmo";
import { USER_URL } from "../constants/Urls";
import FilterModel from "./FilterModel";

// 商品查询参数
interface IGoodsQuery {
  id: number;
  search?: string;
  filter?: any;
}

interface IGoodsCollection {
  goods: GoodsModel[];
  goodsRows: number;
  filters: FilterModel[];
}

export default class GoodsModel extends AxiosVmo {
  protected static requestUrl: string = USER_URL;

  @Field
  public id: number;
  @Field
  public catId: number;
  @Field
  public aliasName: string;
  @Field
  public uid: number;
  @Field
  public userId: number;
  @Field
  public size: { x: number; y: number };

  /**
   * 返回GoodsModel 集合
   * @param query
   */
  public static async list(query: IGoodsQuery): Promise<GoodsModel[]> {
    const { items } = await this.fetch(query);
    return mapValue(items, GoodsModel);
  }

  /**
   * 返回GoodsModel 集合 及附属信息
   * @param query
   */
  public static async listWithDetail(
    query: IGoodsQuery
  ): Promise<IGoodsCollection> {
    const { items, allRows, aggr } = await this.fetch(query);
    const goods = mapValue(items, GoodsModel);
    const filters = mapValue(aggr, FilterModel);
    return { goods, goodsRows: allRows, filters };
  }

  public static async fetch(query: IGoodsQuery): Promise<any> {
    const result = await this.driver.get(this.requestUrl, query);
    return result;
  }

  /**
   * 将请求的数据适配转换为Model
   * @param data
   */
  protected load(data: any): this {
    data.catId = data.cat_id;
    data.aliasName = data.aliasname;
    data.userId = data.user_id;

    return super.load(data);
  }
}

Mobx

同样的Vmo还可以配合 Mobx使用,真正完成数据模型与数据响应结合使用。

import Vmo, { Field } from "Vmo";
import { observable } from "mobx";

interface IFilterValue {
  name: string;
  value: string;
}
export default class FilterModel extends Vmo {
  @Field
  @observable
  public key: string;
  @Field
  @observable
  public name: string;
  @Field
  @observable
  public filters: IFilterValue[];

  /**
   * 将数据适配\转换为模型字段
   * @param data
   */
  protected load(data: any): this {
    data.filters = data.values;
    return super.load(data);
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @vmojs/core

Weekly Downloads

1

Version

1.0.3

License

ISC

Unpacked Size

15.3 kB

Total Files

55

Last publish

Collaborators