记一次js-model数据模型使用

最新推荐文章于 2025-04-08 20:22:53 发布

原创最新推荐文章于 2025-04-08 20:22:53 发布 · 2.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

JS-Model是一款用于JavaScript的数据模型工具，提供字段定义、数据解析与格式化功能，帮助开发者轻松处理复杂数据结构，实现数据标准化转换，避免繁琐的条件判断。

为javascript准备的数据模型工具

官方中文文档

安装

npm安装

npm install js-model --save

Model

字段定义:

String: "" || String
Number: 0 || Number
Date: Date
Array: []
Object: {}

Default Parameter

{
  //dispose的时候移除空数组
  removeEmptyArray: false,
  //parse的时候移除null数据
  removeNull: false,
  //移除null数据从数组中
  removeNullFromArray: false,
  //从子对象中移除空对象
  removeEmptyObject: true,
}

Const

  Model.S // money ten 十
  Model.B // money hundred 百
  Model.Q // money thousand 千
  Model.W //money ten thousand 万
  Model.SW // money one hundred thousand 十万
  Model.BW // money million 百万
  Model.QW // money ten million 千万
  Model.Y // money billion 亿

方法

parse:
- 创建完整对象数据，让你摆脱{{a&&a.b?a.b.c:''}}这种无聊的判断了
- 数据标准化转换，当数据从后台传输过来的时候，日期是时间戳，金额是以元为单位，parse方法是帮你转换时间戳至时间字符串，金额以一定单位转换好，并且可以帮助你补全好所有的字段。
dispose:
- 当你需要把数据传送至后台之前，把日期转换成时间戳，把金额转换为以元为单位的数额，标准化数据格式，删除为空的数据。
例：通过input修改的数值为String, 通过dispose转换成数字格式。

基本

Basic.js

import Model from "js-model";

let Basic = new Model({
    id: 0,
    source: {
        type: Date,
        format: 'l'  // 使用manba日期格式化, "l": "YYYY-MM-DD",
    },
    description: "",
    tags: [ 0 ],
    companyId: "",
    rate: {
    	type: Number,
    	default: 0.8  // 使用默认值，只对 String, Number, Date 类型的值有效。
    },
    salary: {
        type: Number,
        unit: Model.Q // 金额转换，此处单位为 千
    }
});
export default Basic;

parse

Usage 1: 补充字段

import Basic from './Basic.js'
let basicValue = Basic.parse({});

basicValue:

{
    id: null,
    source: null,
    description: null,
    tags: [],
    companyId: null,
    rate: 0.8, // use default value
    salary: null
}

import Model from 'js-model'
import default_sany_logo from '@/assets/sany/images/sany-logo.png'
import default_sany_QRCode from '@/assets/sany/images/QRCode.png'

const flowBtnModel = new Model({
  logo: {
    type: String,
    default: default_sany_logo
  },
  // 二维码
  qrCode: {
    type: String,
    default: default_sany_QRCode
  },
  homeUserPo: {
    // 用户名
    name: {
      type: String,
      default: '游客'
    },
    // 部门
    group: {
      type: String,
      default: '无'
    },
    // 岗位
    possittons: {
      type: String,
      default: '无'
    },
    // 中间标题
    midInfo: {
      type: String,
      default: '报账单'
    }
  }
})
export default flowBtnModel