0.0.8 • Published 3 years ago

data-mock-react v0.0.8

Weekly downloads
1
License
MIT
Repository
-
Last release
3 years ago

Data Mocker

背景

前端框架

  • 页面渲染: react
  • 脚手架: umijs
  • 同步/异步请求: umi-request

业务需求

  • 对组件的state的值进行替换

基于上述技术框架和业务需求，本项目支持基于mocker data来对state做全局替换

功能

  • Basic Processor: 对string、number、Array类型数据作出替换(未标明的字段保留，不做变动)
  • Patch Processor: 对数组对象，支持按照字段筛选，将符合条件的对象作出支持将其中部分对象作出替换
  • Custom Processor： 支持用户自定义Processor，来做对应的替换
  • 通过静态变量进行配置
  • 通过local storage进行配置，支持动态修改
  • Batch Processor: 对数组对象，批量的将某一字段替换成对应值

安装

yarn

yarn add data-mock-react

npm

npm install --save data-mock-react

使用

假设在model文件里，我们在某个reducer中对state作出了更改，样例如下 mode/global.js

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      return Object.assign(state, data);
    }
  }
}

此时state值如下

  {
  "user": {
    "code": "200",
    "res": {
      "data1": {
        "list": [
          1,
          2,
          3
        ]
      },
      "keyStr": "1111",
      "keyInt": 1
    }
  },
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "name": "车间1",
          "status": "异常",
          "val": 10
        },
        {
          "name": "车间2",
          "status": "异常",
          "val": 22
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

现在我们想做以下两件事:

  • 将user这个state里的部分数值作出全量替换

  • 将workshop这个state里的某个数组中的部门元素作出替换 即期待将state变成以下内容

    {
 "user": {
   "code": "200",
   "res": {
     "keyStr": "222",
     "data1": {
       "list": [
         3,
         3,
         3
       ]
     },
     "keyInt": 1
   }
 },
 "workshop": {
   "res": {
     "shopInfo": [
       {
         "name": "车间1",
         "fff": 1,
         "status": "正常",
         "val": 10
       },
       {
         "val": 22,
         "name": "车间2",
         "ddd": 2,
         "status": "正常"
       },
       {
         "val": 33,
         "name": "车间3",
         "status": "异常"
       }
     ]
   },
   "code": "200"
 }
}
支持以下替换的processor:

- Basic Processor: 对string, number, Array等type的字段做全量替换
- Patch Processor: 对Array里的部分元素作出替换
- Batch Processor: 对Array里所有元素的特定字段进行替换
- Custom Processor: 自定义的processor

### Basic Processor: 对string, number, Array等type的字段做全量替换

注意:

- 不支持将对象替换成数组, 0.0.8起

需求如下,对于global这个namespace而言，将user这个state里的部分元素作出替换，样例配置如下

```json
{
  "global": {
    "user": {
      "type": "replace",
      "value": {
        "res": {
          "keyStr": "222",
          "data1": {
            "list": [
              3,
              3,
              3
            ]
          }
        }
      }
    }
  }
}

在这个例子中我们将对user这个state作出如下替换

  • res.keyStr替换成字符串2222
  • res.data1.list替换成数组[3,3,3]

对应的结果如下 输入

  {
  "user": {
    "code": "200",
    "res": {
      "data1": {
        "list": [
          1,
          2,
          3
        ]
      },
      "keyStr": "1111",
      "keyInt": 1
    }
  }
}

输出

{
  "user": {
    "code": "200",
    "res": {
      "keyStr": "222",
      "data1": {
        "list": [
          3,
          3,
          3
        ]
      },
      "keyInt": 1
    }
  }
}

对Array里的部分元素作出替换

需求如下,对于global这个namespace而言，将workshop这个state下的某shopInfo数组里的部分元素作出替换，样例如下

{
  "global": {
    "workshop": {
      "type": "patch",
      "selectPath": "res.shopInfo",
      "value": {
        "res": {
          "shopInfo": [
            {
              "fff": 1,
              "status": "正常",
              "name": "车间1"
            },
            {
              "name": "车间2",
              "ddd": 2,
              "status": "正常"
            }
          ]
        }
      },
      "matchKey": "name"
    }
  }
}

在这个例子中，我们坐了如下的事情

  1. 按照res.shopInfo来定位要修改的数组的位置
  2. 按照name字段来对数组元素作出匹配，并修改其他值
  3. 将name为车间1的对象的status字段修改为字符串正常，fff字段修改为1
  4. 将name为车间2的对象的status字段修改为字符串正常，ddd字段修改为2 输入
{
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "val": 10,
          "name": "车间1",
          "status": "异常"
        },
        {
          "status": "异常",
          "name": "车间2",
          "val": 22
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

输出

{
  "workshop": {
    "code": "200",
    "res": {
      "shopInfo": [
        {
          "fff": 1,
          "val": 10,
          "name": "车间1",
          "status": "正常"
        },
        {
          "status": "正常",
          "name": "车间2",
          "val": 22,
          "ddd": 2
        },
        {
          "name": "车间3",
          "status": "异常",
          "val": 33
        }
      ]
    }
  }
}

对Array里所有元素的特定字段进行替换

需求如下,对于global这个namespace而言，将dashboard这个state下的data数组里所有元素的score字段替换成99，样例如下

{
  "global": {
    "workshop": {
      "type": "batch",
      "selectPath": "res.data",
      "selectKey": "score",
      "value": 99
    }
  }
}

在这个例子中，我们坐了如下的事情

  1. 按照res.data来定位要修改的数组的位置
  2. 按照score字段来确定要修改的数组对象的字段
  3. 将所有数组元素的score字段修改成99 输入
{
  "workshop": {
    "code": "200",
    "res": {
      "data": [
        {
          "score": 88,
          "label": "大屏1"
        },
        {
          "score": 80,
          "label": "大屏2"
        },
        {
          "score": 87,
          "label": "大屏3"
        }
      ]
    }
  }
}

输出

{
  "workshop": {
    "code": "200",
    "res": {
      "data": [
        {
          "score": 99,
          "label": "大屏1"
        },
        {
          "score": 99,
          "label": "大屏2"
        },
        {
          "score": 99,
          "label": "大屏3"
        }
      ]
    }
  }
}

使用自定义的Processor

除了上述三个内置的Processor，本项目还支持自定的Processor，详细介绍如下 将每一个替换的工作定义为MockJOb对象

export interface MockJob {
  selectPath: string; // 用于选择object中特定的字段
  selectKey: string; // 在数组替换中，用于指定数组里元素的值
  matchKey: string; // 在数组patch中，用于匹配数组元素
  type: string; // job类型，用于读取相关的processor
  value: Array<object> | object; // 替换的值
  [key: string]: any; // 自定义processor，用于自定义的字段
}

用户可以参考下述代码来使用Custom Processor

import { DataMocker } from 'data-mock-react';

let dm = new DataMocker();
console.log('查询支持的Job列表', dm.getSupportJobType());
const customProcessor = (obj, mockJob) => {
  const { value } = mockJob;
  return obj['custom'] = value;
};
dm.registerProcessor('customProcessor', customProcessor);
const config = {
  global: {
    user: {
      type: 'customProcessor',
      value: 666
    }
  }
};
const data = {};
const val = dm.mockData(data, 'global', config);
console.log(val);

上述代码定义了一个名为customProcessor的处理器，作用是将配置里的val字段添加/覆盖原数据的custom字段

使用local storage

使用JSON.strinify将配置Json序列化成字符串，放到将配置存放在local storage里的codeMap值,然后直接调用即可

import { DataMocker } from 'data-mock-react';

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      let val = dm.mockData(data, 'global');
      return Object.assign(state, md);
    }
  }
}

使用静态变量

在代码里将配置项写成静态变量，然后直接调用即可

import { DataMocker } from 'data-mock-react';

const mockConfig = {
  global: {
    user: {
      type: 'replace',
      value: {
        res: {
          data1: {
            list: [3, 3, 3],
          },
          keyStr: '222',
        },
      },
    },
    workshop: {
      type: 'patch',
      selectPath: 'res.shopInfo',
      matchKey: 'name',
      value: {
        res: {
          shopInfo: [
            {
              name: '车间1',
              fff: 1,
              status: '正常',
            },
            {
              name: '车间2',
              ddd: 2,
              status: '正常',
            },
          ],
        },
      },
    },
  },
};
export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      let val = dm.mockData(data, 'global', mockConfig);
      return Object.assign(state, val);
    }
  }
}

配置项相关

DataMocker类提供以下方法

import { DataMocker } from 'data-mock-react';

export default {
  namespace: 'global',
  state: {},
  reducers: {
    save(state, { payload: data }) {
      let dm = new DataMocker();
      console.log(dm.getSupportJobType()) // 获得当前支持的替换类型
      console.log(dm.getConfig()) // 获得当前mocker的配置
      console.log(dm.setConfig({}))// 设置当前mocker的配置
      console.log(dm.reset()) // 重置mocker
      let val = dm.mockData(data, 'global');
      return Object.assign(state, md);
    }
  }
}
data mocker
@everything-registry/sub-chunk-1444@infinitebrahmanuniverse/nolb-data-
0.0.8

3 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago