Needlessly Promiscuous, Modularize!

    timod
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    Timod

    一个小巧、轻量、简单的前端数据模型库。

    Badges

    前言

    前端的数据来源绝大部分是来自服务端,我们经常能在前端项目里面看到这种操作:

    一个从后端获取的对象数据,经过层层传递,到最后面使用的时候,已经不知道里面到底是什么数据结构了。

    一个日期类型的字段,后端存储的是时间戳,前端每次在用的时候,都要 new Date() 一下。

    一个对象里面嵌套有对象,后端经常不返回某些空的数据,前端要用的时候,一层一层对象解构,无聊的判断 user?.address?.city

    为什么需要前端数据模型?请看下面使用章节的使用场景,如果看完你觉得不需要用到,那么请忽略,不要让项目变得更复杂。

    安装

    从 npm 安装:

    npm i --save timod

    发布的包中包含3种类型的产物:

    • dist: 适合浏览器环境
    • cjs: 适合 Node.js 环境
    • esm: 适合 ES Module 环境,通常需要 Webpack Rollup 等构建工具

    你可以通过 node_modules/timod/dist/timod.umd.js 来获取构建的产物

    浏览器

    引入 Timod 库文件:

    <script src="/path/to/dist/timod.umd.js"></script>

    然后可以使用全局变量 Timod

    <script type="text/javascript">
      const model = Timod.define({
        age: Number
      });
    </script>

    Node.js

    const Timod = require('timod/cjs');
    
    const model = Timod.define({
      age: Number
    });

    ES Module

    import Timod from 'timod/esm';
    
    const model = Timod.define({
      age: Number
    });

    使用

    基础用法

    定义一个前端数据模型:

    const Timod = require('timod/cjs');
    
    const userModel = Timod.define({
      age: Number,
      name: String
    });

    将后端的数据转换为前端数据模型:

    const user = userModel.parse({
      age: 27,
      name: 'Timod',
      xxx: 'xxx'
    });
    
    console.log(user) // { age: 27, name: 'Tiomd' }

    填充默认值

    有时候后端返回的数据中会缺少一些字段,前端需要指定默认值,如果直接通过 . 点操作符取值,可能会存在 undefined is not an Object 的错误,这种情况通过指定 default 默认值可以很好的解决问题:

    const Timod = require('timod/cjs');
    
    const userModel = Timod.define({
      age: {
        type: Number,
        default: 27
      },
      name: {
        type: String,
        default: 'Timod'
      }
    });
    
    const user = userModel.parse({
      age: 28
    });
    
    console.log(user) // { age: 28, name: 'Tiomd' }

    字段名映射

    有时候同一个数据,因为使用的场景不一样,后端和前端的命名也不一样,这种情况我们可以通过 mapto 映射到另一个字段的值:

    const Timod = require('timod/cjs');
    
    const userModel = Timod.define({
      age: {
        type: Number,
        default: 27,
        mapto: 'year'
      },
      name: {
        type: String,
        default: 'Timod'
      }
    });
    
    const user = userModel.parse({
      year: 28,
      name: 'Timod'
    });
    
    console.log(user) // { age: 28, name: 'Tiomd' }

    格式化

    后端返回的数据通常是数据库中保存的原始值,前端需要将它转换为合适的格式,这种情况我们可以通过 format 格式化很好的解决这个问题:

    const Timod = require('timod/cjs');
    
    const userModel = Timod.define({
      age: {
        type: Number,
        default: 27,
        mapto: 'year',
        format: (value) => {
          return +value // 我们将后端返回的字符串类型转换为 Number 类型
        }
      },
      name: {
        type: String,
        default: 'Timod'
      }
    });
    
    const user = userModel.parse({
      year: '28',
      name: 'Timod'
    });
    
    console.log(user) // { age: 28, name: 'Tiomd' }

    嵌套数据模型

    除了基本的 JavaScript 类型外,还支持嵌套数据模型,这种场景非常常见:

    const Timod = require('timod/cjs');
    
    const addressModel = Timod.define({
      province: String,
      city: String
    });
    
    const userModel = Timod.define({
      age: Number,
      name: String,
      address: addressModel
    });
    
    const user = userModel.parse({
      age: 28,
      name: 'Timod',
      address: {
        province: 'hangzhou',
        city: 'zhejiang'
      }
    });
    
    console.log(user) // { age: 28, name: 'Tiomd', address: { province: 'hangzhou', city: 'zhejiang' } }

    文档


    Keywords

    none

    Install

    npm i timod

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    40.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • lanfly