Frontend-tools NPM

front-tools

前端开发中常用的变量、函数、类等。

moment

方便的对时间进行操作，格式化输出时间

实例化

支持解析字符串，时间戳，JSON类型的时间，Date对象

// 默认为当前时间
moment().format();
// string, 默认使用Date对象的解析规则
moment('2021-01-01').format(); // 2021-01-01
// 根据自已的解析规则进行解析
moment('20210101', 'YYYYMMDD').format(); // 2021-01-01
// Date对象
moment(new Date()).format();
// 时间戳
moment(1622817988679).format(); // 2021-01-01
// json date
moment({ year: 2021, month: 2 }).format(); // 2021-02-01
// 链式赋值
moment().year(2020).month(10).day(1).hour(1);

格式化输出

默认的解析规则

Y: year,年
M: month,月份
D: date,日期
H: hour,时钟
m: minute,分钟
s: second,秒钟

默认提供的解析字符串

moment.FORMAT.DATE // YYYY-MM-DD
moment.FORMAT.MONTH // YYYY-MM
moment.FORMAT.TIME // HH:mm
moment.FORMAT.TIME_SECONDS // HH:mm:ss

format

默认使用moment.FORMAT.DATE作为解析规则

moment('2021-01-01').format() // 2021-01-01
moment('2021-01-01').format('YY-M-D') // 21-1-1

// 改变format函数的默认参数
moment.registerFormatFuncArgument(moment.FORMAT.MONTH);
moment('2021-01-01').format() // 2021-01

切换新的解析规则

值得高兴的是，moment.FORMAT提供的解析规则将会根据moment.FORMAT_KEY的规则进行变化

moment.registerFormatKey({ year: 'y', month: 'm', day: 'd', hour: 'h', minute: 'M', second: 's' });
moment('2021-01-01').format(); // 2021-01-01
moment('2021-01-01').format('yyyy-mm-dd'); // 2021-01-01

异常的时间值

moment使用静默报错的模式，在赋值，操作过程中不会出现错误，当format()输出的时候，才会体现出来或者可以使用isValid函数判断时间是否有效

moment('asd').format(); // Invalid Date

// 自定义异常输出值
moment.registerInvalidValue("异常时间");
moment('asd').format(); // 异常时间

时间的操作、比较

时间的复位

moment('2021-05-05').startOf('month'); // 2021-05-01, 重置时间到21年五月初

时间的操作

moment('2021-06-01 00:00:00').add(1 * moment.Day).format(moment.FORMAT.FORMAT_TIME) // 2021-06-02 00:00:00
moment('2021-06-01 00:00:00').sub(1 * moment.Day).format(moment.FORMAT.FORMAT_TIME) // 2021-05-31 00:00:00
moment().year(2020).month(10).day(1).hour(1);

时间的比较

注意，如果时间出现错误值，可能会导致时间比较错误

let date1 = moment('2021-01-01');
let date2 = moment('2021-01-02');
date1.isBefore(date2); // true; date1是否在date2之前
date1.isAfter(date2); // false; date1是否在date2之后
date1.isEqual(date2); // false; 时间戳是否一致

// 精确度; 默认精确到毫秒级别的比较
date1.isBefore(date2, 'month') // false
date1.isAfter(date2, 'month'); // false
date1.isEqual(date2, 'month'); // true

date1.isBefore(date2, 'day') // true
date1.isAfter(date2, 'day'); // false
date1.isEqual(date2, 'day'); // false

获取时间

getTime: 获取时间戳
getJSONDate: 获取JSON格式的时间

其他

isValid: 判断时间是否有效
max: 从moment[]中获取时间最大的值出来
min: 从moment[]中获取时间最小的值出来

moment.max([moment('2021'), moment('2022')]); //moment('2022')
moment.min([moment('2021'), moment('2022')]); //moment('2021')

variable

isProduction: 是否为生成环境
isDev: 是否为开发环境
loop: 空操作函数

json

json type

JSONValue: json可能的value值
JSONObject: json对象
GeneratorMapValue: 生成mapValue类型
ChangeJSONValue: 改变JSONObject类型的value类型

json function

isJson: 判断是否为JSONObject类型
isEmptyJson: 判断JSONObject类型是否为空
isJsonStr: 判断字符串是否为JSON格式

warning

devWarning: 当条件为false的时候，并且在开发环境中，输出警告信息
devErring: 当条件为fasle的时候，并且在开发环境中，输出错误信息
invariant: 断言对象一定存在，否则报错

invariant(obj, 'obj一定会存在'); // 后续使用obj的时候，typescript编辑器就不会报obj可能为空的警告信息
devWarning(obj, '%s不存在', 'obj'); // 支持占位符的使用

utils

deepCopy: 实现深度复制
generatorUUID: 生成可以获取唯一id的函数
formatString: 格式化字符串输出
isEmptyValue: 判断一个值是否为空
flatArray: 打平数组，将多维数组变为降维成一维数组
genArr: 将数据变为数组
isEqual: 判断俩个数据的值是否一致，非严格比较
isStrictEqual: 判断俩个数据的值是否一致，严格比较

let temp = [1, 2, [3, [4]]];
console.log(temp === deepCopy(temp)); // false

const getUUID = generatorUUID();
getUUID(); // 0
getUUID(); // 1

const template = '%s is %s';
console.log(formatString(template, 'tom', 'boy')); // tom is boy

console.log(flatArray(temp)); // [1,2,3,4]

console.log(genArr(1)); // [1]
console.log(genArr([1])); // [1]

console.log(isEqual(1, '1')); // true
console.log(isStrictEqual(1, '1')); // false