@hlyy-front/master-tool
v1.3.0
Published
create npm package with typescript
Downloads
34
Readme
🚕 hlyy-front前端插件文档
当前插件版本:1.3.0
源码地址(内网访问):http://192.168.8.220:8880/npm-tools/hlyy-front
🍳 What is hlyy-front?
hlyy-front主要是将在前端开发中常用的方法函数、企业级中后台产品UI组件进行二次封装,针对时下的业务场景便于开发、维护的一个混合库(此处混合库的概念指的是既包含方法库又包含组件库)。
🍷 安装与使用
在node.js环境下
安装:
npm install @hlyy-front/master-tool
引用:
import { transferFloat,areDataReckon } from '@hlyy-front/master-tool';
🥧 方法实例详解
📏 1 数字格式处理相关
1.1 transferFloat()
**小数处理函数。**将一个数字转化为指定为保留几位小数的数,返回的值为你想要的那个保留几位小数的数,返回类型为number。
应用场景:
3.6668 --> 3.66
6 --> 6.00
7.1 --> 7
调用方法如下:
transferFloat(6);
函数入参说明:
transferFloat(number, toFixNum, roundingOff)
| 参数 | 是否必传 | 类型 | 描述 | | ----------- | -------- | ------- | ------------------------------------ | | num | 是 | number | 要进行处理的数字 | | toFixNum | 否 | number | 默认值为2。指需要保留为几位小数 | | roundingOff | 否 | boolean | 默认为true。指小数位是否进行四舍五入 |
例子:
如果我想将12.567 转化为 保留1位小数(最后一位小数不四舍五入)的数,那么可以这样调用函数:
transferFloat(12.567,1,flase);
输出为:12.5
1.2 randomNuber()
随机生成一个【min,max】的整数,可保留n位数,不够的前面补0,可到64位,返回的是一个字符串。
应用场景:
-场景1 随机生成1个范围为【1,20】的2位数,比如当为1的时候显示01,2的时候显示02这种。
-场景2 随机生成2022年3月的某一天,日期格式为 2022-03-xx。
调用方法如下:
randomNuber(1,20)
函数入参说明:
randomNuber(min, max, digit)
| 参数 | 是否必传 | 类型 | 默认值 | 描述 | | ----- | -------- | ------- | ------ | ------------------------------------------------------------ | | min | 是 | number | 1 | 最小值 | | max | 是 | number | 10 | 最大值 | | digit | 否 | boolean | 0 | 保留整数的位数,当不够时前面会补零。默认值为0,0表示产生的是什么数就返回什么,不会在前面补零。 |
例子:
- 上面应用场景1的解决方案代码写法:
randomNuber(1,20,2);
- 上面应用场景2的解决方案代码写法:
console.log(`2022-03-${randomNuber(1,31,2)}`);
🕛 2 时间格式处理相关
2.1 areDataReckon()
获取日期函数。这个方法可以获取一个时间范围,返回值类型是一个moment格式数组,这种[YYYY-MM-DD,YYYY-MM-DD]时间格式。
应用场景:
- 获取上周的时间段
- 获取上月的时间段
- 获取近一周的时间段
调用方法如下:
areDataReckon('上周');
函数入参说明:
areDataReckon(type)
| 参数 | 是否必传 | 类型 | 描述 | | ---- | ------------------ | ------ | ------------------------------------------------------------ | | type | 是(需要传指定值) | string | 传入我们想要获取的那个时间段。可选参数如下:本日 | 上日 | 上周 | 上月 | 上季度 | 上年 | 本日 | 近一周 | 近一月 | 近一年。 |
- 入参值type进一步解释,当我们选择不同的入参时将会返回如下内容:
| type入参 | 返回内容 | | -------- | ------------------------------------------------------------ | | 本日 | 返回今天的年月日,开始和结束日期都是今天。【年月日,年月日】 | | 上日 | 返回昨天的年月日,开始和结束日期都是昨天。 | | 上周 | 返回上周的年月日,开始日期为上周星期一,结束日期为上周星期日。 | | 上月 | 返回上月的年月日,开始日期为上月1号,结束日期为上月最后一天。 | | 上季度 | 返回上季度的年月日,开始日期为上季度第一天,结束日期为上季度最后一天。 | | 上年 | 返回上年的年月日,开始日期为上年1月1号,结束日期为上年最后一天。 | | 近一周 | 返回近一周的年月日,开始日期为包括今天往前推七天,结束日期为今天。 | | 近一月 | 返回近一月的年月日,开始日期为包括今天往前推30天,结束日期为今天。 | | 近一年 | 返回上周的年月日,开始日期为包括今天往前推365天,结束日期为今天。 |
例子:
如果想获取近一周的时间段,那么可以像如下这样写:
console.log('areDataReckon("上周"):', areDataReckon('上周'))
控制台输出为:
🏊♂️3 对象与数组格式处理相关
3.1 areRinseObj()
清洗对象函数。该函数主要功能为将对象里面值为undefied、null、'' 这些属性清洗掉,返回值是一个**“干净"的对象**。
应用场景:
- 前端传值给后端,值为这样
{
userName:'user01',
issue:undefined,
remark:null,
photo:''
}
如上,使用areRinseObj函数清洗完返回的就是
{
userName:'user01'
}
调用方法如下:
areRinseObj(obj); // obj为要传入的对象
函数入参说明:
| 参数 | 是否必传 | 类型 | 描述 | | ---- | -------- | ------ | ---------------- | | obj | 是 | object | 传入要清洗的对象 |
3.2 dictToMap()
将对象数组转为Map 。
应用场景:
[
{label:"标签1",value:"key1"},
{label:"标签1",value:"key2"},
]
====>>
[
["key1", "标签1"],
["key2", "标签2"],
]
如上所示,我们一个对象数组转换成了一个Map的形式,如果我们要取对应的键值的话只需这样取就好:dictToMap(要转换的对象数组).get(键名)
。
如果考虑到性能,可这样写:
let tempMap = dictToMap(要转换的对象数组);
console.log(tempMap.get(键名));
调用方法如下:
dictToMap(params, keyCode, valueCode);
函数入参说明:
| 参数 | 是否必传 | 类型 | 描述 | | --------- | -------- | ------ | ----------------------- | | params | 是 | Array | 要传入的对象数组 | | keyCode | 否 | string | 键值字段,默认为value | | valueCode | 否 | string | 属性值字段,默认为label |
例子:
let arrTemp = [
{ label: '西瓜', value: '1' },
{ label: '草莓', value: '2' },
{ label: '菠萝', value: '3' },
]
let temp = dictToMap(arrTemp);
console.log('--------->>>>', temp);
console.log('=========>>>>', temp.get('1'));
输出后结果为:
3.3 dictToObj()
将对象数组转换为键对应值的形式(非Map写法)。
应用场景:
[
{label:"标签1",value:"key1"},
{label:"标签1",value:"key2"},
]
====>>
{
"key1":"标签1",
"key2":"标签2",
}
如上所示,我们将一个对象数组转换成了一个纯对象的模式,左边是“键值”,右边是“属性值”,如果我们要取某个属性值,只需按照正常的对象取值写法即可:dictToObj(要转换的对象数组)[键名]
调用方法如下:
dictToObj(params, keyCode, valueCode)
函数入参说明:
| 参数 | 是否必传 | 类型 | 描述 | | --------- | -------- | ------ | ----------------------- | | params | 是 | Array | 要传入的对象数组 | | keyCode | 否 | string | 键值字段,默认为value | | valueCode | 否 | string | 属性值字段,默认为label |
例子:
let arrTemp = [
{ label: '西瓜', value: '1' },
{ label: '草莓', value: '2' },
{ label: '菠萝', value: '3' },
]
let temp = dictToObj(arrTemp);
console.log('--------->>>>', temp);
console.log('=========>>>>', temp['1']);
输出后结果为:
3.4 dictToOptions()
对象数组转换为antd对应的select option选择项对象数组;
(主要解决后端传过来的字段名不是label、value,可自由转变)。
应用场景:
[
{label:"标签1",value:"key1"},
{label:"标签1",value:"key2"},
]
====>>
[
{label:"标签1",value:"key1"},
{label:"标签1",value:"key2"},
]
看了上面的应用场景,我们可能第一印象感觉这两个对象数组是一样的呀,没错,它们就是一样的o_O。 但是,如果原始数组的label
和value
不叫label
和value
,后端人员给我们传的是xxx
和yyy
,那这个函数有作用了,因为antd的select只认label
和value
嘛。具体如何我们看下面的应用场景2:
应用场景2:
[
{xxx:"标签1",yyy:"key1"},
{xxx:"标签1",yyy:"key2"},
]
====>>
[
{label:"标签1",value:"key1"},
{label:"标签1",value:"key2"},
]
调用方法如下:
dictToOptions(arr,keyCode,valueCode)
函数入参说明:
| 参数 | 是否必传 | 类型 | 描述 | | --------- | -------- | ------ | ----------------------- | | params | 是 | Array | 要传入的对象数组 | | keyCode | 否 | string | 键值字段,默认为value | | valueCode | 否 | string | 属性值字段,默认为label |
例子:
let arrTemp = [
{ xxx: '西瓜', yyy: '1' },
{ xxx: '草莓', yyy: '2' },
{ xxx: '菠萝', yyy: '3' },
]
let temp = dictToOptions(arrTemp,'yyy','xxx');
console.log('--------->>>>', temp);
console.log('=========>>>>', temp['1']);
输出后结果如下:
扩展:啰嗦一句,为了能把 3.2 dictToMap() 、 3.3 dictToObj() 这两个函数方法的性能发挥到极致,当传过来的对象数组的
label
和value
不叫label
和value
的时候, 我们也可以参照 3.4 dictToOptions() 的dictToOptions(arrTemp,'yyy','xxx')
那样传参的,之所以前面只传一个数组,是因为他们的默认值就是value
和label
,所以没有写(这里有在函数入参里面指出),啰嗦完毕。
🥦 组件实例详解
待更新。