Numbers Probably Matter

    @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);
      }
    }

    Keywords

    none

    Install

    npm i @vmojs/core

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    15.3 kB

    Total Files

    55

    Last publish

    Collaborators