前言
前端的工具库，常用的也都比较多，一些数据转换、格式化、存储等，也都比较杂，我们试着进行一个大的归类
- 字符串Base64转换
- 数据格式的转换，从扁平化数据结构，转换为树形数据结构
- 时间转换器集合
- 千分号的转换
base64
平常业务中，如果数据的简单处理或者传输，可以使用base64进行转换
业务场景使用分析：
1、小图片直接base64处理后，直接在Img引用，场景使用较多
如：公共组件库NoData组件，为空时显示的默认图片
2、简单的安全编码处理，一些敏感数据大字符串编码后，存储到后端。这个需要看情况，转换后体积会变大，需要考虑
3、URL地址携带参数中有敏感字符串等，可以编码处理，然后服务端进行base64解码
atob: 对原数据进行编码,
btoa: 对编码进行解密成原数据,
utob: utob,
encode: ur编码
encodeURI: 把字符串作为 URI 进行编码,
decode: 解码,
isBase64: 判断是否base64，有兼容性问题，注意使用,fromBase64: 解码
toBase64: 加密
源代码
'use strict';
const Base64 = (()=>{
var global = window || {}
// existing version for noConflict()
var _Base64 = global.Base64;
var version = "2.1.9";
// if node.js, we use Buffer
var buffer;
if (typeof module !== 'undefined' && module.exports) {
try {
buffer = require('buffer').Buffer;
} catch (err) { }
}
// constants
var b64chars
= 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var b64tab = function (bin) {
var t = {};
for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;
return t;
}(b64chars);
var fromCharCode = String.fromCharCode;
// encoder stuff
var cb_utob = function (c) {
if (c.length < 2) {
var cc = c.charCodeAt(0);
return cc < 0x80 ? c
: cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))
+ fromCharCode(0x80 | (cc & 0x3f)))
: (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))
+ fromCharCode(0x80 | ((cc >>> 6) & 0x3f))
+ fromCharCode(0x80 | (cc & 0x3f)));
} else {
var cc = 0x10000
+ (c.charCodeAt(0) - 0xD800) * 0x400
+ (c.charCodeAt(1) - 0xDC00);
return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))
+ fromCharCode(0x80 | ((cc >>> 12) & 0x3f))
+ fromCharCode(0x80 | ((cc >>> 6) & 0x3f))
+ fromCharCode(0x80 | (cc & 0x3f)));
}
};
var re_utob = /[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;
var utob = function (u) {
return u.replace(re_utob, cb_utob);
};
var cb_encode = function (ccc) {
var padlen = [0, 2, 1][ccc.length % 3],
ord = ccc.charCodeAt(0) << 16
| ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)
| ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),
chars = [
b64chars.charAt(ord >>> 18),
b64chars.charAt((ord >>> 12) & 63),
padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),
padlen >= 1 ? '=' : b64chars.charAt(ord & 63)
];
return chars.join('');
};
var btoa = global.btoa ? function (b) {
return global.btoa(b);
} : function (b) {
return b.replace(/[\s\S]{1,3}/g, cb_encode);
};
var _encode = buffer ? function (u) {
return (u.constructor === buffer.constructor ? u : new buffer(u))
.toString('base64')
}
: function (u) { return btoa(utob(u)) }
;
var encode = function (u, urisafe) {
return !urisafe
? _encode(String(u))
: _encode(String(u)).replace(/[+\/]/g, function (m0) {
return m0 == '+' ? '-' : '_';
}).replace(/=/g, '');
};
var encodeURI = function (u) { return encode(u, true) };
// decoder stuff
var re_btou = new RegExp([
'[\xC0-\xDF][\x80-\xBF]',
'[\xE0-\xEF][\x80-\xBF]{2}',
'[\xF0-\xF7][\x80-\xBF]{3}'
].join('|'), 'g');
var cb_btou = function (cccc) {
switch (cccc.length) {
case 4:
var cp = ((0x07 & cccc.charCodeAt(0)) << 18)
| ((0x3f & cccc.charCodeAt(1)) << 12)
| ((0x3f & cccc.charCodeAt(2)) << 6)
| (0x3f & cccc.charCodeAt(3)),
offset = cp - 0x10000;
return (fromCharCode((offset >>> 10) + 0xD800)
+ fromCharCode((offset & 0x3FF) + 0xDC00));
case 3:
return fromCharCode(
((0x0f & cccc.charCodeAt(0)) << 12)
| ((0x3f & cccc.charCodeAt(1)) << 6)
| (0x3f & cccc.charCodeAt(2))
);
default:
return fromCharCode(
((0x1f & cccc.charCodeAt(0)) << 6)
| (0x3f & cccc.charCodeAt(1))
);
}
};
var btou = function (b) {
return b.replace(re_btou, cb_btou);
};
var cb_decode = function (cccc) {
var len = cccc.length,
padlen = len % 4,
n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)
| (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)
| (len > 2 ? b64tab[cccc.charAt(2)] << 6 : 0)
| (len > 3 ? b64tab[cccc.charAt(3)] : 0),
chars = [
fromCharCode(n >>> 16),
fromCharCode((n >>> 8) & 0xff),
fromCharCode(n & 0xff)
];
chars.length -= [0, 0, 2, 1][padlen];
return chars.join('');
};
var atob = global.atob ? function (a) {
return global.atob(a);
} : function (a) {
return a.replace(/[\s\S]{1,4}/g, cb_decode);
};
var _decode = buffer ? function (a) {
return (a.constructor === buffer.constructor
? a : new buffer(a, 'base64')).toString();
}
: function (a) { return btou(atob(a)) };
var decode = function (a) {
return _decode(
String(a).replace(/[-_]/g, function (m0) { return m0 == '-' ? '+' : '/' })
.replace(/[^A-Za-z0-9\+\/]/g, '')
);
};
var noConflict = function () {
var Base64 = global.Base64;
global.Base64 = _Base64;
return Base64;
};
var isBase64 = function (a) {
if(a === '' || a.trim() === ''){
return false;
}
try{
return btoa(atob(a)) == a;
}catch(err){
return false;
}
};
// export Base64
global.Base64 = {
VERSION: version,
atob: atob,
btoa: btoa,
fromBase64: decode,
toBase64: encode,
utob: utob,
encode: encode,
encodeURI: encodeURI,
btou: btou,
decode: decode,
noConflict: noConflict,
isBase64: isBase64,
};
// if ES5 is available, make Base64.extendString() available
if (typeof Object.defineProperty === 'function') {
var noEnum = function (v) {
return { value: v, enumerable: false, writable: true, configurable: true };
};
global.Base64.extendString = function () {
Object.defineProperty(
String.prototype, 'fromBase64', noEnum(function () {
return decode(this)
}));
Object.defineProperty(
String.prototype, 'toBase64', noEnum(function (urisafe) {
return encode(this, urisafe)
}));
Object.defineProperty(
String.prototype, 'toBase64URI', noEnum(function () {
return encode(this, true)
}));
};
}
if (window.Base64) {
return window.Base64;
} else {
window.Base64 = global.Base64;
return global.Base64;
}
})()
export default {
...Base64
};
业务应用
import { Base64 } from "@basic-utils";
Base64.fromBase64
Base64.toBase64
treeHelper 扁平化数据结构转换
数据格式的转换，从扁平化数据结构，转换为树形数据结构
如果集合中的id和parentId不是转换函数默认的关联关系，则需要显示的传入
computTreeList(list,'KID','KParentId')
基本应用
const list = [
{'id':'A001','name':'总公司','parentId':'-1'},
{'id':'A001001','name':'分公司1','parentId':'A001'},
{'id':'A001002','name':'分公司2','parentId':'A001'}
]
const treeList = computTreeList(list)
转换后，其中 children 为子节点对象
const list = [
{
'id':'A001',
'name':'总公司',
'parentId':'-1'
'children':[
{'id':'A001001','name':'分公司1','parentId':'A001'},
{'id':'A001002','name':'分公司2','parentId':'A001'}
]
},
]
参数说明
| 参数 | 说明 | 类型 |
|---|---|---|
| list | 原数据一维数组 | array |
| isNoDeep | 是否深拷贝 | boolean |
| id | 主键名 | string |
| pid | 父主键名 | string |
代码实现
import { compact, cloneDeep, orderBy } from 'lodash';
function computTreeList(list, id = 'id', pid = 'parentId', isNoDeep) {
let treeData;
if (!isNoDeep) {
treeData = cloneDeep(list);
} else {
treeData = list;
}
let treeMap = {};
treeData.forEach((v) => {
treeMap[v[id]] = v;
});
let arr = [];
for (let i = 0, l = treeData.length; i < l; i++) {
const item = treeData[i];
let hasParent = false;
if (item[pid] && treeMap[item[pid]]) {
hasParent = true;
const item2 = treeMap[item[pid]];
!Array.isArray(item2.children) && (item2.children = []);
item2.children.push(item);
}
!hasParent && arr.push(i);
}
treeMap = null;
return treeData.filter((_, index) => arr.includes(index));
}
export default {
computTreeList
};
DateHelper 时间转换器
这是一个常用的日期转换函数集合，列了一些常用的
1、时间戳格式化
2、计算两个日期之间天数差
3、时间转时间戳
import moment from "moment"
//时间戳格式化
function mills2datetime(num) {
var date = new Date(num);
return date.getFullYear() + "-" + _formatLenth(date.getMonth() + 1) + "-" + _formatLenth(date.getDate()) + " " + _formatLenth(date.getHours()) + ":" + _formatLenth(date.getMinutes()) + ":" + _formatLenth(date.getSeconds());
};
/**
* 计算两个日期之间天数差
* @param {[type]} sDate1 [支持“yyyy-mm-hh”、‘yyyy.mm.hh’、‘yyyy/mm/dd’时间格式]
* @return {[type]} [description]
*/
function daysBetween(sDate1, sDate2) {
//Date.parse() 解析一个日期时间字符串，并返回1970/1/1 午夜距离该日期时间的毫秒数
var time1 = Date.parse(new Date(sDate1));
var time2 = Date.parse(new Date(sDate2));
var nDays = parseInt((time2 - time1) / 1000 / 3600 / 24);
return nDays;
};
//时间戳格式化,如：1441672045568 --> "2015-09-08 08:27:25:568"
function mills2timestamp(num, symbol = "-", showAll = true) {
var date = new Date(num),
hmsStr = "";
if (showAll) hmsStr = _formatLenth(date.getHours()) + ":" + _formatLenth(date.getMinutes()) + ":" + _formatLenth(date.getSeconds()) + ":" + _formatLenth(date.getMilliseconds(), 3);
return date.getFullYear() + symbol + _formatLenth(date.getMonth() + 1) + symbol + _formatLenth(date.getDate()) + " " + hmsStr;
};
//时间转时间戳
function dateTime2mills(datetime) {
var timestamp2 = Date.parse(new Date(datetime));
return timestamp2 / 1000;
};
/**
* @desc 时间戳格式化
* @param value 传入的日期，可以不传入-获取当前时间
* @param format 格式化方式 默认：YYYYMMDDHHmmss
*/
function currentDate(value, format = 'YYYYMMDDHHmmss') {
return value ? moment(value).format(format) : moment().format(format)
}
export default {
currentDate,
dateTime2mills,
mills2timestamp,
daysBetween,
mills2datetime,
};
业务应用 currentDate
获取时间
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.currentDate()
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.currentDate(1441672045568)
参数说明
| 参数 | 说明 | 类型 |
|---|---|---|
| value | 时间非必填，默认获取当前日期 | Date对象 |
| fomart | 日期格式 | string 默认YYYYMMDDHHmmss |
业务应用 dateTime2mills
时间转时间戳
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.dateTime2mills(new Date())
参数说明
| 参数 | 说明 | 类型 |
|---|---|---|
| value | 时间 | Date对象 |
业务应用 mills2timestamp
时间戳格式化,如：1441672045568 --> "2015-09-08 08:27:25:568"
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.mills2timestamp(1441672045568,'/')
// "2015/09/08 08/27/25/568"
参数说明
| 参数 | 说明 | 类型 | |
|---|---|---|---|
| value | 时间戳 | Number | |
| symbol | 间隔符 | String | 默认 - |
| showAll | 是否标准(间隔符:) | true/false | 默认 true |
业务应用 daysBetween
daysBetween 计算两个日期之间天数差
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.daysBetween('2015-09-08','2015-05-08')
// [支持“yyyy-mm-hh”、‘yyyy.mm.hh’、‘yyyy/mm/dd’时间格式]
参数说明
| 参数 | 说明 | 类型 |
|---|---|---|
| startDate | 支持“yyyy-mm-hh”、‘yyyy.mm.hh’、‘yyyy/mm/dd’时间格式 | Number |
| endDate | 支持“yyyy-mm-hh”、‘yyyy.mm.hh’、‘yyyy/mm/dd’时间格式 | Number |
业务应用 mills2datetime
mills2datetime 时间戳格式化
import { DateHelper } from '@basic-utils';
const dateTime = DateHelper.mills2timestamp(1441672045568)
// "2015-09-08 08:27:25:568"
参数说明
| 参数 | 说明 | 类型 |
|---|---|---|
| value | 时间戳 | Number |
thousand 千分号格式化数字
千分号的转换 thousand(1234) ==> 1,234
/**
*
* @param {Number} num
* @desc 千分号
*/
export default function thousand(num) {
return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
submidstr 文字中间省略号
文字中间省略号
API
function submidstr(str: string, replaceLength: number): string;
源代码
/**
* 文字超出中间省略号
* @param {string} str
*/
export default function submidstr(str, replaceLength = 4) {
if (str.length > replaceLength * 2) {
let arr1 = str.substr(0, replaceLength);
let arr2 = str.substr(str.length - replaceLength, replaceLength);
return `${arr1}...${arr2}`;
} else {
return str;
}
}
下章我们来聊聊，存储相关的工具库函数....
加油，老铁
