基于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位

原文地址:https://www.cnblogs.com/studyshufei/p/12190132.html

时间: 2024-11-19 07:34:24

基于ES6/7/8/9封装的工具函数(持续更新,力求精简)的相关文章

AJAX编程-封装ajax工具函数

即 Asynchronous [e's??kr?n?s] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器进行通信. XMLHttpRequest可以以异步方式的处理程序,浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 封装ajax工具函数 $.ajax = function(options){ if(!options) return fal

JavaScript封装Ajax工具函数及jQuery中的ajax

封装ajax工具函数 /** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function *

【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包含:数组类.浏览器类.日期类.函数类.数学类.媒体类.节点类.对象类.字符串类.类型检测类.正则表达式类等内容. 使用方法 1. 引入Bable transpiler以保证支持ES6 <script type="javascript/text" src="./browser

回归 | js实用代码片段的封装与总结(持续更新中...)

上一次更博还是去年10月28号了,截至今天已经有整整4个月没有更新博客了,没更新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的. 过年期间一直在关注js片段代码,虽然这个时代前端框架横行,大量上层工具层出不穷,比如http请求的封装:react的fetch.vue的axios(vue官方已经不用vue-resource了):知名的lodash,和最近发现的30-seconds-of-code,在我看来这些都是宝贝.言归正传,今天主

Java 字符串工具类持续更新中非原创

1 import java.util.ArrayList; 2 import java.util.List; 3 4 /** 5 * 字符串相关的工具类 6 * 7 * @author Fsx 8 * 9 */ 10 public class StringUtil { 11 /** 12 * 判断一个字符串是否为空或等于空字符串 13 * 14 * @param s 15 * 字符串 16 * @return 是否为空或空字符串 17 */ 18 public static final bool

linux运维安全工具集合[持续更新中..]

lynis 安全漏洞检测工具    https://cisofy.com/download/lynis/    https://cisofy.com/files/lynis-2.2.0.tar.gz 命令 :sudo ./lynis --check-all -Q sudo grep Warning /var/log/lynis.log sudo grep Suggestion /var/log/lynis.log  sudo vi /etc/cron.daily/scan.sh #!/bin/s

基于opencv和QT的摄像头采集代码( GoQTtemplate3持续更新)

在Linux操作系统上,编写带界面的图像处理程序,选择opencv+QT是一种很好的选择.GoQTtemplate3是我为编写Linux下图像处理程序实现的框架,希望能够为大家解决Linux环境下桌面图像处理程序,提供一些帮助. 文中相关代码请参考:https://github.com/jsxyhelu/GOQTtemplate3 一.基本环境构建 a.我们需要完整地安装QT.具体方法,是从网站上下载在线安装程序,并且直接安装 b.下载并且安装OpenCV 直接使用编译好的OpenCV类库 su

Java FTP工具类持续更新中非原创

1 package com.ftp; 2 3 import java.io.File; 4 import java.io.FileInputStream; 5 import java.io.FileOutputStream; 6 import java.io.IOException; 7 import java.io.InputStream; 8 import java.io.OutputStream; 9 import java.net.InetSocketAddress; 10 import

JS常用工具函数(持续记录)

1.设置获取cookie //方式1 //设置cookie function SetCookie(name, value)//两个参数,一个是cookie的名字,一个是值 { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.