基于ES6/7/8/9封装的工具函数(持续更新,力求精简)
Posted studyshufei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于ES6/7/8/9封装的工具函数(持续更新,力求精简)相关的知识,希望对你有一定的参考价值。
请求相关:
场景:
后端接口路径格式:
1 //后端请求接口格式 2 3 //① 4 5 var url1= ‘/api/getUerInfo/{userId}/{roleId}‘ 6 7 // ② 8 9 var url2= ‘/api/getUerInfo‘
后端需求前端传参:
1 //①不需求查询参数,对url不做进一步的处理,直接返回 2 3 //②需要传递查询参数,也就是查询参数需要拼接到url身上
需求:
1 console.log(getUrl(‘/api/getUerInfo/{userId}/{roleId}‘,{userId:12,roleId:33}))//api/getUerInfo/12/33 2 3 console.log(getUrl(‘/api/getUerInfo/{userId}/{roleId}‘,{userId:12,roleId:33,extraParam:‘555‘}))//api/getUerInfo/12/33 4 5 console.log(getUrl(‘/api/getUerInfo/{userId}/{roleId}‘,{userId:12,roleId:33,extraParam:‘555‘},true))///api/getUerInfo/12/33?extraParam=555
方法:
1 /** 2 * 请求相关: 3 * 4 * @param {String} URL: 模板路径,例:‘/uap/msg/announcementRecord/{sysId}/{tenantId}/{userId}‘ 或 ‘/uap/msg/announcementRecord‘ 5 * @param {Object} params: 传入的参数,包含路径参数 或 不包含 6 * @param {Boolean} flag:是否拼接路径和查询参数 7 * 8 * PS:flag为true时,一定是GET请求,GET请求才会拼接参数到URL后面 9 */ 10 11 function getUrl(URL, params, flag=false) { 12 let url =/{(w+)}/g.test(URL)?URL.replace(/{(w+)}/g, (a, b) => {let tmp = params[b];delete params[b];return tmp}):URL 13 return flag? Object.keys(params).reduce((pre, cur) =>(pre += (pre === url ? ‘?‘ : ‘&‘) + `${cur}=${params[cur]}`), url): url 14 }
方法2:JSON 转 fromData
1 /** 2 * JSON 转 fromData 3 * @param {Object} o 需要转成formData 的对象 4 */ 5 6 function jsonToFromData(o){ 7 return Object.keys(o).reduce((p, c) => !p.append(c, o[c]) && p, new FormData()) 8 }
方法3:处理月份的回显
1 /** 2 * 处理月份的回显 3 * @param {Number} num 月份的数字 4 * @returns {string} 转换后的汉字月份 5 */ 6 function monthFilter (num) { 7 return num>0&&num<13? [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘][num-1]+‘月‘:‘月‘ 8 }
方法4:处理星期的回显
/** * 处理星期的回显 * @param {Number} num 星期的数字 * @returns {string} 转换后的汉字星期 */ function weekFilter (num) { return num>0&&num<8?‘周‘+[‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,‘日‘][num-1]:‘周‘ }
方法5:创建基于当前/指定时间的 过去 n 天时间(包含当天日期)
function getPassDays(n,s) { return [...Array(n).keys()].map(days=>new Date((s?new Date(s):Date.now()) - 86400000 * days).toLocaleDateString()).map(item=>item.split(//|-/).map(i=>i.padStart(2,‘0‘)).join(‘-‘)) } console.log(getPassDays(3)) //["2020-01-14", "2020-01-13", "2020-01-12"] (博主测试时间) console.log(getPassDays(3,1530975600000)) //["2018-07-07", "2018-07-06", "2018-07-05"] (指定时间)
方法5:获取当前页面路径 或 指定路径 上的 参数集合
1 /** 2 * 3 * @param {String} url 指定一个url路径字符串 4 * 5 */ 6 function getUrlParms(url){ 7 return (url?url:location.href).includes(‘?‘)?(url?url:location.href).split(‘?‘)[1].match(/([^&=]*)=([^&]*)/g).reduce((pre,cur)=> {pre[cur.split(‘=‘)[0]] = cur.split(‘=‘)[1];return pre},{}):{} 8 }
方法6:url 参数序列号
1 /** 2 * url 参数序列化 3 * @param {String} baseURL 4 * @param {Object} params 5 */ 6 function serializationUrlParams(baseURL,params){ 7 return Object.keys(params).reduce((pre,cur)=> pre += ((pre===baseURL? ‘?‘:‘&‘)+`${cur}=${params[cur]}`),baseURL) 8 }
方法7:格式化时间
/** * 时间格式化 */ function formatDate() { let defaultFormat=‘yyyy-MM-dd hh:mm:ss‘ let defaultTimeValue = Date.now() let val,format; if(!arguments.length){//如果没有传参 默认 val = defaultTimeValue format =defaultFormat }else if(arguments.length==1){//如果传一个参数 根据类型 if(typeof arguments[0] === ‘string‘){ if(defaultFormat.includes(arguments[0])){ val = defaultTimeValue format = arguments[0] }else{ val = String(arguments[0]).length<13?String(arguments[0]).padEnd(13,‘0‘)*1:arguments[0] format =defaultFormat } }else{ val = defaultTimeValue format =defaultFormat } }else if(arguments.length==2){ if(defaultFormat.includes(arguments[0])){ val = String(arguments[1]).length<13?String(arguments[1]).padEnd(13,‘0‘)*1:arguments[1] format = arguments[0] }else if(defaultFormat.includes(arguments[1])){ val = String(arguments[0]).length<13?String(arguments[0]).padEnd(13,‘0‘)*1:arguments[0] format = arguments[1] } } var t = new Date(Number(val))==‘Invalid Date‘?new Date(val):new Date(Number(val)) var date = { "M+": t.getMonth() + 1, "d+": t.getDate(), "h+": t.getHours(), "m+": t.getMinutes(), "s+": t.getSeconds(), "q+": Math.floor((t.getMonth() + 3) / 3), "S+": t.getMilliseconds() }; if (/(y+)/i.test(format)) { format = format.replace(RegExp.$1, (t.getFullYear() + ‘‘).substr(4 - RegExp.$1.length)); } for (var k in date) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length)); } } return format; } console.log(formatDate())//2020-01-06 14:18:43 console.log(formatDate(‘yyyy-MM-dd hh‘)) //2020-01-06 14 console.log(formatDate(1530975600)) //2020-01-06 14:18:43 console.log(formatDate(1530975600000)) //2020-01-06 14:18:43 console.log(formatDate(1530975600000,‘yyyy-MM-dd hh:mm‘)) //2018-07-07 23:00 console.log(formatDate(‘yyyy-MM-dd‘,1530975600)) //2018-07-07
①不传参数,默认返回当前时间 ,格式为 :年月日时分秒
②如要自定义返回时间格式:根据 标准时间格式 yyyy-MM-dd hh:mm:ss
自定义,只需传一个 时间格式参数
③如果只传一个参数,可以是 时间格式参数 或 时间戳,返回值均是基于当前时间的返回值
④如果你需要自定义时间戳返回自定义时间格式,那么可以传两个参数,不受参数顺序影响,时间戳可以是10位
以上是关于基于ES6/7/8/9封装的工具函数(持续更新,力求精简)的主要内容,如果未能解决你的问题,请参考以下文章